Reputation: 35
I have 5 Forms like this
<p>
Form1:
<form action='Form1.php' method='POST'>
<input name='charname' id='charname' placeholder='Charname'>
<input name='server' id='server' placeholder='Server'>
<input name='region' id='region' placeholder='Region'>
<input type='submit' name='submit'>
</form>
</p>
Now I want to replace the 5 forms with a single form, where the action
is taken from a dropdown-list like this:
<select name="dropdown" size="5">
<option value="form1.php">Form1</option>
<option value="form2.php">Form2</option>
<option value="form3.php">Form3</option>
<option value="form4.php">Form4</option>
<option value="form5.php">Form5</option>
</select>
How can I achieve this?
Thanks in advance
Upvotes: 0
Views: 1241
Reputation: 7476
Try it with javascript,
Html:
<form action='Form1.php' method='POST' id="form_main">
<input name='charname' id='charname' placeholder='Charname'>
<input name='server' id='server' placeholder='Server'>
<input name='region' id='region' placeholder='Region'>
<input type='submit' name='submit'>
</form>
<select name="dropdown" size="5" id="form_test" onchange="if (this.selectedIndex) func();">
<option value="form1.php">Form1</option>
<option value="form2.php">Form2</option>
<option value="form3.php">Form3</option>
<option value="form4.php">Form4</option>
<option value="form5.php">Form5</option>
</select>
Javascript:
function func(){
var elem = document.getElementById("form_test");
var form_val = elem.options[elem.selectedIndex].value;
document.getElementById('form_main').setAttribute("action", form_val);
}
Upvotes: 2
Reputation: 3302
You should use jQuery for this
Example-
HTML
<select name="dropdown" id="formaction" size="5">
<option value="form1.php">Form1</option>
<option value="form2.php">Form2</option>
<option value="form3.php">Form3</option>
<option value="form4.php">Form4</option>
<option value="form5.php">Form5</option>
</select>
jQuery Code
<script>
$("#formaction").on("change", function() {
var getVal = $(this).val();
$("#YourFormId").attr("action", getVal); //replace #YourFormId with your form id
});
</script>
Upvotes: 3
Reputation: 1321
var url = $( "select[name=dropdown] option:selected" ).val();
You can get it by using .val() function
Upvotes: 0
Reputation: 2448
I think you would have to use JavaScript to alter the action attribute of the form once the dropdown was changed and prior to the form being submitted. This is a bit hacky though!
Could you not post the data to a single handler then handle the logic in there of what to do with it depending upon the value of the dropdown? It would be more robust.
Upvotes: 0