I have a HTML page that contains a search box containing a number of textboxes.
The first part of the search box is a SELECT dropdown list that contains a variety of report types. Each report type requires 1 or more of textboxes to be filled in to filter the query results. My goal is hide the textboxes that are not required by the current report type.
How do I pass the currently selected value from the SELECT to the Javascript function via the onchange event?
<select name="report_type" onchange="hide();">
<option value="full_history">Full History</option>
<option value="partial_history">Partial History</option>
</select>
To pass multiple parameters to onChange in React:Pass an arrow function to the onChange prop. The arrow function will get called with the event object. Call your handleChange function and pass it the event and the rest of the parameters.
To handle the onChange event on a select element in React: Set the onChange prop on the select element. Keep the value of the selected option in a state variable. Every time the user changes the selected option, update the state variable.
<select name="report_type" onchange="hide(this.value);">
<option value="full_history">Full History</option>
<option value="partial_history">Partial History</option>
</select>
When doing this the function have whatever value the select currently has.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With