在确认窗口中键入否时,请勿发送表单数据

时间:2018-10-24 02:00:17

标签: javascript confirm

在名称为apple的输入中键入goods,并在名称为9的输入中键入price,然后单击submit,现在确认弹出窗口,无论您单击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); 

3 个答案:

答案 0 :(得分:9)

传统方法与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。标志为假时

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

答案 1 :(得分:4)

这是我的解决方案:

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

答案 2 :(得分:3)

有关代码的两件事:

  1. exit-我从未见过-是javascript吗?
  2. document.getElementById('price').value-返回一个字符串-您应该在比较之前将其解析为一个数字。
  3. 使用表单的onsubmit=""属性-返回true允许表单提交,false阻止提交。
  4. window.confirm已经返回一个布尔值,只需返回它(而不是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>

此外,通常,尝试将问题压缩为重现问题所需的最少代码。