Search code examples
javascriptconfirm

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


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

Solution

  • 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;
    }