I tried this but it's not working.
$('#booking').attr('disabled', true); $('input:text').keyup(function() { var disable = false; $('input:text').each(function() { if ($(this).val() == "") { disable = true; } }); $('#booking').prop('disabled', disable); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="<?php echo site_url('home/program/booking');?>" method="post"> <div class="form-group"> <label class="col-sm-2 control-label">Tour </label> <div class="col-sm-10"> <input class="form-control" id="tour" name="tour" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Firstname </label> <div class="col-sm-10"> <input class="form-control" id="firstname" type="text" value=""> </div> </div> <button id="booking" type="submit" class="btn btn-default">OK</button> </form>
You should use disable='disabled'
and disabled=''
instead of true
/ false
, though using jQuery it will work with both
And with jQuery you should use .prop
instead of .attr
\n
$('#booking').attr('disabled', 'disabled'); $('input').keyup(function() { var d = ''; $('input').each(function() { if ($(this).val() == "") { d = 'disabled'; } }); $('#booking').prop('disabled', d); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="<?php echo site_url('home/program/booking');?>" method="post"> <div class="form-group"> <label class="col-sm-2 control-label">Tour</label> <div class="col-sm-10"> <input class="form-control" id="tour" name="tour" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Firstname</label> <div class="col-sm-10"> <input class="form-control" id="firstname" type="text" value=""> </div> </div> <button id="booking" type="submit" class="btn btn-default">OK</button> </form>
Update
Did you add the jQuery library to your solution? ... If I do that on your existing code it actually does work as is, as you can see in below sample
$('#booking').prop('disabled', true); $('input:text').keyup(function() { var disable = false; $('input:text').each(function() { if ($(this).val() == "") { disable = true; } }); $('#booking').prop('disabled', disable); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="<?php echo site_url('home/program/booking');?>" method="post"> <div class="form-group"> <label class="col-sm-2 control-label">Tour</label> <div class="col-sm-10"> <input class="form-control" id="tour" name="tour" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Firstname</label> <div class="col-sm-10"> <input class="form-control" id="firstname" type="text" value=""> </div> </div> <button id="booking" type="submit" class="btn btn-default">OK</button> </form>
You can use return
in your function once when it hits a input box with an empty value instead of keep looking through and changing the that disable
variable
$('#booking').attr('disabled', true); $('input').keyup(function() { var disable = false; $('input').each(function() { if ($(this).val() == "") { $('#booking').attr('disabled', true); return } else { $('#booking').attr('disabled', false); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="<?php echo site_url('home/program/booking');?>" method="post"> <div class="form-group"> <label class="col-sm-2 control-label">Tour</label> <div class="col-sm-10"> <input class="form-control" id="tour" name="tour" type="text"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">Firstname</label> <div class="col-sm-10"> <input class="form-control" id="firstname" type="text" value=""> </div> </div> <button id="booking" type="submit" class="btn btn-default">OK</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.