在确认时输入 no 时不发送表单数据 window

Question

在名称为goods的输入框中输入apple，在名称为price的输入框中输入9，然后点击submit，现在确认弹出window，无论你点击yes还是no，数据都会发送到price.php。
我的期望：
当您点击 yes 时，数据将发送到 price.php，当你点击no时，数据不会发送到price.php，我的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>

price.php简单

<?php
var_dump($_POST);
?>

下面的exit无法阻止表单数据发送到price.php。

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

把exit;改成return false;也没用。 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("submit",check,false);

Answer 1

这是我的解决方案：

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

我在 Edge、IE11、Firefox、chrome 浏览器上测试过，可以。

我找到了另一个解决方案：

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

Answer 2

传统方式和The KNVB一样，重点是<form action="price.php" method="post" onsubmit="return check()">，绑定表单的属性onsubmit和函数check。

DOM0级事件方式，和传统方式几乎一样。

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

OP期望的是DOM2级别的事件方式。

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

DOM2 level event way中的重点是：

1.when 标志为真

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

2.when 标志为假

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

Answer 3

关于代码的一些事情：

exit - 我以前从未见过 - 是javascript吗？
document.getElementById('price').value - return 是一个字符串 - 你应该在比较之前解析它（到一个数字）。
使用表单的 onsubmit="" 属性 - return true 允许表单提交，false 阻止提交。
window.confirm 已经 return 是一个布尔值，只是 return 那个（而不是 if 语句）。

这是一个简单的示例：

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>

另外，一般来说，尝试将您的问题压缩到重现问题所需的最少代码。

在确认时输入 no 时不发送表单数据 window

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

javascript

confirm