I am using Framework7 to load an Ajax page as follows in myapp.js:
$('#myForm').validate({
rules: {
aiterms: {
required: true
}
},
submitHandler: function(form) {
$$.ajaxSetup({ cache: false });
var myterms;
var mybookingid;
$("#submit").unbind().click(function() {
myterms = $("#myterms").val();
mybookingid = $("#my_booking_id").val();
if ($('#myterms').is(":checked")==false)
{
myApp.alert('You need to accept terms to proceed further!', 'Terms Not Accepted!');
}
else
{
$$.ajax({
type: "POST",
url: "submit1.php",
dataType : 'html',
data: {myterms1: myterms,mybookingid1: mybookingid },
cache: false,
success: function(result){
$("#mycontent" ).empty();
$("#mycontent").html(result);
},//success
error: function(result)
{
myApp.alert('We are unable to process data due to technical reasons!', 'Error');
}
});
}//else
return false;
});
}//submit handler
}); //validate
and a form from my_submit1 page gets updated in #mycontent div:
<div id="mycontent" >
the form in second page submits as
<form id="form2">
....
<input type="submit" name="submit" id="mysubmit1" value="Submit" />
and in myapp.js:
$$(document).on('click','#mysubmit1',function(){
var a = $("#a").val();
var b = $("#b").val();
var c = $("input[name='c']:checked").val(); //radio button
.....
if(a == '')
{
myApp.alert('Please select and enter data a!', 'Insufficient Data');
}
else if(b =='')
{
myApp.alert('Please select and enter data b!', 'Insufficient Data');
}
else if ($('.c').is(":checked")==false)
{
myApp.alert('Please select whether c selected or not!', 'Insufficient Data');
}
...
else
{
$$.ajax({
type: "POST",
url: "submit2.php",
dataType : 'html',
data: {a: a,b: b,c: c},
cache: false,
success: function(result){
$("#mycontent" ).empty();
$("#mycontent").html(result);
},//success
error: function(result)
{
myApp.alert('We are unable to process data due to technical reasons!', 'Error');
}
});
}//else
return false;
});
The second form loaded on submit the alert is displayed momentarily and the page is getting redirected. Moreover variables are passed as GET instead of POST as specified in the Ajax request.
The first form submit is updating the div correctly. Issue happens only with second form (replaced form data in div).
I am unable to detect the reason. Is something wrong with way i pass the second request ??