StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here is a simple demo of AJAX:</p> <p><strong>HTML</strong></p> <pre><code><form method="POST" action="process.php" id="my_form"> <input type="text" name="firstname[]"> <input type="text" name="firstname[]"> <input type="text" name="firstname[]"> <input type="text" name="firstname[custom1]"> <input type="text" name="firstname[custom2]"> <br><br> <input type="submit" value="Submit"> </form> </code></pre> <p><strong>jQuery</strong></p> <pre><code>// listen for user to SUBMIT the form $(document).on('submit', '#my_form', function(e){ // do not allow native browser submit process to proceed e.preventDefault(); // AJAX yay! $.ajax({ url: $(this).attr('action') // <- find process.php from action attribute ,async: true // <- don't hold things up ,cache: false // <- don't let cache issues haunt you ,type: $(this).attr('method') // <- find POST from method attribute ,data: $(this).serialize() // <- create the object to be POSTed to process.php ,dataType: 'json' // <- we expect JSON from the PHP file ,success: function(data){ // Server responded with a 200 code // data is a JSON object so treat it as such // un-comment below for debuggin goodness // console.log(data); if(data.success == 'yes'){ alert('yay!'); } else{ alert('insert failed!'); } } ,error: function(){ // There was an error such as the server returning a 404 or 500 // or maybe the URL is not reachable } ,complete: function(){ // Always perform this action after success() and error() // have been called } }); }); </code></pre> <p><strong>PHP process.php</strong></p> <pre><code><?php /**************************************************/ /* Uncommenting in here will break the AJAX call */ /* Don't use AJAX and just submit the form normally to see this in action */ // see all your POST data // echo '<pre>'.print_r($_POST, true).'</pre>'; // see the first names only // echo $_POST['firstname'][0]; // echo $_POST['firstname'][1]; // echo $_POST['firstname'][2]; // echo $_POST['firstname']['custom1']; // echo $_POST['firstname']['custom2']; /**************************************************/ // some logic for sql insert, you can do this part if($sql_logic == 'success'){ // give JSON back to AJAX call echo json_encode(array('success'=>'yes')); } else{ // give JSON back to AJAX call echo json_encode(array('success'=>'no')); } ?> </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