Question

我有一个带有ID为calbtn的按钮的表单。 form有两个input字段，其ID为input1和input2。

点击callbtn后，我想检查输入是否为空。如果输入为空，则显示警告框（其标识为failurebox），否则提交表单。但是这个功能在第一次执行时只执行一次。当我再次单击时callbtn不执行检查功能。如果我第二次将input1或input2中的任何一个留空。

请帮我解决这个问题。我是使用jQuery的新手。请更正我的下面的jquery代码。

$(document).ready(function() {
    $("#calbtn").on('click', function() {
        if ($("#tempsp").val() == "" || $("#temppv").val() == "")
            $("#failurebox").show();
    });// end of click function 
});

我的HTML代码是

<form id="newlayerform" role="form" method="post" class="form-horizontal" >

<div class="form-group">
    <label for="tempsp" class="col-sm-4 control-label" style="color:red">Temp Set Point</label>
    <div class="col-sm-8">
        <div class="input-group">
            <input type="number" class="form-control" name="tempsp" id="tempsp" placeholder="Enter Temp Set Point">
            <div class="input-group-addon"><b>deg.Celcius</b></div>
        </div><!--end of input group--> 
    </div>
</div>

<div class="form-group">
    <label for="temppv" class="col-sm-4 control-label" style="color:red">Temp Process</label>
    <div class="col-sm-8">
        <div class="input-group">
            <input type="number" class="form-control" name="temppv" id="temppv" placeholder="Enter Temp Process">
            <div class="input-group-addon"><b>deg.Celcius</b></div>
        </div><!--end of input group--> 
    </div>
</div>

<button type="button" class="btn btn-success btn-lg btn-block" id="calbtn" name="calbtn">Calculate</button>

</form>

 <div id="failurebox" class="alert alert-warning" style="display:none">
         <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        Failure
    </div>

Answer 1

不应提交表格。使用return false;停止提交表单。

$(document).ready(function() {
    $("#calbtn").on('click', function() {
        if (!$.trim($("#input1").val()) || !$.trim($("#input2").val())) {
            $("#failurebox").show();
        } else {
            $("#failurebox").hide();
        }

    }); // end of click function 
});

Answer 2

试试这个：jquery检查输入是否为空的方法：

$(document).ready(function() {
    $("#calbtn").on('click', function() {
        if (!$("#input1").val() || !$("#input2").val()) {
            $("#failurebox").show();

        }
    }); // end of click function 
});

我认为我已经使用此sqlfiddle让它工作了我是这样做的：

$(document).ready(function() {
    $("#calbtn").click(function() {
        if (!$("#tempsp").val() || !$("#temppv").val())
        {
            $("#failurebox").show();
        }
        else{
            $("#failurebox").hide();
        }
    });// end of click function 
});

编辑：我的不好我犯了一个小错误，但现在修好了，现在应该工作

Answer 3

我已经解决了问题。

问题发生在我的警报框中。我使用了带有关闭按钮的可禁用警报框。当我第一次收到错误时，我正在关闭我的警报框，当我第二次这样做时，它会阻止再次收到警报。

点击功能工作正常，但问题是由于警告框。

点击仅

3 个答案: