Don't send form data when to type no in confirm window

Admin 1
Viewed 268

Type apple in the input whose name is goods,and type 9 in the input whose name is price,and click submit,now confirm window pop up,whatever your click yes or no,the data will send to price.php.
My expectation:
when you click yes ,the data will send to price.php, when you click no ,the data will not send to price.php,what's wrong for my js?

ob = document.getElementById("submit");
function check(){
    if(document.getElementById("price").value < 10){
        var flag = window.confirm(" are your sure the price is less than 10 ?");
        if(flag){
            return true;
        }else{
            exit;
         }
    }
}
ob.addEventListener("click",check,false); 
 
<form action="price.php" method="post">
<table>
    <tr>
        <td>goods</td>
        <td><input type="text" name="goods"></td>
    </tr>
    <tr>
        <td>price</td>
        <td><input type="text" id="price" name="price"></td>
    </tr>
    <tr><td colspan=2><input type="submit" id="submit"  value="submit"></td></tr>
</table>
</form>

The price.php is simple.

<?php
var_dump($_POST);
?>

The exit below can't prevent form data from sending to price.php.

        if(flag){
            return true;
        }else{
            exit;
         }

It is no use either to change exit; into return false;. It is no use either to change js into below.

ob = document.getElementById("submit");
function check(){
    if(document.getElementById("price").value < 10){
        var flag = window.confirm(" are your sure the price is less than 10 ?");
        if(flag){
            return true;
        }else{
            exit;
         }
    }
}
ob.addEventListener("submit",check,false);
confirm javascript
3 Answers

The traditional way is same as The KNVB did,the key point is <form action="price.php" method="post" onsubmit="return check()"> ,to bind form's attribute onsubmit with function check.

DOM0 level event way,almost the same like the traditional way.

<html>
    <body>
        <form action="price.php" method="post" id="form">
            <table>
                <tr>
                    <td>goods</td>
                    <td><input type="text" name="goods"></td>
                </tr>
                <tr>
                    <td>price</td>
                    <td><input type="text" id="price" name="price"></td>
                </tr>
                <tr><td colspan=2><input type="submit" id="submit"  value="submit"></td></tr>
            </table>
        </form> 
        <script>
            var ob = document.getElementById('submit');            
            ob.onclick =function(){
                if(document.getElementById("price").value < 10){
                    var flag = window.confirm(" are your sure the price is less than 10 ?");
                    if(flag){
                        return true;
                    }else{
                        return false;
                     }
            }
        }
        </script>
    </body>
</html>

What OP expect is the DOM2 level event way.

<html>
    <body>
        <form action="price.php" method="post" id="form">
            <table>
                <tr>
                    <td>goods</td>
                    <td><input type="text" name="goods"></td>
                </tr>
                <tr>
                    <td>price</td>
                    <td><input type="text" id="price" name="price"></td>
                </tr>
                <tr><td colspan=2><input type="submit" id="submit"  value="submit"></td></tr>
            </table>
        </form> 
        <script>
            var ob = document.getElementById('submit');  
            function check(event){
                console.log(ob.type);
                if(document.getElementById("price").value < 10){
                    var flag = window.confirm(" are your sure the price is less than 10 ?");
                    if(flag){
                        ob.submit();
                        return true;
                    }else{
                        event.preventDefault();
                        return false;
                     }
                }
           } 
           ob.addEventListener("click",check);
        </script>
    </body>
</html>

The key points in DOM2 level event way are:

1.when flag is true

if(flag){
    ob.submit();
    return true;
 }

2.when flag is false

else{
    event.preventDefault();
    return false;
}
user_19820320

This is my solution:

<html>
    <body>
        <form action="price.php" method="post" onsubmit="return check()">
            <table>
                <tr>
                    <td>goods</td>
                    <td><input type="text" name="goods"></td>
                </tr>
                <tr>
                    <td>price</td>
                    <td><input type="text" id="price" name="price"></td>
                </tr>
                <tr><td colspan=2><input type="submit" id="submit"  value="submit"></td></tr>
            </table>
        </form> 
        <script>
            function check()
            {
                if(document.getElementById("price").value < 10){
                    var flag = window.confirm(" are your sure the price is less than 10 ?");
                    if(flag){
                        return true;
                    }else{
                        return false;
                     }
                }
            }
        </script>
    </body>
</html>

I tested it on Edge, IE11, Firefox, chrome browser, it works.

I found another solution:

<html>
    <body>
        <form action="price.php" method="post" id="form">
            <table>
                <tr>
                    <td>goods</td>
                    <td><input type="text" name="goods"></td>
                </tr>
                <tr>
                    <td>price</td>
                    <td><input type="text" id="price" name="price"></td>
                </tr>
                <tr><td colspan=2><input type="submit" id="submit"  value="submit"></td></tr>
            </table>
        </form> 
        <script>
            var ob = document.getElementById('form');  
            function check(event){
                if(document.getElementById("price").value < 10){
                    var flag = window.confirm(" are your sure the price is less than 10 ?");
                    if(flag){
                        ob.submit();
                        return true;
                    }else{
                        event.preventDefault();
                        return false;
                     }
                }
           } 
           ob.addEventListener("submit",check);
        </script>
    </body>
</html>
user_20182780

A couple of things about the code:

  1. exit - I've never seen before - is it javascript?
  2. document.getElementById('price').value - returns a string - you should parse it (to a number) before comparing.
  3. Use onsubmit="" attribute of the form - return true to allow form submission, false to block submission.
  4. window.confirm already returns a boolean, just return that (instead of if statement).

Here's a bare-bones example:

function validate() {
  const price = parseFloat(document.getElementById('price').value)
  if (price < 10) {
    return window.confirm("Are your sure the price is less than 10 ?")
  }
  return true // <- otherwise allow form submission
}
<form action="price.php" method="post" onsubmit="return validate()">
  <input type="text" id="price" name="price">
  <input type="submit" id="submit"  value="submit">
</form>

Also, in general, try to condense your problem to the minimum code required to reproduce an issue.

user_7820340
Related