On pageload default a radio button - javascript

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.

Related

Remove INPUT field from SUBMIT with Javascript if value is zero

I have a submit form like this.
<form method="post" id="formCard" name="formCard">
<input type="radio" name="name[]" value="0">
<input type="radio" name="name[]" value="1">
<input type="radio" name="name[]" value="2">
</form>
I want to know if it is possible to remove with javascript the name[] from the POST if value selected was == 0. Remember the form still need to submit, but it can not send name in the POST.
In other words, if in my PHP page i do isset($_POST[name]) it should return not exist, since javascript remove this from submission
$( "#formCard" ).submit();
Disabled controls do not submit their values.
So you can disable the control before the form submits, which allows the user to still select it.
$("form").submit(() => {
$("[name='name[]'][value='0']").attr("disabled", "disabled");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="formCard" name="formCard">
<input type="radio" name="name[]" value="0">
<input type="radio" name="name[]" value="1">
<input type="radio" name="name[]" value="2">
<button type='submoit'>
submit
</button>
</form>
Select 1 or 2, submit, check network tab and payload, the value will be included. Then select 0, submit, check network tab and payload and it won't be included.
Depending on your requirement, you might need to re-enable the radio button (by removing the disabled attribute), eg if the submit does not go ahead due to other validation checks.
This one removes the "name" attribute from the element with value="0"
document.body.querySelector('[value*="0"]').removeAttribute('name');

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 ...

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

How to disable only one field in form using javascript?

I have a form with multiple text fields.
In the form at the top is a question of two radio buttons:
Go direct or go public.
Go direct means you have to supply an email address.
Go public means the email box is disabled.
<input type="radio" name="target" value="public" />
<label for "public">Open to anyone </label></br>
<input type="radio" name="target" value="direct"/>
<label for="newEmail">Email address of the person:</label>
<input type="text" name="newEmail" id='newEmail'>
</br>
</br>
</br>
<label for="title">Book title:</label>
<input type="text" name="title" id='title'></br>
<label for="location">Location:</label>
<input type="text" name="location" id='location'>
No other form fields must be affected
You can do stuff like this
$('input:radio').on('click',function(){
if(this.checked && this.value == "public") // this.checked is not necessary as checking value already
$("#newEmail").prop("disabled",true);
else
$("#newEmail").prop("disabled",false);
});
Fiddle
Side Note: I would suggest click instead change() because radio buttons are often toggled in a group, you do not need to add more than one case or conditional logic like you do with checkboxes. though change can also be used
This will trigger the disabled state of the email input based on which radio button is selected.
var $radios = $('input[type="radio"]');
$radios.change(function() {
$('#newEmail').prop('disabled', $radios.first().is(':checked'));
});
JSFiddle

Checkbox in a ColdFusion form

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>

Categories