Ajax Form Cannot Prevent Page Reload with event.preventDefault(); - javascript

I have the following code which is supposed submit a form via Ajax without having to reload the page:
$( document ).on('submit', '.login_form', function( event ){
event.preventDefault();
var $this = $(this);
$.ajax({
data: "action=login_submit&" + $this.serialize(),
type: "POST",
url: _ajax_login_settings.ajaxurl,
success: function( msg ){
ajax_login_register_show_message( $this, msg );
}
});
});
However for some reason, despite the event.preventDefault(); function which is supposed to prevent the form from actually firing, it actually does fire.
My question is, how do I prevent the above form from reloading the page?
Thanks

don't attach a listener on document instead use a on click handler on the submit button and change the type to button.
<button id="form1SubmitBtn">Submit</button>
$('#form1SubmitBtn').click(function(){
//do ajax here
});
Happy Coding !!!

for instance you can write like this
$(".login_form").on('submit', function( event ){
var $this = $(this);
$.ajax({
data: "action=login_submit&" + $this.serialize(),
type: "POST",
url: _ajax_login_settings.ajaxurl,
success: function( msg ){
ajax_login_register_show_message( $this, msg );
}
});
event.preventDefault();
});

You can use jquery and ajax to do that. Here is a nice piece code below that doesn't refresh the page but instead on submit the form gets hidden and gets replaced by a thank you message. The form data is sent to an email address using sendmail.php script.
Assuming your form has 3 input fields - name, email and message.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery("#button").click(function() {
var name=jQuery('#name').val();
var email=jQuery('#email').val();
var message=jQuery('#message').val();
var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
jQuery.ajax({
type: "POST",
url: "sendmail.php",
data: dataString,
success: function() {
jQuery('#contact_form').html("<div id='message'></div>");
jQuery('#contactForm').hide();
jQuery('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>Thank you for your submission. We will be in touch shortly.</p>").hide()
.fadeIn(1500, function() {
});
}
});
return false;
});
});
</script>
On top of your form tag just add this to display the thank you message.
<div id='message'></div>
Enjoy coding!!!!!!!

Related

AJAX is not being called

I'm having an issue with AJAX as for some reason it either isn't being called or isn't working
$(document).ready(function() {
$("#my_form").submit(function(event) {
alert("submited");
event.preventDefault("#my_form");
var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission
alert(post_url + "" + request_method + " " + form_data);
$.ajax({
type: post_url,
url: request_method,
data: form_data,
success: function(data) {
alert(data);
$("server-results").html(data);
}
});
$('#loadingDiv').hide().ajaxStart(function() {
$(this).show();
});
//.ajaxStop(function() {
// $(this).hide();
//});
});
});
I've debugged as much as I could and there is no issue with the form function being activated in JavaScript or the 3 variables being transported into the JS code block. However ajaxStart doesn't activate which makes me believe that the problem is with just ajax.
I also checked the link to ajax and it seems to be working however I'm not sure if its the right link or if it's not valid for whatever reason.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
FYI the ajax link is at the top of the page above both HTML and JS.
You have passed wrong parameters:
type: post_url,
url: request_method,
You need to pass post_url in url and request_method in type. Just change it to:
type: request_method,
url: post_url,
$("server-results").html(data); here you have not specified if server-results is a class or id and therefore the output of the server will never be printed on the page
jQuery .ajaxStart()
As reported in jQuery's official documentation, the ajaxStart event can not be activated by the #loadingDiv element, but you must use the document.
$( document ).ajaxStart(function() {
$( ".log" ).text( "Triggered ajaxStart handler." );
});
Summing up the code should be something like this.
$(document).ready(function() {
$("#my_form").submit(function(event) {
alert("submited");
event.preventDefault("#my_form");
var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission
alert(post_url + "" + request_method + " " + form_data);
$.ajax({
type: post_url,
url: request_method,
data: form_data,
success: function(data) {
alert(data);
$(".server-results").html(data);
}
});
$(document).ajaxStart(function() {
$('#loadingDiv').show();
});
.ajaxStop(function() {
$('#loadingDiv').hide();
});
});
});

Multiple form submit with only one jQuery Ajax

I have a page where is 3-4 form in divs, and I want to submit it with only one script and I want to refresh the actual div content (where is the form). But I don't know how to specify the actual div or form for the ajax post.
$(document).ready(function(){
$(".ajaxform").submit(function() {
var id = $(this).attr('id');
var dataString = $(this).serialize();
$.ajax({
url:'../tools/tools.php',
data: dataString + '&form=' + id,
type: 'POST',
success: function(html)
{
$('#actualdiv').load(document.URL + ' #actualdiv');
}
});
});
});
The forms or divs have unique id for the tools.php where I can run the actual form's mysql.
Since you are posting data and then receiving new forms back as a response, I would make the function more dynamic.
function loadNextForm(form, id){
var dataString = form.serialize();
$.ajax({
url:'../tools/tools.php',
data: dataString + '&form=' + id,
type: 'POST',
success: function(newForm) {
$('#actualdiv').html(newForm);
}
});
}
$(document).ready(function(){
$(".ajaxform").on("submit", function(){
loadNextForm($(this), $(this).attr('id'));
});
});
This should allow you to POST the data, get the new form, place it into the DIV, and allow it to be a functional form that can process the next form.

Post a huge html form by jQuery

I am trying to send a html form consisting of more than 100 sub fieldsets of 10 elements which it totally a huge form of more than 1000 elements.
I use jQuery to send this form. The problem is that it doesn't send all of the elements (it sends 84 sub fields out of 100).
I've been searching a lot but I have not found a reason or solution. Is it a limitation of jQuery or HTML or am I doing something wrong?
Here is the jQuery code:
$(document).on("submit", "#video_table", function() {
var action = $(this).attr('action');
var image_load = "<img src='/img/loading.gif' />";
$("#videoupdate-div").html(image_load);
// $.post(action, $(this).serialize(), function(data) {
// $("#videoupdate-div").html(data);
// });
$.ajax({
//dataType: "json",
url : action,
type : "POST",
data : $(this).serialize() ,
success : function(result) {
$("#videoupdate-div").html(result);
},
error : function(result) {
$("#videoupdate-div").html("Error! Something must be wrong.");
}
});
return false;
});
The form's own submission likely interferes with the submit event
Change
$(document).on("submit", "#video_table", function() {
to
$(document).on("submit", "#video_table", function(e) {
e.preventDefault(); // cancel the form's own submit
PS If the form is not dynamically inserted into the DOM, then this is enough
$("#video_table").on("submit", function(e) {
e.preventDefault();

after submit clear textbox

I'm inserting data into a table using Ajax. I'm using ajax so my page wouldn't get refresh. Here is my Ajax code for calling the inserting page:
<script type="text/javascript">
var i = jQuery.noConflict();
i(document).ready(function(){
i('#myForm').on('submit',function(e) {
i.ajax({
url:'insert.php',
data:$(this).serialize(),
type:'POST'
});
e.preventDefault();
});
});
</script>
Now every time i write in the textbox and hit the submit button the data gets entered but it remains in textbox and i have to press the delete button to erase it.
Question: how can I make so my data gets cleared when I press the submit button?
You can reset the form in the ajax success handler
var i = jQuery.noConflict();
jQuery(function ($) {
$('#myForm').on('submit', function (e) {
$.ajax({
url: 'insert.php',
data: $(this).serialize(),
type: 'POST',
context: this
}).done(function () {
this.reset();
});
e.preventDefault();
});
});
document.getElementById('myForm').reset(); // In Javascript
$("#myform")[0].reset(); // In jQuery Fashion
You can reset form fields on the completion as suggested by arun or on success as below
var i = jQuery.noConflict();
jQuery(function ($) {
$('#myForm').on('submit', function (e) {
$.ajax({
url: 'insert.php',
data: $(this).serialize(),
type: 'POST',
success:function(data) {
$('#myForm')[0].reset();
}
});
e.preventDefault();
Hope it helps

Getting a success info after submitting form via $.ajax in jquery

I have a few forms on my single page and I'm submitting them by this method:
$(function() {
$(".button").click(function() {
var upform = $(this).closest('.upform');
var txt = $(this).prev(".tekst").val();
var dataString = 'tekst='+ txtr;
$.ajax({
type: "POST",
url: "http://url-to-submit.com/upload/baza",
data: dataString,
success: function() {
upform.html("<div class='message'></div>");
$('.message').html("<h2>FORM SUBMITTED</h2>")
.append("<p>THANKS!!</p>")
.hide()
.fadeIn(1500, function() {
$('.message').append("<img src='http://my-images.com/i/check.png' />");
});
}
});
return false;
});
});
As you can see, after submit a form, message div appears instead of submitted form.
It works perfectly, when I submit only one form - then it changes to my message div, but when I submit second, and next and next - every time ALL of my already submitted form's messages refreshing.
It looks bad. I want to operate only on actually submitting form. How to fix it?
Well you're setting the message of every .message div by using $('.message').html(). Try this:
upform.find('.message').html(...)
Hard to tell without seeing how your HTML looks but i'm guessing it's this bit,
$('.message')
Should be something like,
$('.message', upForm).
First you have to find out the message div (upform.find('.message')) and than add any html to it. i think your code should be
$(function() {
$(".button").click(function() {
var upform = $(this).closest('.upform');
var txt = $(this).prev(".tekst").val();
var dataString = 'tekst='+ txtr;
$.ajax({
type: "POST",
url: "http://url-to-submit.com/upload/baza",
data: dataString,
success: function() {
upform.html("<div class='message'></div>");
upform.find('.message').html("<h2>FORM SUBMITTED</h2>")
.append("<p>THANKS!!</p>")
.hide()
.fadeIn(1500, function() {
upform.find('.message').append("<img src='http://my-images.com/i/check.png' />");
});
}
});
return false;
});
});
Another way without editing more in your current code just add few lines.
var msgbox = $("<div class='message'></div>");
upform.html(msgbox);
msgbox.html("<h2>FORM SUBMITTED</h2>")
.append("<p>THANKS!!</p>")
.hide()
.fadeIn(1500, function() {
$(this).append("<img src='http://my-images.com/i/check.png' />");
});

Categories