How to choose an action page from a form and then submit values to that page HTML,PHP,Javascript

Question

I'm trying to create a page with <form>, <option> and <select> attributes in a php page where I can select an action page from a dropdown menu. Like this Linking to other pages in HTML via drop-down menu And then depending on the option selected ask the user to input a text and be able to submit that reason to that action page. Similar to this Add input-box when selecting a specific option into select drop down

Also please post how you would submit the values to the action page in the way you have your code setup as currently I have been following this method. https://stackoverflow.com/a/1977439/9010400

Example of my form submission which doesn't have the action page selection.

If the below form action page is selected then post the values to that page, but I would like it to ask for a text input for the "reason" before posting.

<form action="url/page.php" method="POST"> <input type="hidden" name="user" value="tester" /> <input type="hidden" name="reason" value="test" /> <input type="submit" value="Ok"/>

In a way I'm trying to combine those different questions/answers I have mentioned in this post. I hope I have been clear as to what I trying to ask for help. Any help is much appreciated. Thank you.

Edit: Some more info: I want to able to post values to the form action I select. For example: Change form action on select option But I would also like to add a user input option and then submit that value as well to the action form.

@RamsésFernández An example jsfiddle http://jsfiddle.net/CxhGG/15/ comes pretty close to what I want to do, except after selecting an option from the dropdown menu it toggles between forms that I want to submit like the example code i posted in my question for that action page. I would also like to ask user for input from the user to enter a reason and then submit it with the form to that action page. Does that make it a bit more understandable? — mrmegatheman, Nov 26 '17 at 13:56
I think you need to retype your question, and maybe add whatever code you have now, and state what is the problem with current code. Good luck — A Khudairy, Nov 26 '17 at 13:59
You can follow this link https://stackoverflow.com/questions/2701041/how-to-set-form-action-through-javascript to accomplish your task. — BEingprabhU, Nov 26 '17 at 14:01
@AKhudairy I did try to put as much information as I can, including what I have and what I'm looking to incorporate. Essentially a form with options to select an action page to submit values to that page along with a user input. — mrmegatheman, Nov 26 '17 at 14:31
@prabhu Could you please show me how you would add in the option to ask the user to enter an input text for an action page selected and then submit it to that page? — mrmegatheman, Nov 26 '17 at 14:36
Add a input field next to the select field and make it mandatory, so user should enter what he desires and submit the form. Your moto is to allow user to select an option and depending upon his selection you are submitting the form to the desired function or URL. Am I right?? — BEingprabhU, Nov 26 '17 at 14:41
@prabhu Along those lines. The selection is selecting the form action page for example one page would be "change name" with a "reason". the reason needs to be asked for when that action page is selected and then submit that reason to the "change name" page. — mrmegatheman, Nov 26 '17 at 15:07
How about you make a separate form for each case and just switch (hide/show) them via the select box outside of the forms? — Manuel Otto, Nov 26 '17 at 15:09
@ManuelOtto Could you please show me a sample code to use switch case for the option selected from the dropdown? — mrmegatheman, Nov 26 '17 at 15:18

score 1 · Accepted Answer · answered Nov 26 '17 at 15:19

Try this. It will look for the form which name matches the selected option value and show it. Every other form will be hidden.

function showSelectedForm(){
  var selected_form = document.querySelector('select').value
  var forms = document.querySelectorAll('form')
  for(var i=0;i<forms.length;i++){
    if(forms[i].getAttribute('name')==selected_form)
      forms[i].style.display = 'block'
    else
      forms[i].style.display = 'none'
  }
}

form{
  margin-top: 25px;
  display: none;
}
form label{
  display: block;
}

Action:
<select onchange="showSelectedForm()">
  <option disabled selected>Please choose</option>
  <option value="change_name">Change Name</option>
  <option value="report_user">Report User</option>
  <option value="delete_account">Delete Account</option>
</select>

<form name="change_name" action="/php/change_name.php">
  <label>Name <input type="text" name="name"></label>
  <label>Reason <input type="text" name="reason"></label>
  <input type="submit">
</form>

<form name="report_user" action="/php/report_user.php">
  <label>User <input type="text" name="user"></label>
  <label>Report <textarea name="report"></textarea></label>
  <input type="submit">
</form>

<form name="delete_account" action="/php/delete_account.php">
  <label>Name <input type="text" name="name"></label>
  <label>Are you sure? <input type="checkbox"></label>
  <input type="submit">
</form>

How to choose an action page from a form and then submit values to that page HTML,PHP,Javascript

1 Answers1