StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><a href="http://jsfiddle.net/mPbvK/" rel="nofollow">[Here is below answer as a jsFiddle]</a></p> <p>This answer is intended as a starter. I tried to write it at a beginner level, so that you can customize it for yourself. Hopefully, this simple example can give you a starting place. I used the example of a training gym asking some basic questions of their users.</p> <p>My approach was to create an empty DIV, called <code>#ques</code>, where all Questions and output will be displayed, and a hidden <code><form></code> containing hidden fields that will store the responses.</p> <p>I created a counter, <code>cnt</code>, which is incremented after each question.</p> <p>There is a function called <code>ask_next_ques()</code> that takes the parameter <code>cnt</code>. Depending on where we are in the survey, it asks the next question (eg. when cnt==3 it asks the third question).</p> <p>Unfortunately, javascript insists that all strings be on one line. Therefore, I built the html like this:</p> <pre><code>var qq = ' <ul style="list-style:none"> <li> What can you curl?<br /> <input type="text" id="curl"> Kg </li> <li> What can you bench?<br /> <input type="text" id="bench"> Kg </li> <li> What can you lift?<br /> <input type="text" id="lift"> Kg <input type="button" id="cbl_btn" value="Go"> </li> </ul> '; </code></pre> <p>and then re-arranged it onto one line, like this:</p> <pre><code>var qq = '<ul style="list-style:none"><li>What can you curl?<br /><input type="text" id="curl"> Kg</li><li>What can you bench?<br /><input type="text" id="bench"> Kg</li><li>What can you lift?<br /><input type="text" id="lift"> Kg<input type="button" id="cbl_btn" value="Go"></li></ul>'; </code></pre> <p>Much more difficult to read that way, but that's how javascript wants things.</p> <p>As each question is answered, the responses are read by javascript/jQuery and then saved into hidden fields inside the <code><form></code> structure. </p> <p>When all questions have been asked, you can just POST the form to another (PHP?) file for processing (storage in a MySQL database?), or email the answers to yourself, or re-display them to the user, or... I chose to display the answers in a lightbox.</p> <p>Here is all the code. Just copy/paste it into a single HTML or PHP file, and run.</p> <p>SURVEY.PHP</p> <pre><code><html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> <style> </style> <script type="text/javascript"> //Declare vars outside document.ready() so they can be accessed globally var ctr = 1; var mf = ''; var pl = ''; $(document).ready(function() { ask_next_ques(ctr); /* ------------------------------------------------------------ */ $("input:radio[name=gender]").click(function() { //Note: var mf must be initialized above (outside document.ready() ) so can be used in below fn ask_next_ques() mf = $('input:radio[name=gender]:checked').val(); $('#hgender').val(mf); ctr++; ask_next_ques(ctr); }); /* ------------------------------------------------------------ */ $(document).on('click', "#cbl_btn", function() { var cc = $("#curl").val(); var bb = $("#bench").val(); var ll = $("#lift").val(); //alert('Value of cc: ' +cc+ ' Value of bb: ' +bb+ ' Value of ll: ' + ll); //Check if any one of these fields left empty if (cc.length<1 || bb.length<1 || ll.length<1) { alert("Please complete all fields"); }else{ $('#hcurl').val(cc); $('#hbench').val(bb); $('#hlift').val(ll); ctr++; ask_next_ques(ctr); } }); /* ------------------------------------------------------------ */ $(document).on('click', "input:radio[name=plan]", function() { //Note: var pl must be initialized above so can be used in below fn ask_next_ques() pl = $('input:radio[name=plan]:checked').val(); $('#hplan').val(pl); ctr++; ask_next_ques(ctr); }); /* ------------------------------------------------------------ */ }); //END $(document).ready() function ask_next_ques(ctr) { if (ctr==1) { var qq = 'Male: <input value="Male" type="radio" name="gender"><br />Female: <input value="Female" type="radio" name="gender">'; $('#ques').html(qq); }else if (ctr==2){ var qq = '<ul style="list-style:none"><li>What can you curl?<br /><input type="text" id="curl"> Kg</li><li>What can you bench?<br /><input type="text" id="bench"> Kg</li><li>What can you lift?<br /><input type="text" id="lift"> Kg<input type="button" id="cbl_btn" value="Go"></li></ul>'; $('#ques').html(qq); }else if (ctr==3){ var qq = 'Are you an:<br />Owner: <input value="Owner" type="radio" name="plan"><br />Member: <input value="Member" type="radio" name="plan">'; $('#ques').html(qq); }else if (ctr==4){ //All questions have been asked; All responses saved into hidden fields //Can now read all hidden fields and do an AJAX POST into the database, or //Or can simply POST the form to another page for processing. alert("All questions have been asked"); var hg = $('#hgender').val(); var hc = $('#hcurl').val(); var hb = $('#hbench').val(); var hl = $('#hlift').val(); var hp = $('#hplan').val(); qq = 'The values saved into all hidden fields are:<br />Gender: ['+hg+ ']<br />Curl: [' +hc+ ']<br />Bench: [' +hb+ ']<br />Lift: [' +hl+ ']<br />Plan: [' +hp+ ']<br />You can now send these values to a<br />database, or email them to yourself.'; $('#ques').html(qq); //We could just leave it here, but to be interesting we'll display the results in a lightbox //To remove all lightbox stuff, just delete the next 8 lines and delete the two lightbox references in the header (for jquery-ui) $('#ques').dialog({ autoOpen:true, width: 450, title: "Hidden Field Valuess:", close: function() { alert('Thank you for taking our survey'); } }); } } </script> </head> <body> <div id="ques"></div> <div id="hidden_form"> <form method="POST"> <input type="hidden" id="hgender" name="gender"> <input type="hidden" id="hcurl" name="curl"> <input type="hidden" id="hbench" name="bench"> <input type="hidden" id="hlift" name="lift"> <input type="hidden" id="hplan" name="owner"> </form> </div> </body> </html> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload