I've created a function for a standard checkbox in php, it's called cbox as well as a standard input box called inp.
<tr><td><?php cbox('charge_cc'); ?> Charge CC? Amount $ <?php inp('charge_amt'); ?></td></tr>
If there is an amount entered into the 'charge_amt' inp field the checkbox needs to be checked as well before they post/submit.
If no amount has been entered into the input field than they do not need to check the box and can proceed to fill out the rest of the form and submit. I'm uncertain on how to accomplish this because i think my php functions for cbox and inp are breaking my jquery/javascript.
As of now i've tried a few variations:
<script type="text/javascript">
function validate(){
if (document.getElementById('charge_cc').checked){
alert("checked") ;
}else{
alert("You didn't check it! Let me check it for you.")
}
}
</script>
No avail, any help would be greatly appreciated.
<td><input type="hidden" name="charge_cc" value="0" class="charge_cc">
<input type="checkbox" id="charge_cc" name="charge_cc" value="1" class="charge_cc"> Charge CC? Amount $ <input type="text" id="charge_amt" name="charge_amt" value="" size="8" maxlength="6"></td>
If all you need is to check/uncheck the checkbox depending on an entry in the charge_amt
text-input, I'd suggest:
$('#charge_amt').keyup(function(){
var that = this;
$('#charge_cc').prop('checked', function(){
return that.value.length;
});
});
If you want to prevent the user un-checking the checkbox once there's a value in the text-input:
$('#charge_amt').keyup(function () {
var test = this.value.length;
$('#charge_cc').prop({
'checked': test,
'disabled': test
});
});
use jquery... if you have a checkbox with an id of charge_cc, this should work
if($("#charge_cc").prop("checked")) ...
jsfiddle with your html and alerts: http://jsfiddle.net/kmV9m/
$(function () {
$('#charge_amt').on('change', function () {
var amount = $(this).val();
if (amount.length > 0) {
$('#charge_cc').prop('checked', 'checked');
} else {
$('#charge_cc').prop('checked',false);
}
});
})
Using a bit of jQuery here to do the work for you should do the trick.