Click executes the function only once - php

Question

I have a form with a button whose id is calbtn. The form has two input fields whose ids are input1 and input2.
I want to check if the inputs are empty after I click callbtn. If the inputs are empty, then display the alert box (whose id is failurebox) else submit the form.
But this function is executed only once during its first time. When I click again callbtn does not execute the check function. If I leave either of my input1 or input2 empty for second time.
Please help me solve this problem. I am new to using jQuery. Please correct my below jquery code.
$(document).ready(function() {
$("#calbtn").on('click', function() {
if ($("#tempsp").val() == "" || $("#temppv").val() == "")
$("#failurebox").show();
});// end of click function
});
My HTML code is
<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">×</span></button>
Failure
</div>

Answer 1

The form should not be submitted. Use return false; to stop form from submitting.
$(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

Try this: jquery way of checking if an input is empty:
$(document).ready(function() {
$("#calbtn").on('click', function() {
if (!$("#input1").val() || !$("#input2").val()) {
$("#failurebox").show();
}
}); // end of click function
});
I think I've gotten it to work using this sqlfiddle
I did it like this:
$(document).ready(function() {
$("#calbtn").click(function() {
if (!$("#tempsp").val() || !$("#temppv").val())
{
$("#failurebox").show();
}
else{
$("#failurebox").hide();
}
});// end of click function
});
EDIT: my bad I made a slight mistake but fixed it now, should work now

Answer 3

I have got the problem solved.
The problem was in my alert box. I have used dismissible alert box with a close button. When I get the error for first time I was just closing my alert box which is preventing from getting the alert again when I do it for the second time.
The click function was working fine but the problem was due to the alert box.