StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Getting cross browser <code>onchange</code> events and AJAX requests working isn't trivial. I'm recommend you use a javascript framework of some kind, which abstracts away all of the cross browser issues so you don't have to worry about them.</p> <p><strong>Try a js framework</strong></p> <p><a href="http://www.jquery.com">Jquery</a> is just one such framework which has methods such as <a href="http://api.jquery.com/change/"><code>.change()</code></a> which attaches a handler to the change event for elements like <code><select></code> and <a href="http://api.jquery.com/jQuery.get/"><code>.get()</code></a> which performs a GET request.</p> <p>Here's a little bit of code to get you started:-</p> <pre><code>// The $ is the shorthand for a jquery function, you can then use jquery // selectors which are essentially the same as css selectors, so here // we select your select field and then bind a function to // it's change event handler $('select.changeStatus').change(function(){ // You can access the value of your select field using the .val() method alert('Select field value has changed to' + $('select.changeStatus').val()); // You can perform an ajax request using the .ajax() method $.ajax({ type: 'GET', url: 'changeStatus.php', // This is the url that will be requested // This is an object of values that will be passed as GET variables and // available inside changeStatus.php as $_GET['selectFieldValue'] etc... data: {selectFieldValue: $('select.changeStatus').val()}, // This is what to do once a successful request has been completed - if // you want to do nothing then simply don't include it. But I suggest you // add something so that your use knows the db has been updated success: function(html){ Do something with the response }, dataType: 'html' }); }); </code></pre> <p><strong>Some references that will be better than my explanations</strong></p> <p>Please note for this code to work you will need to include the jquery library on you page with a <code><script></code> tag.</p> <p>See <a href="http://docs.jquery.com/Tutorials%3aGetting_Started_with_jQuery">here for a quick start guide on using jquery</a></p> <p><a href="http://kyleschaeffer.com/best-practices/the-perfect-jquery-ajax-request/">And here for a beginners tutorial on how to use jquery's <code>ajax()</code> method</a></p>

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