问题描述:

when I submit my form, I expect an ajax call to shoe in the console, and the page url to remain the same...

But the form action is taken and the http call changes the url.

<head>

<script src="lib/jquery-1.6.4.min.js" type="text/javascript" ></script>

<script>

$(document).ready(function() {

$( '#myForm' ).submit( function() {

$.ajax({ // create an AJAX call...

data: $(this).serialize(), // get the form data

type: $(this).attr('method'), // GET or POST

url: $(this).attr('action'), // the file to call

success: function(response) { // on success..

$('#resultsDiv').html(response); // update the DIV

}

return false;

});

});

</script>

</head>

<body>

<div id="myFormDiv" >

<form name="myform" id="myform" action="form_handeler.cfm" method="post" >

<input type="text" size="100" name="shoe" value="" /> <input type="submit" name="myFormSubmit" value="submit" />

</form>

</div>

<div id="resultsDiv" >

</div>

</body>

网友答案:

Your code not enclosed properly with });, i.e your script has error due to }); so that your script not executed as you expected, so that default form submission takes place.

   $(function() {
        $('#myform').submit( function() {
            $.ajax({ // create an AJAX call...
                ...
            }); //HERE
            return false;
        });
    }); 
网友答案:

You are supposed to prevent the default action from happening, which is form submit.

Try this:

$(document).ready(function() {

    $( '#myform' ).submit( function(e){
        e.preventDefault();

        $.ajax({ // create an AJAX call...
            data: $(this).serialize(), // get the form data
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            success: function(response) { // on success..
                $('#resultsDiv').html(response); // update the DIV
            }

        //return false; - You dont need the return false here if you are using preventDefault.
    });

}); 

});

Read more on event.preventDefault here

网友答案:

What if we don't you use <form> tag? :D
Here's my solution :
HTML:

<input type="text" size="100" id="shoe" value="" />
<input type="submit" onclick="myFormSubmit()" value="submit" />

Javascript :

    function myFormSubmit(){
      var shoe = $("#shoe").val();
                  $.ajax({                         // create an AJAX call...
                        data: "shoe="+shoe,        // get the form data
                        type: "POST",              // GET or POST
                        url: "form_handeler.cfm",  // the file to call
                        success: function(response) 
                        {                          // on success..
                            $('#resultsDiv').html(response); // update the DIV
                        }

                 });
   return false;
    }
网友答案:

You have syntax errors in the script, also the id is myform not myForm

$(document).ready(function () {
    $('#myform').submit(function () {
        $.ajax({ // create an AJAX call...
            data: $(this).serialize(), // get the form data
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            success: function (response) { // on success..
                $('#resultsDiv').html(response); // update the DIV
            }
        });
        return false;//this was placed within the ajax options
    });
});//this was missing
网友答案:

Fix this in the HTML...

<input type="button" name="myFormSubmit" value="submit" />

And this in your script...

$( '#myFormSubmit' ).click( function(e) {
  e.preventDefault();
  $.ajax({ // create an AJAX call...
    data: $('#myform').serialize(), // get the form data
    type: $('#myform).attr('method'), // GET or POST
    url: $('#myform).attr('action'), // the file to call
    success: function(response) { // on success..
      $('#resultsDiv').html(response); // update the DIV
    }
    return false;
  });
});

...but be warned that there's really know reason to have all the form attributes populated if you plan to use an AJAX call to process the form's data.

网友答案:

Close your paranthesis:

    $(document).ready(function() {
        $( '#myform' ).submit( function() {
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(), // get the form data
                type: $(this).attr('method'), // GET or POST
                url: $(this).attr('action'), // the file to call
                success: function(response) { // on success..
                    $('#resultsDiv').html(response); // update the DIV
                } //ADD THIS TOO
            }); //HERE
            return false;
        });
    }); 
相关阅读:
Top