This question already has answers here:
jQuery Multiple Forms Submit
(2 answers)
Closed 8 years ago.
I have this code to submit 1 form on click.
$('#verify_id').click(function() {
var formData = new FormData($('form#verify_id_form')[0]);
$.ajax({
type: 'post',
url: '/public_transaction/verify_id',
data: formData,
async: false,
success: function (res) {
alert(res);
},
cache: false,
contentType: false,
processData: false
});
return false;
});
But, I want to submit 2 more forms with this. How can I change data to submit multiple forms?
ID of other 2 forms are: #form1 and #form2. How can I modify this line?
var formData = new FormData($('form#verify_id_form')[0]);
EDIT
there is a option in ajax to do something like this...
var dataString = $("#filter-group1, #filter-group2").serialize();
(here 2 forms are getting submitted bu just 1 click)
But, I don't know how to achieve this in my case?
If you don't use "ajax:false" and submit all 3 forms, as $.ajax is asynchronous all the forms will be submitted in non-blocking way.
$('#verify_id').click(function() {
$.ajax({
//code for form 1
});
$.ajax({
//code for form 2
});
$.ajax({
//code for form 3
});
return false;
});
Related
I am using CKEditor and trying to submit my form with jquery but I have a conflict
Jquery
$(document).ready(function (e) {
$("#form").on('submit',(function(e) {
e.preventDefault();
console.log(new FormData(this))
$('.loading-container').show();
$.ajax({
url: "store-course-teacher",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$('.loading-container').hide()
if(data.status == 'done')
{
$('#form').hide();
$('#add-section').show();
$('#course-title').html($('#title').val());
$('.course-id').val(data.course_id)
}
}
});
}));
});
and from my controller I dumped the result and all text area with ckeditor is NULL
I am trying to be clear as possible but that's all I got
I believe with ckeditor, you have to get the HTML from the text editor like this:
var data = CKEDITOR.instances.editor1.getData();
So before calling your ajax, perhaps set data to a hidden input in your form so that your new FormData(this) remains intact?
var data = CKEDITOR.instances.editor1.getData();
$('#MyHiddenInput').val(data);
More info here
best way to send ckEditor with the from was updating the ckEditor instanes
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
I found the solution here
my forms have dual submission.
Step 1. submission on my defined url with ajax
Step 2. allow form to behave as its default behavior.
Issue:
I am not providing any validation with my script. i am not using any plugin like jquery validate.
when submitting the form, the jquery validation is working (Which is if form already heve) but just after the ajax complete it is allow to submit the form.
That should not happens if validation is there.
I am providing this my script to my client to get the submitted form info in my platform.
Thats why i don't know which validation client will use or if they will not use or they will use any plugin for validation.
i just want to stop the submission if there is validation error..
I know there is issue with
$("form[data-track=MySubmit]").off("submit");
$("form[data-track=MySubmit]").trigger( "submit" );
return true;
Script part:
$("form[data-track=MySubmit]").on("submit", function(event) {
var formInputData = $(this).serialize();
$.ajax({
url: "/insertdata",
type: "post",
data: formInputData
dataType: 'json',
success: function(responce) {
$("form[data-track=MySubmit]").off("submit");
$("form[data-track=MySubmit]").trigger( "submit" );
return true;
}
});
});
more info :
its a double submission script..means first it will submit the form on one url which is not in form action then it will allow form to do its default behaviors like
Ist step to save the info using ajax on my url
and then in 2nd step if form have action to submit the form then do this or if form has ajax submission then do this or etc other form behavior on submit
Update :
There is 2 person
I am
My client
I am providing my form submission script to my client they have their own form to and own jquery/javascript.
So now i am giving them my script and asking to put it on your form with my way and once they will put , i will also get the detail of form after submit.
But I AM NOT PROVIDING ANY SCRIPT FOR VALIDATION..
they have own validation there could be any plugin or custom jquery/javascript.
My issue :
How can i stop form submission if there is validation from their form's own jQuery/Javascript ?
Inside Ajax Success function check again for form valid
if($("form[data-track=MySubmit]").valid()){
// the form is valid, do something
$("form[data-track=MySubmit]").off("submit");
$("form[data-track=MySubmit]").trigger( "submit" );
} else{
// the form is invalid
}
You can try
event.preventDefault();
Like this
$("form[data-track=MySubmit]").on("submit", function(event) {
var formInputData = $(this).serialize();
$.ajax({
url: "/insertdata",
type: "post",
crossDomain: true,
data: formInputData
dataType: 'json',
success: function(responce) {
$("form[data-track=MySubmit]").off("submit");
$("form[data-track=MySubmit]").trigger( "submit" );
}
});
event.preventDefault();
});
You can use jquery validate() method for this. we can pass submitHandler function which handles how the form submit is handled after form is found to be free of client side validations.
submitHandler (default: native form submit)
Type: Function()
Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated.
Example: Submits the form via Ajax when valid.
$("#myform").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
}
});
You can try this :
$("form[data-track=MySubmit]").validate({
submitHandler: function(form) {
var formInputData = $(form).serialize();
//the default form submit behaviour
$(form).submit();
//form submit via ajax on custom url
$.ajax({
url: "/insertdata",
type: "post",
data: formInputData
dataType: 'json',
success: function(response) {
console.log('form is submitted');
}
});
}
});
You can try return false and event.preventDefault both at the same time + You can change the behavior of code when the forms return true.
dataCheck = false;
$("form[data-track=MySubmit]").on("submit", function(event) {
if(dataCheck === false)
{
event.preventDefault();
var formInputData = $(this).serialize();
$.ajax({
url: "/insertdata",
type: "post",
data: formInputData,
dataType: 'json',
success: function(responce) {
dataCheck = true;
$("form[data-track=MySubmit]").off("submit");
$("form[data-track=MySubmit]").trigger( "submit" );
return true;
}
});
return false;
}
});
try this
for validation you can use JQuery Validation Engine Plugin here:https://github.com/posabsolute/jQuery-Validation-Engine
$("form[data-track=MySubmit]").submit(function(event) {
event.preventDefault(); /////////added
var formInputData = $(this).serialize();
$.ajax({
url: "/insertdata",
type: "post",
data: formInputData, //////missing comma
dataType: 'json',
success: function(responce) {
$("form[data-track=MySubmit]").submit();
}
});
});
From what I understand, you want to submit your form with AJAX to url, where the validation happens and if it returns successfully, submit it a 2nd time to its default action.
If this is the case, then your code almost works, but you need to do two things:
Put event.preventDefault(); in your submit handler to prevent at the beginning the default action of the form, because we want us to trigger it only after AJAX returns successfully.
If AJAX returns successfully and you see that your form is not submitted a 2nd time, make sure that your form does not have a submit button named "submit", because that would hide the default submit action and $("form[data-track=MySubmit]").trigger( "submit" ); would not work! Rename your submit button to "submitBtn" or whatever.
BTW, you are missing a comma after data: formInputData
Have a hidden button with "default" submit. Once you are done with your processing ajax using jQuery, invoke the click event on the button.
Picture below shows simplification of the html page layout I am working with. It has 3 forms, every form has it's own submit button and can be submitted individually. At the top of the page "Master Save" is located. This button should save all 3 forms.
Every form have submit() function overloaded and they look like this:
form1.submit(function () {
Form1SubmitOverloaded(this);
return false;
});
Form1SubmitOverloaded = function (form) {
$.post(form.action, $(form).serialize(), function (data) {
//DOM manipulation, etc/
}).fail(function () {
//error parsing etc.
});
return false;
};
After pressing "Master Save" I want to submit forms in order 1 > 2 > 3. But I want Form 2 to wait until form 1 has ended.
Form1 submitted >> Form2 submitted >> Form3 submitted.
$('#masterSave').click(function () {
$('#form1').submit();
$('#form2').submit(); // wait until form1 ended
$('#form3').submit(); // waint until form2 ended
return false;
});
Please provide method to order submits in 'click' function as presented.
Thanks.
.post() method doesn't look to have a synch property. But .ajax() has.
I suggest you use the .ajax() method instead of the .post() shortcut method. That way you could force ajax to be synchronious
$.ajax({
[...]
async : false
}
you can use something like this
Form1SubmitOverloaded();
$.ajax({
type: "POST",
url: test1.php,
data: $( "#form1" ).serialize(),
success: function(){
Form2SubmitOverloaded();
$.ajax({
type: "POST",
url: test2.php,
data: $( "#form2" ).serialize(),
success: function(){
Form3SubmitOverloaded();
$.ajax({
type: "POST",
url: test2.php,
data: $( "#form2" ).serialize(),
success: function(){
alert("All submit successfully");
}
});
}
});
}
});
How to disable form (user cannot checked, fill text , select drop down etc.) in this form when process requests post ajax ?
i want to disable form id="f1" when process send post ajax , How can i do that ?
<script>
function send_requests_data(){
$('#demoajax').hide();
$('#loading').show();
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#f1').serialize(),
success: function(data){
$("#loading").fadeOut("slow");
$('#demoajax').show();
$('#demoajax').html(data);
}
});
return false;
}
// on load page call function code //
$(document).ready(send_requests_data());
</script>
A possible answer may be found here:
disable all form elements inside div
TL;DR
try adding this:
$("#parent-selector :input").attr("disabled", true);
to the ajax call where parent-selector is either the div or form id.
try this i hope it helps :
function send_requests_data(){
$('#id1 input,select').attr('disabled','disbaled');
$('#demoajax').hide();
$('#loading').show();
$.ajax({
url: 'test.php',
type: 'POST',
data: $('#f1').serialize(),
success: function(data){
$("#loading").fadeOut("slow");
$('#demoajax').show();
$('#demoajax').html(data);
$('#id1 input,select').removeAttr('disabled');
}
});
return false;
}
$.each($('input, select ,textarea', '#f1'),function(){
$(this).prop('disabled', true);
});
You can call the below function before calling your ajax function. It will disable all your form controls
function disable() {
var limit = document.forms[0].elements.length;
for (i=0;i<limit;i++) {
document.forms[0].elements[i].disabled = true;
}
}
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 9 years ago.
Once a checkbox is ticked on a form, I am calling a function that performs certain checks and enables a previously disabled button.
My js code has the following:
$('#default_address').change ->
id = $('#default_address').val()
if(this.checked)
$.ajax({
url: '/shipments/' + id + '/get_address',
dataType: "JSON",
success: (data) ->
$('#billing_address_address_line1').val(data[0])
$('#billing_address_address_line2').val(data[1])
$('#billing_address_phone_number').val(data[2])
}).done
checkPlaceOrderValidity()
The checkPlaceOrderValidity() method is as shown below:
#checkPlaceOrderValidity = ->
// some code
else
place_order_btn.attr 'disabled', false
place_order_btn.removeClass 'disabled'
If I add an alert just before calling the checkPlaceOrderValidity() method, it works fine(which I found really strange). I m unable to find the cause even after debugging my code.
Try this,
$.ajax({
url: '/shipments/' + id + '/get_address',
dataType: "JSON",
success: (data) - >
$('#billing_address_address_line1').val(data[0])
$('#billing_address_address_line2').val(data[1])
$('#billing_address_phone_number').val(data[2])
}).done(checkPlaceOrderValidity);