Databases
StackOverflow2013
Postsdbo
POUsing dropdown to add/remove search boxes
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing dropdown to add/remove search boxes
    text
    copied!<p>I've got a drop down that will have 3 categories in it. I would like to to have so that when the user chooses a category, the correct number of search boxes for that category will appear. I then want the text that is inputted into the search boxes to be saved as a variable in the URL. Here is what I got</p> <p><a href="http://jsfiddle.net/2yWzc/1/" rel="nofollow">http://jsfiddle.net/2yWzc/1/</a></p> <p>HTML:</p> <pre><code>&lt;form class="list" action="table.php" method="get"&gt; &lt;table&gt; &lt;tbody&gt; &lt;tr class="name"&gt; &lt;td&gt;First Name:&lt;/td&gt; &lt;td&gt;&lt;input type="text" class="searchBox" name="q1" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="name"&gt; &lt;td&gt;Last Name:&lt;/td&gt; &lt;td&gt;&lt;input type="text" class="searchBox" name="q2" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="owner"&gt; &lt;td&gt;Owner:&lt;/td&gt; &lt;td&gt;&lt;input type="text" class="searchBox" name="q1" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="dlp"&gt; &lt;td&gt;Text 1:&lt;/td&gt; &lt;td&gt;&lt;input type="text" class="searchBox" name="q1" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="dlp"&gt; &lt;td&gt;Text 2:&lt;/td&gt; &lt;td&gt;&lt;input type="text" class="searchBox" name="q2" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="dlp"&gt; &lt;td&gt;Text 3:&lt;/td&gt; &lt;td&gt;&lt;input type="text" class="searchBox" name="q3" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="submit" value="SEARCH" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;br&gt; &lt;select id="options"&gt; &lt;option value="name"&gt;Option 1&lt;/option&gt; &lt;option value="owner"&gt;Option 2&lt;/option&gt; &lt;option value="dlp"&gt;Option 3&lt;/option&gt; &lt;/select&gt; &lt;/form&gt; </code></pre> <p>JS:</p> <pre><code>$('#options').change(function() { if ($(this).val() == 'name') { $('.name').show(); $('.owner').hide(); $('.dlp').hide(); } else if ($(this).val() == 'owner') { $('.name').hide(); $('.owner').show(); $('.dlp').hide(); } else if ($(this).val() == 'dlp') { $('.name').hide(); $('.owner').hide(); $('.dlp').show(); } }); $(function(){ $('form').bind('change', function () { var url = $(this).val(); if (url) { window.location = url; } return false; }); }); </code></pre> <p>This shows the correct number of searchboxes, but it doesn't save the text in the search boxes in the variables. It also seems like it isn't a good way to do it (If you know of the proper way, point me in the right direction. This was the only thing I could do that would work). Before this, I had 1 search box per category, so my JS code was this</p> <pre><code>(function($) { $(function(){ $('form').bind('change', function () { var url = $(this).val(); // get selected value if (url) { // require a URL window.location = url; // redirect } return false; }); }); })(jQuery)​; </code></pre> <p>However, I have no idea how to get it to work for multiple search boxes. I only want variables for the search boxes that are shown to be passed via URL (again, so maybe this isn't the proper way?).</p> <p>Can anyone help me out? Thanks</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