.ajax（）在按ENTER键后刷新页面

Question

I am using ajax to update the db with a new folder but it refreshes the page after ENTER is hit. on my form I have onkeypress="if(event.keyCode==13) savefolder();" here is the javascript code that I have: what it does basically is after you hit enter it calls the function savefolder, savefolder then sends a request through ajax to add the folder to the db. Issue is it refreshes the page... I want it to stay on the same page. any suggestions? Thank you

<script>


 function savefolder() {

var foldername= jQuery('#foldername').val(),
    foldercolor= jQuery('#foldercolor').val();
//  ajax request to add the folder
            jQuery.ajax({   
                type: 'get',
                url: 'addfolder.php',
                data: 'foldername=' + foldername + '&foldercolor=' + foldercolor,       
                beforeSend: function() { alert('beforesend');}, 
                success: function() {alert('success');}
            });

return false;
}
</script>

Answer 1

This is working:

<form>
    <input type="submit" value="Enter">
    <input type="text" value="" placeholder="search">
</form>

function savefolder() {
    var foldername= jQuery('#foldername').val(),
        foldercolor= jQuery('#foldercolor').val();

    jQuery.ajax({   
        type: 'get',
        url: '/echo/html/',
        //data: 'ajax=1&delete=' + koo,       
        beforeSend: function() {
            //fe('#r'+koo).slideToggle("slow");
        },
        success: function() {
            $('form').append('<p>Append after success.</p>');
        }
    });

    return false;
}

jQuery(document).ready(function() {
    $('form').submit(savefolder);
});

http://jsfiddle.net/TFRA8/

You need to check to see if you're having any errors during processing (Firebug or Chrome Console can help). As it stands, your code is not well-formed, as the $(document).ready() is never closed in the code you included in the question.

Answer 2

Simply stop the propagation of the event at the time of the form submission

jQuery(document).ready(function($) {
  $("#whatever-form-you-are-pulling-your-values-from").submit(function(event) {
    var foldername = $('#foldername').val();
    var foldercolor = $('#foldercolor').val();

    event.stopPropagation();

    //  ajax request to add the folder
    $.ajax({
      type: 'get',
      url: '../addfolder.php',
      data: 'ajax=1&delete=' + koo,       
      beforeSend: function() { fe('#r'+koo).slideToggle("slow"); }, 
      success: function() {  }
  });
});

Answer 3

Since by default on a form the enter button submits the form, you need to not only handle this with your own code, but cancel the event after.

Try this code instead:

onkeypress="if(event.keyCode==13) {savefolder(); return false;}"

The onkeypress event will that the return value of the javascript and only continue with it's events if it returns true.