How can I merge two separate javascripts in one?
I have two separate javascripts. One sends form data to post.php page without page refresh AND refreshes DIV content with (div.php) , but second disables corresponding form submit button. How can I merge this code in one? (not that I have many forms with different id’s in one page).
Problem is on IE9, where this script double submits data!!!
$(function() {
$('form').on('submit', function(e) {
$.ajax({
type: 'post',
url: 'post.php',
data: $(this).serialize(),
success: function(returnedData) {
$('#sidebar').load('div.php');
}
});
e.preventDefault();
});
});
$(document).ready(function() {
$('input[type=submit]').click(function() {
$(this).prop("disabled", true);
$(this).val("Selected");
$(this).closest('form').trigger('submit');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Remove
</script>
<script>
And you're done ;-)
I would go a bit further though:
$(document).ready(function () {
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'post.php',
data: $(this).serialize(),
success: function (returnedData) {
$('#sidebar').load('div.php');
}
});
return false;
});
$('input[type=submit]').click(function () {
$(this).prop("disabled", true);
$(this).val("Selected");
$(this).closest('form').trigger('submit');
});
});
To combine the two code just remove the code
});</script><script>$(document).ready(function () {
to prevent double form submission in ie9, use return false:
$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'post.php',
data: $(this).serialize(),
success: function (returnedData) {
$('#sidebar').load('div.php');
}
});
return false;});
Related
I have a form which has a submit button. If I click this submit button then JSON will be posted to a webservice through AJAX:
$("#msform").submit(function (e) {
$.ajax({
url: 'https://example.com/webservice',
type: 'POST',
data: formData1,
crossDomain: true,
dataType: 'json',
jsonpCallback: 'callback',
success: function (data) {
console.log(data);
}
});
});
The webpage will also load and go to another page.. While loading the user can click multiple times on the Submit button, if he does that then for multiple times the AJAX post will be done to the webservice.
I tried this code to fix this but it does not work:
// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function () {
$(this).on('submit', function (e) {
var $form = $(this);
if ($form.data('submitted') === true) {
// Previously submitted - don't submit again
e.preventDefault();
} else {
// Mark it so that the next submit can be ignored
$form.data('submitted', true);
}
});
// Keep chainability
return this;
};
$('#msform').preventDoubleSubmission();
Any idea why double posting is not prevented??
The solution is to use a variable called wasSubmitted which verify if ajax request was already sent.
var wasSubmitted = false;
$("#msform").submit(function (e) {
if(!wasSubmitted) {
wasSubmitted = true;
$.ajax({
url: 'https://example.com/webservice',
type: 'POST',
data: formData1,
crossDomain: true,
dataType: 'json',
jsonpCallback: 'callback',
success: function (data) {
console.log(data);
}
});
return wasSubmitted;
}
return false;
});
I think a simple preventDefault would be enough
$("#msform").submit(function (e) {
e.preventDefault();
$.ajax(..)
The solution, that comes to my mind first, is to disable the button onclick with JS.
document.getElementById("btn_id").setAttribute("disabled","disabled");
I have form that is posted through AJAX. If I don't use any other JavaScript libraries it works like a charm.
Now I'm using Bootstrap and jQuery and it won't fire.
The code:
$(function() {
$('form').on('submit', function(e) {
$.ajax({
type: 'post',
url: 'ajax-post.php',
data: $(this).serialize(),
alert($(this).serialize());
success: function() {
$(".alert").show(0).delay(2000).hide(0);
}
});
e.preventDefault();
});
});
You can not put alert between two properties data and success, remove alert():
$('form').on('submit', function (e) {
$.ajax({
type: 'post',
url: 'ajax-post.php',
data: $(this).serialize(),
success: function () {
$(".alert").show(0).delay(2000).hide(0);
}
});
e.preventDefault();
});
I'm trying to submit a form from a bootstrap modal and then show a thank you message. The problem is that when I put the JavaScript code the form does not submit at all. But the thank you message is showed.
$(function () {
var frm = $('#inscriete-modal');
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
$("#form-inscriere").show(data);
setTimeout(function(){
location.reload();
}, 3000);
}
});
ev.preventDefault();
});
});
JSFiddle : https://jsfiddle.net/x1ccmj74/
I'm using this code to submit a form using Ajax:
$(document).ready(function(){
$("#SubmitTicket").submit(function(e){
CheckRequired();
e.preventDefault();
dataString=$("#SubmitTicket").serialize();
$.ajax({
type: "POST",
url: "?SubmitTicket=1",
cache: false,
data: dataString,
success: function(res) {
if(res.indexOf("success")!=-1) {
//window.location.href = res.substr(8);
$("#CreateNewTicket_Body").html(res);
$("#CreateTicket").hide();
}
}
});
});
});
This function checks for required classes in form elements
function CheckRequired(event) {
var $form = $(this);
var emptyElements = $form.find('.required').filter(function() {
return this.value === ''
});
if(emptyElements.length > 0) {
event.preventDefault();
emptyElements.addClass("EmptySelect").attr('title', 'This field is required');
//alert(emptyElements.attr("id"));
alert("One or more fields cannot be blank");
return false;
}
}
I then have this code which automatically checks all my forms for required fields using the above function:
$(document).ready(function () {
$('form').on('submit', CheckRequired);
});
It works fine on forms that POST to another page.
When using the Ajax submit code, its display the alert when there is an error, but its still submitting the form.
You might want to enclose the return of CheckRequired into an if() structure :
$(document).ready(function(){
$("#SubmitTicket").submit(function(e){
if(CheckRequired.call(this,e)) { // this should refer to the event target element, i.e. the form element, providing context for the function
e.preventDefault();
dataString=$("#SubmitTicket").serialize();
$.ajax({
type: "POST",
url: "?SubmitTicket=1",
cache: false,
data: dataString,
success: function(res) {
if(res.indexOf("success")!=-1) {
//window.location.href = res.substr(8);
$("#CreateNewTicket_Body").html(res);
$("#CreateTicket").hide();
}
}
}
});
});
});
You can simply add onSubmit="return CheckRequired()" in your form.
If the 'CheckRequired()' return false, you need to stop the script by returning false.
$(document).ready(function(){
$("#SubmitTicket").submit(function(e){
e.preventDefault();
if (!CheckRequired(e)) {
return false;
}
dataString=$("#SubmitTicket").serialize();
$.ajax({
type: "POST",
url: "?SubmitTicket=1",
cache: false,
data: dataString,
success: function(res) {
if(res.indexOf("success")!=-1) {
//window.location.href = res.substr(8);
$("#CreateNewTicket_Body").html(res);
$("#CreateTicket").hide();
}
}
});
});
});
Two ways to approach this:
A) Javascript
$(document).ready(function(){
$("#SubmitTicket").submit(function(e){
if(!CheckRequired()) return false; // THIS!
e.preventDefault();
dataString=$("#SubmitTicket").serialize();
$.ajax({
type: "POST",
url: "?SubmitTicket=1",
cache: false,
data: dataString,
success: function(res) {
if(res.indexOf("success")!=-1) {
//window.location.href = res.substr(8);
$("#CreateNewTicket_Body").html(res);
$("#CreateTicket").hide();
}
}
});
});
});
B) HTML:
<form id="SubmitTicket" onSubmit="return CheckRequired();">
I have an ajax call that works great the first time the form is submitted after that all javascript on the page seems to break. As well as the form won't submit with ajax again.
Here is my ajax call:
$('form').submit(function(event) {
$('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');
$.ajax({
type: "POST",
url: pathname,
data: $(this).serialize(),
success: function(data) {
$('#container').html("<div id='message'></div>");
$('#message').append(data).hide().fadeIn(1500);
},
});
event.preventDefault();
});
I'm getting no errors in my console. Any ideas what might be causing this?
I solved the issue, the main page content was changing. Which was causing the javascript to unload. So I need to use Jquery .on/.live and then it works. For what ever reason this worked fine on one server and not on another.
Use as below: No Need to define event.preventDefault();
$('form').submit(function(event) {
$('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');
$.ajax({
type: "POST",
url: pathname,
data: $(this).serialize(),
success: function(data) {
$('#container').html("<div id='message'></div>");
$('#message').append(data).hide().fadeIn(1500);
$('input:submit').removeAttr("disabled");
},
});
return false;
});
Remove disabled after submitting the form. And remove the , mentioned by #JustinRusso.
$('form').submit(function(event) {
$('input:submit').attr("disabled", true).after('<p class="loading">Searching...</p>');
$.ajax({
type: "POST",
url: pathname,
data: $(this).serialize(),
success: function(data) {
$('#container').html("<div id='message'></div>");
$('#message').append(data).hide().fadeIn(1500);
$('input:submit').removeAttr("disabled");
}
});
event.preventDefault();
});