I've been trying to make a multi-page poll with jQuery Mobile that is supposed to interact with my MySQL database through Ajax/PHP and have been having issues with it for a while now. It seems I have some problems submitting the form as a result of having it split into several pages. One requirements I need is that the page can not have a page reload.
In my first attempts I tried to divide the pages up into the following:
<div id="page1" data-role="page">
This however failed so many times no matter how I tried to code it. I can not get the submit button to work and I think it could be caused by the fact that I have split the form into several div "pages". I've also tried to make next/submit buttons rather than "Next, next, next ... submit" so that I can store the temporary data in the session, unsuccessfully.
I reworked my whole strategy into a code that hides the question divs that are not active. By this I mean I have one div with data-role set to page, and within it I have several divs with data-roles of content that are hidden/shown by clicking through the form with the next button. I managed to make a small sample form this way that submits the whole form and gets printed out perfectly with some PHP code. However I have yet to successfully validate this version. I can only get my script to validate the last page, and even then it requires ALL checkboxes to be checked, which is pointless. When I tried to implement this version into my real project I could not get it to submit to the .php script at all, but that might just be some syntax error that I will keep looking for.
So, have anyone done anything similar? I'm looking for potential other strategies to solve this issue, or perhaps someone has a theory as to why my aforementioned attemps have failed. Seems Ajax form submits are hard to get working within jQuery Mobile?
Also in case someone can spot a flaw in this I've attached this code that I use for submission, is there an easy way to make this into a function? Or is that pointless?
$(document).ready(function()
{
$("#submit").click(function()
{
var data_string = $('#form').serialize();
$.ajax(
{
type:'POST',
url:'add.php',
data:data_string,
success:function(response)
{
$("#answers").html(response);
}
});
})
});
I also use this function during window.onload to generate the poll with a lengthy .php script. Basically it generates the questions as , every other question variety has only name="answers[question_id]".
function getQuestions(id)
{
var xmlhttp = getHttpRequestObj();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(id).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","poll2.php",true);
xmlhttp.send();
}
The form looks like this:
<form id="form">
<div data-role="content" id="form'.$page.'" class="section">
<fieldset data-role="controlgroup" data-type="vertical" data-mini="true" id="'.$question_id.'">
<input type="checkbox" name="answers['.$question_id.']['.$alt_id.']" id="'.$question_id.'_'.$alt_id.'" value="'.$alt_id.'"/>
<label for="'.$question_id.'_'.$alt_id.'">'.$alt_desc.'</label>
</fieldset>
<input type="button" name="next" value="Next" id="next" onClick="toggleVisibility(\'form'.($page+1).'\')" class="next-btn"/>
</div>
The last page has this code instead of the next button:
</div><input type="button" id="submit" value="Submit" class="submit-btn"/></form>
In my opinion, hiding the other options and open one by one is a better way (also called multi step form).
For validation, you can do it in client side with javascript or use ajax which triggers on appropriate event (you don't need to submit it for validation) and validates in server side.
You are in right track. The issue i see here is how you'l do the validation but that'l depend upon how your form is structured.