Checkbox in a ColdFusion form - javascript

My code is below. I need to have both of the checkboxes checked by default when the page loads. This displays a result of the query. Now when one of the checkboxes is unchecked the form needs to be submitted and different query results need to be displayed. The checkboxes are always being checked even when I uncheck one. Can someone please guide me here?
<form action="abc.cfm?show=yes" method="post" name="myform">
<table align="center">
<tr>
<td>
<input type="checkbox" checked="checked" name="chkbox" id="chkbox1"> <strong> Agreement Only</strong>
<input type="hidden" name="chk" id="chk1">
<input type="checkbox" checked="checked" name="chkbox" id="chkbox2"> <strong>Active Employees</strong>
<input type="hidden" name="chk" id="chk2">
</td>
<td>
<input type="Submit" name="submitnow" value="View now">
</td>
</table>
</form>
<cfif isdefined("form.chk1")>
query 1
<cfelseif isdefined("form.chk2")>
query 2
</cfif>

you've named the checkboxes the same thing and are always checking them, so why would they not be checked?
You need to name them uniquely and check if the key exists in the form once the page has been submitted. Or display the box as checked when the form has not been submitted
The form has not been submitted - NOT structKeyExists(form,'fieldnames')
The form has been submitted and chkbox1 was selected - structKeyExists(form,'chkbox1')
<td>
<input type="checkbox"<cfif NOT structKeyExists(form,'fieldnames') OR structKeyExists(form,'chkbox1')> checked="checked"</cfif> name="chkbox1" id="chkbox1"> <strong> Agreement Only</strong>
<input type="hidden" name="chk" id="chk1">
<input type="checkbox"<cfif NOT structKeyExists(form,'fieldnames') OR structKeyExists(form,'chkbox2')> checked="checked"</cfif> name="chkbox2" id="chkbox2"> <strong>Active Employees</strong>
<input type="hidden" name="chk" id="chk2">
</td>

There are multiple ways you could accomplish what your trying to do. I wasn't sure what the purpose of your hidden fields were, so I modified a few things to try to make life a little easier.
Some people may suggest structkeyexists, but I didnt want to introduce a new command that you may not be familiar with.
<cfparam name="form.chkbox" default="">
<form action="abc.cfm?show=yes" method="post" name="myform">
<table align="center">
<tr>
<td><input type="checkbox" <cfif form.chkbox eq "" or listfind(form.chkbox, 1)>checked="checked"</cfif> name="chkbox" id="chkbox1" value="1">
<strong> Agreement Only</strong>
<input type="checkbox" <cfif form.chkbox eq "" or listfind(form.chkbox, 2)>checked="checked"</cfif> name="chkbox" id="chkbox1" value="2">
<strong>Active Employees</strong>
</td>
<td><input type="Submit" name="submitnow" value="View now"></td>
</table>
</form>
<cfif listfind(form.chkbox, 1) and listfind(form.chkbox,2)>
query 1
query 2
</cfif>

The problem is that the inputs (chk1 and chk2) DO exist in the form scope when the form is submitted. Their values, however, are empty.
To demonstrate this, dump out the form scope before your isdefined checks.
<cfdump var="#form#" label="form scope">
You need to be checking for the value or length attributes of the inputs.
<cfif len(form.chk1)>
query 1
</cfif>
BUT!
This doesn't actually seem to be what you want to do. chk1 and chk2 are your TEXT inputs, not your CHECKBOX inputs.
If you want to be acting based on the checkboxes, you need to be checking the value of the checkbox inputs - which brings us to another issue: you didn't set a value attribute for the checkboxes.
<input type="checkbox" value="1"...>
Now, you need to param the values of these checkboxes to ensure that fields exist at all
<cfparam name="form.chkbox1" value="0">
And then check the value
<cfif form.chkbox1 EQ 1>
query 1
</cfif>

Related

Autosubmit multiple checkboxes as comma separated string in url?

I've looked through some topics but they either have auto-submit where each checkbox is as a separate parameter in the URL or they need submit button. What I am trying to achieve is:
My current HTML form:
<form name="status" id="status" method="get">
<input type="checkbox" name="status[]" value="0" onchange="document.getElementById('status').submit()" />
<input type="checkbox" name="status[]" value="1" onchange="document.getElementById('status').submit()" />
<input type="checkbox" name="status[]" value="2" onchange="document.getElementById('status').submit()" />
</form>
With this, I have auto-submit whenever a checkbox is checked, but I have an URL like ...&status%5B%5D=0&status%5B%5D=1
What I need is a comma-separated parameter in the URL like &status=0,1 while keeping the auto-submit option. Also, there are some more parameters in the URL, so this must be appended at the end while keeping the rest parameters.
Is this possible? I'm not familiar with javascript but I think there might be a way ...

ng-change is not calling the method and no errors are shown

I am working on angularjs application. I have a radio buttons, based on the selection of radio button I need to show the results.
Issue is when I change the radio button, it's not calling the js code.Unable to trace the error/issue and no errors are shown on the console.
Below I'm sharing the entire code, any suggestions would be helpful.
html:
<table>
<tr>
One <input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'> <br>
Two: <input type="radio" ng-model="value" value="bar" ng-change='newValue(value)'>
</tr>
</table>
Angular doesn't recognize your ng-model or ng-change because your <tr> doesn't contain any <td>. Simply wrap your inputs in a <td> and it should work:
<tr>
<td>
ALL <input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'> <br>
Laptop,desktop,server: <input type="radio" ng-model="value" value="bar" ng-change='newValue(value)'>
</td>
</tr>

How to pass the value from DB to the group of radio buttons?

I have a question related to radio buttons. So I have form that user fill up and save in DB. User has option to email that form to them self. If users click on the link they should get the form with their information. At this point I was able to retrieve all text input values, problem for me is how to pass the value from DB to the group of radio buttons? Here is example of HTML code:
<cfquery name="jobInfo" datasource='test'>
SELECT jobCat
FROM userInfo
WHERE UserID = <cfqueryparam cfsqltype="cf_sql_integer" value="#RecID#">
</cfquery>
<cfoutput query="jobInfo">
<tr>
<th>Jobs</th>
</tr>
<tr>
<td>
<label>
<span><input type="radio" name="category" value="Teacher" id="teacher"></span>
<span>Teacher</span>
</label><br>
<label>
<span><input type="radio" name="category" value="Professor" id="professor"></span>
<span>Professor</span>
</label><br>
<label>
<span><input type="radio" name="category" value="Athletic" id="athletic"></span>
<span>Athletic Director</span>
</label>
<td/>
</tr>
</cfoutput>
then I tried to retrieve the value for the radio buttons like this:
<script>
$('input:radio[name="category"]').val('<cfoutput>#jobInfo.jobCat#</cfoutput>');
</script>
Query output:
<cfoutput>#jobInfo.jobCat#</cfoutput> gives me: Teacher
Usually I was able to get the values for check boxes if I used field id but in this case I have to pass the value to the group of radio buttons. If anyone knows what I'm doing wrong please let me know. Thanks.
You are making this much more complicated than necessary. If you are submitting the form, javascript is simply not necessary.
The first thing you want to do is preselect the radio button that co-incides with the query output. Here is how you do that for teacher.
<input
type="radio"
name="category"
value="Teacher"
id="teacher"
<cfif jobInfo.jobCat is "teacher">selected="selected"</cfif>
>
Repeat for the other two choices.
I guess you code do something like this:
<span><input type="radio" name="category" value="Teacher" id="teacher" #((jobInfo.jobCat EQ "Teacher")?'selected="selected"':"")# ></span>
<span>Teacher</span>
And do the relative for the other spans.
It would be better if the values actually came from a list so you don't repeat your logic too much like this
<tr>
<td>
<cfloop list="Teacher,Professor,Athletic" index="currCat">
<label>
<span><input type="radio" name="category" value="#currCat#" id="#currCat#" #((jobInfo.jobCat EQ currCat)?'selected="selected"':"")></span>
<span>#currCat#</span>
</label><br>
</cfloop>
<td/>
</tr>
Hope it helps

On pageload default a radio button

I have the below code for checkboxes on a page. I need to have both of them checked by default when the page loads. This displays a result of the query. Now when one of the checkbox is unchecked the form needs to be submitted and a different query results needs to be displayed. The checkboes are always being checked even I uncheck one box. Can someone please guide me here? thanks
<form action="abc.cfm?show=yes" method="post" name="myform">
<table align="center"><tr>
<td>
<input type="checkbox" checked="checked" name="chkbox" id="chkbox1"> <font size="3+"><strong> Agreement Only</strong> </font>
<input type="hidden" name="chk" id="chk1">
<input type="checkbox" checked="checked" name="chkbox" id="chkbox2"> <font size="3+"><strong>Active Employees</strong> </font>
<input type="hidden" name="chk" id="chk2">
</td>
<td>
<input type="Submit" name="submitnow" value="View now">
</td>
</table>
</form>
<cfif isdefined("form.chk1")>
query 1
<cfelseif isdefined("form.chk2")>
query 2
</cfif>
You could use a <input type="hidden" value=" (the value of your checkbox here) "/> for storing and then sending the checked value.
Just what exactly do you mean by 'save the selected radio button state' ?
In the page your form is posted to, you will know which checkbox is checked by examining your post variables. If your idea is to display the page with the above code again, with the user-selected checkbox checked, you may take a look at the following (jQuery 1.6+) :
$("#chkboxId").prop('checked', true); //check the checkbox with id chkboxId.
$("#chkboxId").prop('checked', false); //uncheck it.
var states = [false, false, true];
function saveStates()
{
var context = $("#chk1,#chk2,#chk3");
$(context).each(function (index) {
states[index] = $(context[index]).prop("checked");
});
}
I didn't test this, maybe there is a syntax error somewhere, but you get the idea. You need to use jQuery to apply my solution.

How to submit form field values with a link?

How can I submit the values of the textbox and radio button with "testLink1" in the following code:
<cfform name="frmEdit" method="POST" >
<INPUT type="text" name="txtName" value ="" >
<INPUT type="radio" name="typeA" value ="exempt" checked> Exempt
<INPUT type="radio" name="typeA" value ="non_exempt"> Non-exempt
testLink1
</cfform>
I have my own reason to use <a> tag instead of a submit button.
In order to submit the form via a link you will need to use JavaScript. I have rewritten your code below:
<form name="frmEdit" action="test1.cfm" method="POST">
<input type="text" name="txtName" value="" >
<input type="radio" name="typeA" value="exempt" checked="checked"> Exempt
<input type="radio" name="typeA" value="non_exempt"> Non-exempt
testLink1
</form>
Or as Travis suggested below, change the <a> tag like so:
testLink1
This should work for your simple example. All of the fields will be available to you in the FORM scope in ColdFusion.
There is also no reason to use cfform if you are not using any of it's functionality (which your example is not).

Categories