Prevent Page Load on Jquery Form Submit With None Display Button

Prevent Page Load on Jquery Form Submit with None Display Button

I think you're looking for AJAX. AJAX lets you send the form data to a back end PHP file (that can then insert data into a DB, and/or get data from the DB) without reloading the page.

The page is reloading because you are using a <form>. When the submit button is pressed, it submits the form, which always refreshes the page. However, if you use AJAX you can send the data, (optionally receive a response) and carry on as normal.

In fact, when you are using AJAX you don't even need to use a <form> structure -- simple DIVs work just fine. Then you don't need to use event.preventDefault() to suppress the built-in form refresh.

Check out this post and especially its examples. Copy them onto your own system and see how they work. It's pretty simple.

---

Also, change the Submit button's type from type="submit" to type="button"

---

To detect when a user presses ENTER in the input field, and then click the submit button, try this:

$(function(){
    $('#user-response').keyup(function(){
        var keycode = (e.keyCode ? e.keyCode : e.which);
        if(keycode == '27'){ $('form').fadeOut();}
        if(keycode == '13'){ 
            $('#user_submit').click();
        }
    });
});

$(“#submit”).click not preventing page load

<input type="submit" /> will submit the form (and update the page) if you click it by default. So, if you want to prevent it from going to another page, just use another type of button: <input type="button" /> or <button /> or prevent the default event with e.preventDefault() implemented in jQuery:

$("#subdel").click( function(e) {
    $.post( $("#deleteform").attr("action"), $("#deleteform").serializeArray(), function(info){alert(info); document.location.reload(true); });
    e.preventDefault();
});

UPDATE: And I've just noticed that you use same IDs for HTML elements inside of a PHP loop. It means that you will have multiple elements having the same ID. It's very wrong. That's why it's not working. When there are multiple same-ID elements, jQuery will select only the first one! So your event handlers will work with only the first form. You may test a very simple example here: http://jsfiddle.net/AEm8B/

To make things work you may use classes instead of IDs. I will place here an example of your form refactored, but IDs should be changed to classes in the whole loop, because it semantically wrong: IDs should be unique.

<FORM class='deleteform' action='delete.php' method='post'>
                <INPUT type='hidden' class='mapid' value='<?php echo( $row[0]); ?>'>
                <INPUT type='hidden' class='userid' value='<?php echo( $row[2]); ?>'>
                <INPUT type='hidden' class='aktuuserid' value='<?php echo( $userID); ?>'>
                <INPUT class='subdel' type='submit' OnClick="return confirm('Löschen.Bist Du sicher?');" value='Löschen'>
</FORM>

And your jQuery code:

$(".subdel").click( function() {
    var $form = $(this).parents(".deleteForm");
    $.post( $form.attr("action"), $form.serializeArray(), function(info){alert(info); document.location.reload(true); });
});

// If you want use this construction instead of e.preventDefault()
// it's better bind it outside of click handler if you're not going 
// to submit it with traditional means.
$(".deleteform").submit( function() {
   return false;   
});*/

or with e.preventDefault (could be more preferable):

$(".subdel").click( function(e) {
        var $form = $(this).parents(".deleteForm");
        e.preventDefault();
        $.post( $form.attr("action"), $form.serializeArray(), function(info){alert(info); document.location.reload(true); });
    });

This should make it finally

prevent page reload and call a jquery function when submit button is clicked

You have an error in jQuery code:

Error:

buildingVal = $("#building").val();
levelVal = $("#level").val();
data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();

Solution:

buildingVal = $("#building");
levelVal = $("#level");
data = 'building=' + buildingVal.val() + '&level=' + levelVal.val();

Complete code js:

$('#submit_button').click(function () {        

   var 
       buildingVal = $("#building"),
       levelVal = $("#level"),
       data = 'building=' + buildingVal.val() + '&level=' + levelVal.val();


   $.ajax({
      'url': 'res.php', 
      'type': 'POST',
      'data': data,     
      'success': function (data) {
      }
   });

   return false;

});

Edit

If your ever going to use this form to send data by ajax, the best way is to cancel the event "submit" the form:

HTML:

<form id="myform" method="post" action="<?php echo $_SERVER['PHP_SELF'] ;?>" >
...
</form>

JS:

$('#myform').bind('submit', function(event) {

     return false;
});

$('#submit_button').bind('click', function () {        

   var 
       buildingVal = $("#building"),
       levelVal = $("#level"),
       data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();


   $.ajax({
      'url': 'res.php', 
      'type': 'POST',
      'data': data,     
      'success': function (data) {
      }
   });

});

Stop form refreshing page on submit

You can prevent the form from submitting with

$("#prospects_form").submit(function(e) {
    e.preventDefault();
});

Of course, in the function, you can check for empty fields, and if anything doesn't look right, e.preventDefault() will stop the submit.

Without jQuery:

var form = document.getElementById("myForm");
function handleForm(event) { event.preventDefault(); } 
form.addEventListener('submit', handleForm);

Prevent page reload and redirect on form submit ajax/jquery

Modify the function like this:

function sendForm(e){
  e.preventDefault();
}

And as comment mentions, pass the event:

onclick = sendForm(event);

Update 2:

$('#form-button-submit').on('click', function(e){
   e.preventDefault();

   var name = $('input#name').val(),
       email = $('input#email').val(),
       comments = $('textarea#comments').val(),
       formData = 'name=' + name + '&email=' + email + '&comments=' + comments;

    $.ajax({
      type: 'post',
      url: 'js/sendEmail.php',
      data: formData,
      success: function(results) {
        $('ul#response').html(results);
      }
    });
});

Is it possible to prevent submit button from submitting until DOM is loaded?

If you generate your submit button like so:

<input type="submit" id="submit" value="submit" disabled="disabled"/>

Then you can put this in your $(document).ready( right after the validation plugin has been initialised:

$("#submit").prop("disabled", false);

Demo: http://jsfiddle.net/nZVrs/

Prevent users from submitting a form by hitting Enter

You can use a method such as

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

In reading the comments on the original post, to make it more usable and allow people to press Enter if they have completed all the fields:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

---

Related Topics