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);

Form submitting refreshes the page by default. https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit — Jkarttunen, Nov 03 '21 at 12:27

score 1 · Accepted Answer · edited Nov 03 '21 at 13:31

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>

Katheer · Answer 2 · 2021-11-03T13:01:41.490

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();">

Alert message doesn't show on submitting form

2 Answers2