Alert message doesn't show on submitting form
Question
I'm just starting out learning HTML/JavaScript. I've got a form that when submitted it should show the input data back to the user, I've tried both an alert and the.html() method and neither seem to display the information back.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="scripts/jquery-3.2.1.js"></script>
<script>
function displayInfo() {
let product = ($('#productName').val());
let quantity = parseInt($('#qty').val());
if ($('#delivery:checked').val() == 'y'){
let delivery = "Delivery required";
}
else{
let delivery = "Delivery not required";
}
var info = "Product name: " + product + "<br>" + "Quantity: " + quantity + "<br>" + "Delivery?:" + delivery;
$("#info").html(info);
}
</script>
</head>
<body>
<h1>Example page</h1>
<form onsubmit="displayInfo(); return false;">
<p>Enter the name of the product you want to buy: <input type="text" id="productName"/></p>
<p>Enter the quantity you want to buy: <input type="text" id="qty" /></p>
<p>Do you require delivery? <input type="checkbox" id="delivery" value="y" /></p>
<p><input type="submit" value="Place order" /></p>
</form>
<div id ="info"></div>
</body>
</html>
and also
alert("Product name: " + product + "<br>" + "Quantity: " + quantity + "<br>" + "Delivery?:" + delivery);
2 answers
solution1
1 ACCPTED 2021-11-03 12:34:15
You may have set the path to the jQuery library incorrectly. Also, you need to declare delivery on the same level as you are using it.
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function displayInfo() { const product = ($('#productName').val()); const quantity = parseInt($('#qty').val()); let delivery = "Delivery not required"; if ($('#delivery')[0].checked){ delivery = "Delivery required"; } const info = "Product name: " + product + "<br>" + "Quantity: " + quantity + "<br>" + "Delivery?: " + delivery; $("#info").html(info); } </script> </head> <body> <h1>Example page</h1> <form onsubmit="displayInfo(); return false;"> <p>Enter the name of the product you want to buy: <input type="text" id="productName"/></p> <p>Enter the quantity you want to buy: <input type="text" id="qty" /></p> <p>Do you require delivery? <input type="checkbox" id="delivery" value="y" /></p> <p><input type="submit" value="Place order" /></p> </form> <div id ="info"></div> </body> </html>
solution2
0 2021-11-03 12:37:21
I hope following Answer will help you
I have simplified your code
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> function displayInfo() { event.preventDefault(); let product = ($('#productName').val()); let quantity = parseInt($('#qty').val()); let delivery = $('input#delivery:checked') ? "Delivery required" : " Delivery not required"; var info = "Product name: " + product + "<br>" + "Quantity: " + quantity + "<br>" + "Delivery?:" + delivery; $("#info").html(info); alert("Product name: " + product + ", Quantity: " + quantity + ", Delivery?:" + delivery); } </script> </head> <body> <h1>Example page</h1> <form onsubmit="displayInfo();"> <p>Enter the name of the product you want to buy: <input type="text" id="productName"/></p> <p>Enter the quantity you want to buy: <input type="text" id="qty" /></p> <p>Do you require delivery? <input type="checkbox" id="delivery" /></p> <p><input type="submit" value="Place order" /></p> </form> <div id ="info"></div> </body> </html>
I have did following changes in your code
1st Change: I called jQuery CDN library (If you download jQuery library into your loacl, you can ignore this change)
<script src="scripts/jquery-3.2.1.js"></script>
Changed to
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2nd Change: changed the delivery variable scope, now it's in block scope so you can't access delivery variable outside the condition
Now I have change this condition into Conditional ternary operator and I get the variable from that.
More details about Javascript Scope Click Here
More details about Conditional (ternary) operator Click Here
if ($('#delivery:checked').val() == 'y'){
let delivery = "Delivery required";
}
else{
let delivery = "Delivery not required";
}
Changed to
let delivery = $('input#delivery:checked') ? "Delivery required" : " Delivery not required";
You also can use like this
let delivery = "Delivery not required";
if ($('#delivery')[0].checked){
delivery = "Delivery required";
}
3rd Change: You can't use html tag inside of alert popup, so I remove all <br> tags
alert("Product name: " + product + "<br>" + "Quantity: " + quantity + "<br>" + "Delivery?:" + delivery);
Changed to
alert("Product name: " + product + ", Quantity: " + quantity + ", Delivery?:" + delivery);
4th Change: To avoid page refresh in form submit I used event.preventDefault();
event.preventDefault();
Learn More About Event.preventDefault() Click Here
5th Change: I did following Html change
<form onsubmit="displayInfo(); return false;">
Changed to
<form onsubmit="displayInfo();">
solution3
0 2021-11-03 12:42:32
I have found many problem in you code and i improved it.
learn about javascript variable and it's scope, you used let to create variable which is block scope so you can't access it. you can use var to declare or preferable declare it outside and then only use it to assign inside if condition.
your jquery is not accessible, first check do you have jquery file inside scripts folder where you html is located.
here is the improved code SandBox , you should check this out.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.