I\'m having problems trying to validate form data from my html file using javasc
ID: 3842816 • Letter: I
Question
I'm having problems trying to validate form data from my html file using javascript.
For the javascript functions:
I want to validate that when a checkbox has been checked then a value needs to be entered in the number box corresponding to the checkbox. For example, if the user selects "Cereal" with the checkbox option, I want the javascript program to display an alert as "Please enter a quantity for the selected item" only if they have selected the item but they have not entered a quantity. If the user does not select an item to begin with then the javascript function should not apply.
Also, an alert should pop up if the user tries to enter a quantity value more than 5. Ex. "You cannot enter a value greater than 5."
I also want to validate if the user selects a payment option via radio buttons. For example, if the user does not select a payment option then an alert will pop up prompting the user to select a payment option.
Here is what I have so far on my HTML file:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grocery Item Selection</title>
</head>
<body>
<script type="text/javascript" src="grocery.js">
</script>
<h1>Grocery Item Selection</h1>
<form method="post" action="grocery.php">
<div>
<h2> Grains </h2>
<br />
<div>
<table>
<tr>
<th>Select item</th>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td> <input type = "checkbox" name = "item_name[]" value="Cereal" /> </td>
<td> Cereal </td>
<td> $3.00 </td>
<td>
<input type="number" name="item_quantity[]" min="1" max="5"></td>
</tr>
<tr>
<td> <input type = "checkbox" name = "item_name[]" value="Rice" /> </td>
<td> Rice </td>
<td> $4.00 </td>
<td>
<input type="number" name="item_quantity[]" min="1" max="5"></td>
</tr>
<tr>
<td> <input type = "checkbox" name = "item_name[]" value="Pasta"/> </td>
<td> Pasta </td>
<td> $5.00 </td>
<td>
<input type="number" name="item_quantity[]" min="1" max="5" ></td>
</tr>
</table>
</div>
<br> </br> <br> </br>
<h2> Payment Method </h2>
<div class="selection"> Select payment method: <br> </br>
<input type="radio" name="payment" value="Visa" id="visa" >Visa<br>
<input type="radio" name="payment" value="Master Card" id="mastercard" >Master Card<br>
<input type="radio" name="payment" value="Discover" id="discover" >Discover<br>
</div>
<br></br>
<input type = "submit" value="submit" />
<input type = "reset" value="Reset" />
</div>
</form>
</body>
</html>
Explanation / Answer
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grocery Item Selection</title>
</head>
<body>
<script>
function myFunction(ele) {
if((document.getElementById('check').checked == true)) {
alert("Please enter a quantity for the selected item");
}
}
function validate1() {
if( (document.getElementById('visa').checked == false) && (document.getElementById('mastercard').checked == false) && (document.getElementById('discover').checked == false) ) {
alert("Please select payment option");
}
}
function text_validate() {
var x = document.getElementById('text').value;
if(x > 5)
alert("You cannot enter a value greater than 5.");
}
</script>
<h1>Grocery Item Selection</h1>
<form method="post" action="grocery.php">
<div>
<h2> Grains </h2>
<br />
<div>
<table>
<tr>
<th>Select item</th>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td> <input type = "checkbox" id = "check" name = "item_name[]" value="Cereal" /> </td>
<td> Cereal </td>
<td> $3.00 </td>
<td>
<input type="number" id = "text" name="item_quantity[]" min="1" max="5"></td>
</tr>
<tr>
<td> <input type = "checkbox" id = "check" name = "item_name[]" value="Rice"/> </td>
<td> Rice </td>
<td> $4.00 </td>
<td>
<input type="number" id = "text" name="item_quantity[]" min="1" max="5"></td>
</tr>
<tr>
<td> <input type = "checkbox" id = "check" name = "item_name[]" value="Pasta"/> </td>
<td> Pasta </td>
<td> $5.00 </td>
<td>
<input type="number" id = "text" name="item_quantity[]" min="1" max="5" ></td>
</tr>
</table>
</div>
<br> </br> <br> </br>
<h2> Payment Method </h2>
<div class="selection"> Select payment method: <br> </br>
<input type="radio" name="payment" value="Visa" id="visa" >Visa<br>
<input type="radio" name="payment" value="Master Card" id="mastercard" >Master Card<br>
<input type="radio" name="payment" value="Discover" id="discover" >Discover<br>
</div>
<br></br>
<input type = "submit" value="submit" />
<input type = "reset" value="Reset" />
</div>
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.