Comment modifier le lien d'action en fonction de la liste déroulante ?

Question

<form action="result.php" method="POST">
<select name="strm">
  <option disabled="disabled" selected="selected" value="">Select Your Stream</option>
  <option value="ARTS">Arts</option>
  <option value="COMMERCE">Commerce</option>
  <option value="SCIENCE">Science</option>
</select>

<input maxlength="4" minlength="4" name="rollcode" oninput="setCustomValidity('')" oninvalid="this.setCustomValidity('Enter your Center Code')" placeholder="Center Code" required="" type="text" />

<input maxlength="5" minlength="5" name="rollno" oninput="setCustomValidity('')" oninvalid="this.setCustomValidity('Enter your Roll No')" placeholder="Roll No" required="" type="text" />

<input type="submit" value="Get Result" />

Nous avons mentionné ci-dessus un formulaire dans lequel je veux changer mon lien d'action en fonction de la sélection des Arts, du Commerce ou des Sciences. En d'autres termes, le lien php par défaut contient les informations des 3 filières en une seule, mais je veux créer une base de données distincte pour chacune d'entre elles, consultable à partir d'un seul formulaire. Existe-t-il un moyen de faire cela ?

Answer 1

Vous pouvez ajouter this.form.action de JavaScript avec toutes les options comme ci-dessous :

<form action="result.php" method="POST">
<select name="strm">
  <option selected="selected" value="">Select Your Stream</option>
  <option onclick="javaScript: this.form.action='arts.php';" value="ARTS">Arts</option>
  <option onclick="javaScript: this.form.action='commerce.php';" value="COMMERCE">Commerce</option>
  <option onclick="javaScript: this.form.action='science.php';" value="SCIENCE">Science</option>
</select>

Lorsque vous soumettez le formulaire, l'action du formulaire sera remplacée par celle que vous avez ajoutée dans l'option de sélection.

Vous pouvez également envoyer à une action commune comme result.php avec un paramètre comme ci-dessous :

<form action="result.php" method="POST">
<select name="strm">
  <option selected="selected" value="">Select Your Stream</option>
  <option onclick="javaScript: this.form.action='result.php?title=arts';" value="ARTS">Arts</option>
  <option onclick="javaScript: this.form.action='result.php?title=commerce';" value="COMMERCE">Commerce</option>
  <option onclick="javaScript: this.form.action='result.php?title=science';" value="SCIENCE">Science</option>
</select>

Vous pouvez également le faire avec JQuery de la manière suivante :

<form action="result.php" method="POST" name="streamForm" id="streamForm">
<select name="strm" id="strm">
  <option selected="selected" value="">Select Your Stream</option>
  <option value="ARTS">Arts</option>
  <option value="COMMERCE">Commerce</option>
  <option value="SCIENCE">Science</option>
</select>

Code Jquery :

<script type="text/JavaScript">
$("#strm").change(function() {
  var action = $(this).val() == "ARTS";
  $("#streamForm").attr("action", "arts.php");
});
</script>

Answer 2

Utilisation de Javascript pur, pas de Jquery, il me semble que vous pouvez utiliser l'attribut data-action pour spécifier l'action du formulaire, puis avec elem.options [elem.selectedIndex] nous obtenons l'option choisie pour obtenir ensuite le data-action attribut

var select = document.getElementById('actions');
select.onchange=setNewAction;

function setNewAction(event) {
    var elem = event.target;
    if(!elem.value) alert('Please Select One');
    else {
      elem.form.action = elem.options[elem.selectedIndex].getAttribute('data-action');
      console.log(elem.form.action);
    }
}

<form action="result.php" method="POST">
<select name="strm" id="actions">
  <option disabled="disabled" selected="selected" value="">Select Your Stream</option>
  <option value="ARTS" data-action="arts.php">Arts</option>
  <option value="COMMERCE" data-action="commerce.php">Commerce</option>
  <option value="SCIENCE" data-action="science.php">Science</option>
</select>
</form>