Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've put this together this jsFiddle <a href="http://jsfiddle.net/VJwpv/1/" rel="nofollow">http://jsfiddle.net/VJwpv/1/</a>.</p> <p>If you are looking at doing validation with JavaScript then I'd recommend you look into this <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="nofollow">jQuery Validation plugin</a></p> <p><strong>HTML</strong></p> <pre><code>&lt;div id="searchForm"&gt; &lt;input id="textBox" class="searchField" type="text" /&gt; &lt;select id="dropDown" class="searchField"&gt; &lt;option value="Option1"&gt;Option1&lt;/option&gt; &lt;option value="Option2"&gt;Option2&lt;/option&gt; &lt;/select&gt; &lt;input id="checkbox1Value" type="checkbox" name="checkbox" value="Checkbox1" /&gt;Checkbox1 &lt;input id="checkbox2Value" type="checkbox" name="checkbox" value="Checkbox2" /&gt;Checkbox2 &lt;input type="radio" name="radio" value="Radio1" /&gt; Radio1 &lt;input type="radio" name="radio" value="Radio2" /&gt; Radio2 &lt;/div&gt; &lt;div id="results"&gt;&lt;/div&gt; </code></pre> <p><strong>JavaScript</strong></p> <pre><code>function validateForm() { // if valid return true; // else return false } function performSearch() { var textBoxValue = $("#textBox").val(); var dropDownValue = $("#dropDown").val(); var checkbox1Value = $("#checkbox1Value").is(":checked"); var checkbox2Value = $("#checkbox2Value").is(":checked"); var radioValue = $("input:radio[name=radio]:checked").val(); // What you'd actually do here is an AJAX call to get the search results // and pass all the values defined above in the request $("#results").html("Textbox: " + textBoxValue + ". Dropdown: " + dropDownValue + ". Checkbox1: " + checkbox1Value + ". Checkbox2: " + checkbox2Value + ". Radio: " + radioValue); } function onChange() { if (validateForm()) { performSearch(); } } $(document).ready(function() { $("#searchForm input, #searchForm select").change(function() { onChange(); }); });​ </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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