Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I highly recommend you to use jQuery. Lets assume this is your HTML.</p> <pre><code> &lt;select class="item_1"&gt; &lt;option value="0"&gt;Choose&lt;/option&gt; &lt;option value="1"&gt;Option 1&lt;/option&gt; &lt;option value="2"&gt;Option 2&lt;/option&gt; &lt;option value="3"&gt;Option 3&lt;/option&gt; &lt;/select&gt; &lt;select class="item_2"&gt; &lt;option value="0"&gt;Choose&lt;/option&gt; &lt;option value="1"&gt;Option 1&lt;/option&gt; &lt;option value="2"&gt;Option 2&lt;/option&gt; &lt;option value="3"&gt;Option 3&lt;/option&gt; &lt;/select&gt; </code></pre> <p><strong>A:</strong></p> <pre><code>$(document).ready(function() { // Handler for first select box $('.item_1').change(function() { alert('Handler for item_1 called.'); }); // Handler for second select box $('.item_2').change(function() { alert('Handler for item_2 called.'); }); }); </code></pre> <p><strong>B</strong> Yes you should use PHP or any other server side language. But I have a little suggestion / question?</p> <blockquote> <p>Depending on the returned values, we will get image_path value from database so instead of printing 2.jpg, it may print my_cute_dog.jpg.</p> </blockquote> <p>You didn't need to call another php file to get image path, just write all in PHP and return JSON encoded data to javascript. For this case I recommend you to add extra button, however this is optional. Lets write some code add this inside document.ready()</p> <pre><code>$('#get_data').bind('click', function() { // get current values from select boxes. var item_1 = $(".item_1").val(); var item_2 = $(".item_2").val(); //Sending AJAX POST Request. $.post("example.php", { name: "value", name_2: "value_2" }, function(data) { alert(data); // print data | you can use this data. }); }); </code></pre>
 

Querying!

 
Guidance

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