Не отправлять данные формы, когда вводить нет в окне подтверждения - PullRequest
Новая
       71

Не отправлять данные формы, когда вводить нет в окне подтверждения

0 голосов
/ 24 октября 2018

Введите 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 голосов
/ 26 октября 2018

Традиционный способ такой же, как 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>

То, что ожидает ОП, - это способ события уровня 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. когдафлаг равен true 

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

2. когда флаг равен false 

else{
    event.preventDefault();
    return false;
}
0 голосов
/ 31 октября 2018

Несколько вещей о коде:

  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>

Кроме того, в общем, старайтесь сократить вашу проблему до минимального кода, необходимого для воспроизведения проблемы.

0 голосов
/ 24 октября 2018

Это мое решение: 

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