如何从表单中选择一个操作页面，然后将值提交到该页面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.

Answer 1

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>

</div>