I have to create two webforms on the same page with radio buttons with true or false, the form should submit when the radio button is selected. on success the relative div are displayed, but I'm unable to submit both the forms successfully.
I also added analytics on complete but they seem to work for one form on page refresh
// form 1
jQuery('input[id=q1_true]').on('change', function () {
var form = jQuery("#webform-submission-q1-add-form");
var url = form.attr('action');
jQuery.ajax({
type: "POST",
url: url,
data: form.serialize(),
beforeSend: function () {
},
success: function (data) {
jQuery(this).closest("#webform-submission-q1-add-form").submit();
},
complete: function (data) {
jQuery(".q1-true").hide();
jQuery(".q1-false").show();
jQuery('.q1-false').attr('id', 'form-submitted');
}
});
});
jQuery('input[id=q1_false]').on('change', function () {
var form = jQuery("#webform-submission-q1-add-form");
var url = form.attr('action');
jQuery.ajax({
type: "POST",
url: url,
data: form.serialize(),
beforeSend: function () {
},
success: function (data) {
jQuery(this).closest("#webform-submission-q1-add-form").submit();
},
complete: function (data) {
jQuery('.q1-true').attr('id', 'form-submitted');
}
});
});
//form 2
jQuery('input[id=q2_true]').on('change', function () {
var form = jQuery("#webform-submission-q2-add-form");
var url = form.attr('action');
jQuery.ajax({
type: "POST",
url: url,
data: form.serialize(),
beforeSend: function () {
},
success: function (data) {
jQuery(this).closest("#webform-submission-q2-add-form").submit();
},
complete: function (data) {
jQuery(".q2-true").show();
jQuery(".q2-false").hide();
jQuery('.q2-true').attr('id', 'form-submit2');
}
});
});
jQuery('input[id=q2_false]').on('change', function () {
var form = jQuery("#webform-submission-q2-add-form");
var url = form.attr('action');
jQuery.ajax({
type: "POST",
url: url,
data: form.serialize(),
beforeSend: function () {
},
success: function (data) {
jQuery(this).closest("#webform-submission-q2-add-form").submit();
},
complete: function (data) {
jQuery(".q2-true").hide();
jQuery(".q2-false").show();
jQuery('.q2-false').attr('id', 'form-submit2');
}
});
});