Use the provided form to do the following. Create and display the form in React.
ID: 3711394 • Letter: U
Question
Use the provided form to do the following.
Create and display the form in React.
Use React to dynamically alter the available options in the drop down. For example: Once a user has selected option 1. Best Time automatically remove it from the rest of the drop downs. Do this as each option is chosen.
The Reset button should refresh the drop downs to their original values.
Demonstrate your application and explain your code to the class.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <p>WDV341 Intro PHP</p> <p>Survey Form</p> <form name="form1" method="post" action=""> <fieldset> <p> <label>Email: <input type="text" name="cust_email" id="cust_email"> </label> </p> <p>Please rate the following times from best (1) to worst (4)</p> <p> <select id="option1"> <option value="1">1. Best time</option> <option value="2">2. Next Best time</option> <option value="3">3. Not as good</option> <option value="4">4. Worst time</option> </select> Monday/Wednesday 10:10am-Noon </p> <p> <select id="option2"> <option value="1">1. Best time</option> <option value="2">2. Next Best time</option> <option value="3">3. Not as good</option> <option value="4">4. Worst time</option> </select> Tuesday 6:00pm-9:00pm </p> <p> <select id="option3"> <option value="1">1. Best time</option> <option value="2">2. Next Best time</option> <option value="3">3. Not as good</option> <option value="4">4. Worst time</option> </select> Wednesday 6:00pm-9:00pm </p> <p> <select id="option4"> <option value="1">1. Best time</option> <option value="2">2. Next Best time</option> <option value="3">3. Not as good</option> <option value="4">4. Worst time</option> </select> Tuesday/Thursday 10:10am-Noon </p> <p> <input type="submit" name="button" id="button" value="Submit"> <input type="reset" name="button2" id="button2" value="Reset"> </p> </fieldset> </form> <p> </p> </body> </html> )Explanation / Answer
HTML Code : Changes Required
1. Add two .js file between the <head> tag
second .js file you have to create inorder to sync the option from different dropdown menu and to perform hide function. I have named my .js file as bst.js.
2. Change id to class and make the name of each class same, I have named it opt. This was done because we dont have to create different function in JQuery for different id.
Here is the modified html code below :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="bst.js"></script>
</head>
<body>
<p>WDV341 Intro PHP</p>
<p>Survey Form</p>
<form name="form1" method="post" action="">
<fieldset>
<p>
<label>Email:
<input type="text" name="cust_email" id="cust_email">
</label>
</p>
<p>Please rate the following times from best (1) to worst (4)</p>
<p>
<select class="opt">
<option value="1">1. Best time</option>
<option value="2">2. Next Best time</option>
<option value="3">3. Not as good</option>
<option value="4">4. Worst time</option>
</select>
Monday/Wednesday 10:10am-Noon
</p>
<p>
<select class="opt">
<option value="1">1. Best time</option>
<option value="2">2. Next Best time</option>
<option value="3">3. Not as good</option>
<option value="4">4. Worst time</option>
</select>
Tuesday 6:00pm-9:00pm
</p>
<p>
<select class="opt">
<option value="1">1. Best time</option>
<option value="2">2. Next Best time</option>
<option value="3">3. Not as good</option>
<option value="4">4. Worst time</option>
</select>
Wednesday 6:00pm-9:00pm
</p>
<p>
<select class="opt">
<option value="1">1. Best time</option>
<option value="2">2. Next Best time</option>
<option value="3">3. Not as good</option>
<option value="4">4. Worst time</option>
</select>
Tuesday/Thursday 10:10am-Noon
</p>
<p>
<input type="submit" name="button" id="button" value="Submit">
<input type="reset" name="button2" id="button2" value="Reset">
</p>
</fieldset>
</form>
<p> </p>
</body>
</html>
)
---------------------------------------------------------------------------------------------------------
bst.js JQuery file below :
$(".opt").change(function(){
var $selects = $('.opt');
$selects.on("keyup click change", function(e) {
$selects.not(this).trigger('updateselection');
}).on("updateselection", function(e, data) {
var $this = $(this);
$this.children().show();
$selects.not(this).each(function() {
var value = $(this).val();
if (value) {
$this.children('[value="' + value + '"]').hide();
}
});
});
})
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.