CODEWITHSUNDEEP
phpjqueryhtml
Jake Groves
Jake Groves

Reputation: 327

jquery form crashing on submit

I am using Xampp and just started learning web dev. Basically i am trying to learn how to use jquery to submit a form without having to change page, bare in mind i do know it has no validation in and this is for my learning practice.

So myy issue is when i click submit it is causing my webpage to freeze and crash, have I done something wrong with the code i am trying to learn to use?

register.php

<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/submit.js"></script>
    </head>
    <body>
        <form id="myForm" method="post">
            Username:    <input name="username" id="username" type="text" /><br />
            Email:   <input name="email" id="email" type="text" /><br />
            Password:<input name="password" id="password" type="password" /><br /> 
            <input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
        </form>
        ==============================
        <br />
        <div id="results"></div>
    </body>
</html>

js/submit.js

function SubmitFormData() {
    var username = $("#username").val();
    var email = $("#email").val();
    var pass = $("#password").val();
    $.post("submit.php", { 
        username: username, 
        email: email, 
        pass: pass
    }, function(data) {
        $('#results').html(data);
        $('#myForm')[0].reset();
    });
}

submit.php

<?php
  echo $_POST['username'] ."<br />";
  echo $_POST['email'] ."<br />";
  echo $_POST['pass'] ."<br />";
  echo "==============================<br />";
  echo "All Data Submitted Successfully!";
?>

thanks

Upvotes: 3

Views: 1414

Answers (2)

CodeWalker
CodeWalker

Reputation: 2398

Use var formData = $("#myform").serialize() instead! 

$(document).ready(function() {

// process the form
$("#myform").submit(function(event) {

    // get the form data
    // there are many ways to get this data using jQuery (you can use the class or id also)
    var formData = $("#myform").serialize();


    // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'register.php', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'html', // what type of data do we expect back from the server
            encode      : true
        })
        // using the done promise callback
    .done(function(data) {
            console.log(data);

    });

});

    // stop the form from submitting the normal way and refreshing the page
    event.preventDefault();
});

Upvotes: 2

Dinesh Patra
Dinesh Patra

Reputation: 1135

The following code is working in jquery-2.2.0.min.js, But in 1.11.1 it is throwing RangeError.

<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
</head>
<body>
  <form id="myForm" method="post">
     Username:    <input name="username" id="username" type="text" /><br />
     Email:   <input name="email" id="email" type="text" /><br />
     Password:<input name="password" id="password" type="password" /><br /> 
    <input type="submit" id="submitFormData" value="Submit" />
   </form>
   ==============================
   <br />
   <div id="results">
   </div>
   <script>
        $("#myForm").on('submit', function(e) {
            e.preventDefault(); 
            var name = $("#username").val();
            var email = $("#email").val();
            var pass = $("#password").val(); 
            $.post("submit.php", {
                name: name, 
                email: email, 
                pass: pass
            }, function(data, status) { 
                $('#results').html(data);
                $('#myForm').trigger("reset");
            });
            return false;
        });
    </script>
</body>
</html>

The way question asked

<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
</head>
<body>
  <form id="myForm" method="post">
     Username:    <input name="username" id="username" type="text" /><br />
     Email:   <input name="email" id="email" type="text" /><br />
     Password:<input name="password" id="password" type="password" /><br /> 
    <input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
   </form>
   ==============================
   <br />
   <div id="results">
   </div>
   <script>
    function SubmitFormData() {
        var username = $("#username").val();
        var email = $("#email").val();
        var pass = $("#password").val();
        $.post("submit.php", { 
            name: username, 
            email: email, 
            pass: pass
        }, function(data) {
            $('#results').html(data);
            $('#myForm').trigger('reset');
        });
    }
    </script>
</body>
</html>

Here only change, I have changed the jQuery version.

The above two methods are working. Might be jquery version issue.

Upvotes: 1

Related Questions