CODEWITHSUNDEEP
phphtmlforms
user7540734
user7540734

Reputation:

How to change action link as per drop-down list?

<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" />

Above mentioned a form where I want to change my action link as per selection of Arts, Commrence or Science. In other words Now the default php link contains all 3 stream's information in one but I want to create separate database for each and searchable from one form. Is there any way to do this?

Upvotes: 2

Views: 193

Answers (2)

Dev. Joel
Dev. Joel

Reputation: 1147

Making use of pure Javascript, not Jquery, it occurs to me that you can use the data-action attribute to specify the action of the form, and then with elem.options [elem.selectedIndex] we obtain the selected option to subsequently obtain the data-action attribute

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>

Upvotes: 0

Amit Gupta
Amit Gupta

Reputation: 2806

You can add this.form.action of JavaScript with all options like below:

<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>

When you submit the form, there form action will be replace with the one you add in select option.

You can also send to common action like result.php with parameter like below:

<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>

You can also do it with JQuery in the below way:

<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>

Jquery Code:

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

Upvotes: 1

Related Questions