How to change HTML form with 2 selections to Javascript?

243 Views Asked by At

I am working with the following HTML form:

<form method = 'POST' action = '/python/stats/'>
<select name = 'team'>
<option value = 'team1'> team1 </option>
<option value = 'team2'> team2 </option>
<option value = 'team3'> team3 </option>
</select>
<select name = 'player'>
<option value = 'player1'> player1 </option>
<option value = 'player2'> player2 </option>
<option value = 'player3'> player3 </option>
</select>
<input type = 'submit' value = "Update">
</form>

The action /python/stats requires 2 parameters. How can I edit this form (to javascript?) so that the action is called each time either of the selects is changed?

1

There are 1 best solutions below

2
Nick Rolando On BEST ANSWER

the action property in the form tag specifies the location to submit the form to. To do this with an onchange event is, you can do a form submit in the event.

<head>
<script type='text/javascript'>
function doSubmit(){
    document.forms["form1"].submit();
}
</script>
</head>


<form id='form1' method = 'POST' action = '/python/stats/'>
<select name = 'team' onchange='doSubmit();'>
<option value = 'team1'> team1 </option>
<option value = 'team2'> team2 </option>
<option value = 'team3'> team3 </option>
</select>
<select name = 'player' onchange='doSubmit();'>
<option value = 'player1'> player1 </option>
<option value = 'player2'> player2 </option>
<option value = 'player3'> player3 </option>
</select>
<input type = 'submit' value = "Update">
</form>