neverlucky
neverlucky

Reputation: 35

form using action from dropdownlist

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

Answers (4)

Abhishek Gurjar
Abhishek Gurjar

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

shubham715
shubham715

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

Rushil K. Pachchigar
Rushil K. Pachchigar

Reputation: 1321

var url = $( "select[name=dropdown] option:selected" ).val();

You can get it by using .val() function

Upvotes: 0

AGB
AGB

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

Related Questions