Databases
StackOverflow2013
Postsdbo
POChange form action based on multiple <select> options using jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChange form action based on multiple <select> options using jQuery
    text
    copied!<p>What I'm trying to do is to change the form action based on selected options from multiple selections. In this case, two selections but same idea. I'm trying to direct the user to a specific url on submit. So far, it does direct the user but it only returns a "female" with whatever "age" options are selected. The age part is correct but it won't differentiate between "male" or "female" options. So I get a url in return like: http: //domain.com/somepage.php#female_(age selection)</p> <p>I'm a noob with javascript but Ive been trying for hours to make this work and still trying. I did get some help from: <a href="https://stackoverflow.com/questions/1925614/jquery-change-form-action-based-on-selection?answertab=votes#tab-top">javascript - change form action based on selection?</a> but still unsolved. Any help is much appreciated!</p> <p>markup:</p> <pre><code>&lt;form action=""&gt; &lt;fieldset&gt; &lt;select id="gender"&gt; &lt;option value="male"&gt;male&lt;/option&gt; &lt;option value="female"&gt;female&lt;/option&gt; &lt;/select&gt; &lt;select id="age"&gt; &lt;option value="teen"&gt;teen&lt;/option&gt; &lt;option value="adult"&gt;adult&lt;/option&gt; &lt;/select&gt; &lt;/fieldset&gt; &lt;input type="submit" value="Submit"&gt; &lt;/form&gt; </code></pre> <p>jQuery:</p> <pre><code>$("#gender").change(function() { var action = $(this).val() == "male"; $("#age").change(function() { if ($(this).val() == "teen"){ $("form").attr("action", "somepage.php#male_teen")}; if ($(this).val() == "adult"){ $("form").attr("action", "somepage.php#male-adult")}; }); var action = $(this).val() == "female"; $("#age").change(function() { if ($(this).val() == "teen"){ $("form").attr("action", "somepage.php#female-teen")}; if ($(this).val() == "adult"){ $("form").attr("action", "somepage.php#female-adult")}; }); }); </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