防止形成错误数据和显示错误div

阻止表单提交

我

正在尝试阻止表单提交并显示我拥有的警告 DIV，直到他们修复错误的值。当卖家尝试以低于成本价的成本销售产品时，它会显示错误

这是我所拥有的

<div class="warnings">error in price</div>

这是我在销售价格低于成本价格时显示的div，因此我们必须防止他们出售产品

function hide(obj) {
    var el = document.getElementById(obj);
    el.style.display = 'none';
}
$(document).ready(function() {
    $('form#selling').submit(function(e) {
            $("#sale_price").mouseout(function() {
                if (Number($("#sale_price").val()) <
                    Number($("#cost_price").val())) {
                    $("#warnings").show();
                }
            });
        } else {
            form.submit();
        }
    });
});

我没有显示错误 DIV，并且表单已提交...

表格具有正确的名称和ID"销售">

表单中的输入是

<input type="hidden" name="sale_price" id="sale_price">
<input type="hidden" name="cost_price" id="cost_price">

我建议在应该阻止提交时返回false。
否则，即使显示错误，表单仍将在之后立即提交。

我还纠正了其他一些错误，包括删除mouseout，确保所有大括号都已关闭，以及使用ID作为错误容器而不是类。

$(function() {
  var $cost_price = $('#cost_price');
  var $sale_price = $('#sale_price');
  var $warnings = $('#warnings');
  var $form=$('#selling');
  $form.submit(function(e) {
    if (Number($sale_price.val()) < Number($cost_price.val())) {
      $warnings.fadeIn(150);
      return false;
    }
  });
  $form.on('click', function() {
    $warnings.fadeOut(150);
  });
});

#warnings {
  display: none;
  margin: 1em 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="selling" action="" method="post">
  <input type="text" id="sale_price" value="300">
  <input type="text" id="cost_price" value="500">
  <input type="submit">
</form>
<div id="warnings">error en precio de venta</div>

这应该可以做你想要的，但由于我们没有看到实际形式，所以有点猜测。

$(document).ready(function() {
    $('form#selling').submit(function(e) {
        e.preventDefault(); // prevent the form of beeing submitted
        if (Number($("#sale_price").val()) < Number($("#cost_price").val()) {
            $("#warnings").show();
        } else {
            $('form#selling').submit();
        }
      });
});

编辑：现在我们有表格。这应该仍然有效，但 showdev 的答案更优雅......

这是我的例子。我使用 javacript 来验证输入是否小于另一个值，并使用 jquery 将该值发送到另一个文件(例如 submit.php(

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
Price: <input id="myText" type="text" name="price">
<button onclick="myFunction()">Click me</button>
</body>
<script>
    function myFunction() {
        try{
            var givenValue = parseInt(document.getElementById("myText").value);
            if(givenValue < 10){ //10 is an example selling price
                $.ajax({
                    type: "POST",
                    url: "submit.php",
                    data: {price: givenValue},
                    complete: function(data) {
                        alert(data);
                    }
                });
            }
        } catch(Exception){
        }
    }
</script>
</html>

让我知道你的想法！

相关内容

最新更新

热门标签：