Im using this function to disable check boxes after selection
$( "input[type='checkbox']" ).prop({ disabled: true});
the problem is that when the form is submited the data of the checkboxes select is not showing in the email sent. It work if checkboxes are enabled.
likely the jquery is setting the "disabled" flag, which according to the HTML specs tells the browser to remove the input in regards to submitting a form. Any "disabled" input field will have the same result.
Your solution is to enable all input fields immediately before submitting (which you can do on the onsubmit event of a form.
I tried this and did not work
<cfform name="UserAccessForm" action="send.cfm" method="post" onsubmit="EnableCheckbox">
function EnableCheckbox
{
$( "input[type='checkbox']" ).prop({ disabled: false});
}
So what if the user changes his/her mind and doesn't want the checkbox checked? It's disabled, so they can't?
checkboxes will be checked base on employee type
Not sure if I follow. Why should thiss matter? If you have an enabled checkbox, but it then becomes disabled once it's checked - that sounds weird. Perhaps I'm missing something. Probably.
When I user selects Doctor from a drop down the appropiate checkboxes are checked and the disabled to prevent select other checkboxes. The problem is that when the form is submited the info on the checboxes is not being sent on the email. I need to somehow enable the checkboxes on submit
OK, if this data is stored anyway, e.g. you know Doctor will check boxes 1,9,11 but leave all the others. I'm assuming that this info is stored somewhere (DB?), so it begs the question, what use is it? If it's there just for display purposes, you don't really need it to be sent to the server with the form do you? Just send the doctor value from the dropdown and you have all the info you need. DOnt' you?
Yes data is stored in DB I need to have the checkboxes for othe employes. preset apps apply only for Docs and nurses
this$( "input[type='checkbox']" ).prop({ disabled: false});
will not work. You will have to remove the property entirely to get rid of the "disabled" marker.
for reference...
https://jsfiddle.net/pudhLdbt/
you will notice, the only way to "un-disabled" the check box is to remove the property altogether.
Ryan how can I remove the property all together when the form is submitted?
there is an "onsubmit" property of a form, as I mentioned above.
I don't write in jQuery, but Im sure they have a method for removing attributes. If not, iterate through the collection that $( "input[type='checkbox']" ) returns you, and for each item .removeAttribute("disabled")
http://www.w3schools.com/jsref/met_element_removeattribute.asp
I'm sorry, I know ryan is helping yu, but I'm still thinking, what's the point of all this. If doctors and nurses have closed options but everybody else has free options, does it matter if checkboxes are disabled?
Here's my thinking:
<?php
//Sample Data
$jobs = [
1=>['job'=>'Doctor', 'skills'=>[1,3,5]],
4=>['job'=>'Van Driver'],
6=>['job'=>'Nurse', 'skills'=>[2,4,5]],
9=>['job'=>'Teacher'],
3=>['job'=>'Programmer']
];
$skills = [
1=>'Communication',
2=>'Problem Solving',
3=>'Literacy',
4=>'Numeracy',
5=>'Critical Thinking',
6=>'Working with Others',
7=>'Physical',
8=>'Coordination and Balance'
];
$option = [];
$check = [];
foreach($jobs as $id=>$data)
$option[] = "<option value='$id'>{$data['job']}</option>";
$options = implode("\n", $option);
foreach($skills as $id=>$data)
$check[] = "<label><input type='checkbox' value='$id' name="skills[]" /> $data</label>";
$checks = implode("\n", $check);
$jobsJSON = json_encode($jobs);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- open form here -->
<select name="job" id="job">
<?=$options;?>
</select>
<div id="checkboxes">
<?=$checks;?>
</div>
<!-- close form here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var jobs = <?=$jobsJSON?>;
changeCheckboxes();
$('#job').change(function()
{
changeCheckboxes();
})
function changeCheckboxes()
{
var id = $('#job').val();
if(jobs[id].skills === undefined)
{
$('#checkboxes input').each(function(i){
$(this).prop('checked',false);
$(this).prop('disabled', false);
});
}else{
$('#checkboxes input').each(function(i){
if($.inArray(parseInt($(this).val()), jobs[id].skills) === -1)
{
$(this).prop('checked',false);
}else {
$(this).prop('checked',true);
}
$(this).prop('disabled', true);
});
}
}
</script>
</body>
</html>
WHen you send the form (not shown in snippet):
I think he is being asked, as a UI/UX point of view, to do something that is programatically a strange concept. Requests like this come around once in a while.
Yes, what he is doing is easily obfuscated using hidden fields, or simply knowing on the server side to ignore certain fields based on a selection. However, it may not be what was requested of him.
I agree, though, that as far as usability is concerned, it offers little value for the visual change. Having a dynamic list of options display or simply modifying a hidden field, may be more appropriate; but I do not know the situation, nor the scope of whatever project he is working on.
I offered the snippet just to show how pointless getting the data from the checkboxes if nurse or doctor is, as you already know the values. I'd be happier hiding and showing the checkboxes - lot less hassle.
If you are just getting the value of the checkboxes (not the state of them as in checked or not checked), then they need to be enabled or you can't get the value. You may be getting value and state mixed up.
stbuchok I need to pass the data on the checkbox to the email when the form is submited
Im using this script
$( "input[type='checkbox']" ).prop({ disabled: true});
to disable all the checkboxes included the unchecked ones to prevent the user from adding checking othe checkboxes. Because the checkboxes are disabled no information is passing to the email when submited. I the check boxes are enabled the information passes correctly. Is there a way to enable checkboxes onsubmit behind the scenes?
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.