Identify the checkbox that is checked, in a group of checkboxes

help_lucky · June 2, 2010

Hello Everyone,

I have 2 checkboxes in a form and onclick of these. Once the checkbox is checked, only the fields that are relevant to the checkbox are displayed, with default values in it and to fetch the default values i need to trigger php code. So i can't perform the operation once the whole form is submitted. As the client i am working for does not support AJAX. I can't go for it.

So i have written onclick = document.formName.submit(); Now it is triggering the same page and i am able to write the code. I am not able to differentiate which checkbox is checked.

I don't want to use the procedure of:- calling javascript and then storing the value of the checkbox in a variable and making this variable as invisible.

I would like to write something like document.formName.submit('checkbox1'). So that i should be able to handle the value of this or i dont know.

Please suggest me an alternative method or better approach.

Psycho · June 2, 2010

I read your post a couple of times and really don't understand what your problem is. Escpecially since some of it just doesn't make sense. You say that you are working with JavaScript and PHP but your client doesn't support AJAX. - ??? If you can use both of those technologies you can use AJAX.

In any event, I *think* you are making this more complicated than it needs to be (at least based upon what I think you are needing to do).

First off, if you want to hide/display certain fields (and populate defaults) based upon a checkbox selection there isn't any need to do a subsequent PHP call to reload the page. Just put all the logic into your JavaScript. By the way, it sounds as if you should really be using two radio buttons - unless the user is allowed to select both checkboxes.

Here is a very rough example:

<html>
<head>
<script type="text/javascript">

function setServiceType(typeStr)
{
    document.getElementById('return_info').style.display = (typeStr=='return') ? 'inline' : 'none';
    document.getElementById('audit_info').style.display = (typeStr=='audit') ? 'inline' : 'none';
}

</script>
</head>
<body>
<b>Type of service:</b><br />
<input type="radio" name="service" value="return" onclick="setServiceType(this.value);" /> Tax return
<input type="radio" name="service" value="audit" onclick="setServiceType(this.value);" /> Audit
<br /><br />

<b>Contact Info</b><br />
Name: <input type="text" name="name" /><br />
Phone: <input type="text" name="phone" /><br />
Email: <input type="text" name="email" /><br />
<br />

<div id="return_info" style="display:none;">
<b>Please provide the following info for the return service requested:</b><br />
  Tax Year: <input type="text" name="year" value="2009" /><br />
  State: <input type="text" name="state" /><br />
  <input type="checkbox" name="newhome" /> Check here if you are a new home buyer.
</div>

<div id="audit_info" style="display:none;">
<b>Please provide the following info for the audit service requested:</b><br />
  Fiscal Year end date (mm/dd): <input type="text" name="year" value="12/31" /><br />
  Type of business: <input type="text" name="state" /><br />
</div>

</body>
</html>

help_lucky · June 7, 2010

Thanku for ur reply.

Requirement:- I have a form, in which i have 2 checkboxes. Onclick of a checkbox, values for first set textboxes(that are in the same form) needs to be fetched automatically. onclick of another checkbox the value of select tag and textarea needs to be filled.

My approach:- I have created 2 checkboxes and onlclick of each of the checkboxes i am submittting the same form. From where i can fetch the values using php code.

print_r($_post) will return Array(checkbox1=>primary checkbox2=>secondary). The value of first and second checkboxes. But i will not able to find which is checked by this click. It just returns values of the checkboxes. But does not give me the info, onclick of which checkbox the form got submitted.

So, The question is how will i come to know, if the form got submitted, by click of first checkbox or second.

Hope i am clear in explaining the questions and waiting for replies.

Psycho · June 7, 2010

print_r($_post) will return Array(checkbox1=>primary checkbox2=>secondary). The value of first and second checkboxes. But i will not able to find which is checked by this click. It just returns values of the checkboxes. But does not give me the info, onclick of which checkbox the form got submitted.

Something isn't right. When you submit a form, checkboxes are only included in the submitted values if they are checked. Since both checkboxes are included in your post data, that means that both were checked. I would guess that your Javascript is "checking" them before the submission.

help_lucky · June 8, 2010

Yes both have the values. As i am submitting the same form onclick of both the checkboxes.

onclick --> checkbox A .---> trigger form with name "form_name" --> Fetch the values from php for 1st set of fields.

onclick --> checkbox B .---> trigger form with name "form_name" --> Fetch the values from php for 2nd set of fields.

My question is, as it is triggering the same form onclick of checkbox A&B. Is there any way how i can indentify which(Checkbox A or checkbox B) is checked.

from $_POST, i will get the values of the checkboxes, but not which one is clicked, for this form to get submitted.

ScotDiddle · June 8, 2010

help_lucky,

Below is a modified version of your code. ( I gave unique names to Tax and Audit... ( they used to both be: "service" )

Here is the output:

Name of Submitted element: taxRadio

return

Name of Submitted element: name

a

Name of Submitted element: phone

b

Name of Submitted element: email

c

Name of Submitted element: tax_year

d

Name of Submitted element: state

e

Name of Submitted element: newhome

on

Name of Submitted element: Audit_year

12/31

Name of Submitted element: Type_of_Business

Name of Submitted element: submitForm

Submit

The value you are looking for is: "taxRadio Return "; this is the name and value of the radio button the user selected.

Hope this helps.

test.php is shown below.

Scot L. Diddle, Richmond VA


<?php

Header("Cache-control: private, no-cache");
Header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
Header("Pragma: no-cache");

if (isset($_POST) && $_POST != NULL) {

echo "<table border=\"0\"> \n";

echo "<tr> \n";


foreach ($_POST as $IDX => $submittedValues) {

	$$IDX = $submittedValues;


	echo "<td> \n";

	echo "Name of Submitted element:      <strong>$IDX</strong>     ";

	echo "</td>";

	echo "<td> \n";

	echo "<pre> \n";

	print_r($$IDX);

	echo "</pre> \n";

	echo "</td></tr> \n";

}

echo "</table> \n";

exit;

}

?>

<html>
<head>

<script type="text/javascript">

function setServiceType(typeStr){
document.getElementById('return_info').style.display = (typeStr=='return') ? 'inline' : 'none';
document.getElementById('audit_info').style.display = (typeStr=='audit') ? 'inline' : 'none';
}

</script>
</head>
<body>

<form name="myForm" id="myForm" method="POST" action="test.php">

<b>Type of service:</b><br />

<input type="radio" name="taxRadio" value="return" onclick="setServiceType(this.value);" /> Tax return
<input type="radio" name="auditRadio" value="audit" onclick="setServiceType(this.value);" /> Audit

<br /><br />

<b>Contact Info</b>
<br />

Name: <input type="text" name="name" /><br />Phone:

<input type="text" name="phone" />

<br />

Email: <input type="text" name="email" />

<br /><br />

<div id="return_info" style="display:none;">

<b>Please provide the following info for the return service requested:

</b>

<br />

Tax Year: <input type="text" name="tax_year" value="2009" /><br />

State: <input type="text" name="state" />

<br />

<input type="checkbox" name="newhome" /> Check here if you are a new home buyer.

</div>
<div id="audit_info" style="display:none;">
<b>Please provide the following info for the audit service requested:</b>

<br />  Fiscal Year end date (mm/dd): <input type="text" name="Audit_year" value="12/31" />

<br />  Type of business: <input type="text" name="Type of Business" />

<br />
</div>

<input type="submit" id="submitForm" name="submitForm" value="Submit">

</body>

</html>

Psycho · June 8, 2010

Yes both have the values. As i am submitting the same form onclick of both the checkboxes.

onclick --> checkbox A .---> trigger form with name "form_name" --> Fetch the values from php for 1st set of fields.

onclick --> checkbox B .---> trigger form with name "form_name" --> Fetch the values from php for 2nd set of fields.

My question is, as it is triggering the same form onclick of checkbox A&B. Is there any way how i can indentify which(Checkbox A or checkbox B) is checked.

from $_POST, i will get the values of the checkboxes, but not which one is clicked, for this form to get submitted.

You are not understanding what I previously said. When a form is submitted checkbox values are only included in the POST data only for checkboxes that are checked. So, if you have two checkboxes and one is checked on form submission only the one checked checkbox field and value will be included in the post data. The other will not be included in the post data as it is not checked. If you are getting both fields included in your post data then they are both checked. You're obviously doing something wrong.

ScotDiddle · June 8, 2010

help_lucky,

My Bad !... You have to have radio button groups all have the same name

In my posted code, change:

<input type="radio" name="taxRadio" value="return" onclick="setServiceType(this.value);" /> Tax return

<input type="radio" name="auditRadio" value="audit" onclick="setServiceType(this.value);" /> Audit

To:

<input type="radio" name="Radio" value="tax" onclick="setServiceType(this.value);" /> Tax return

<input type="radio" name="Radio" value="audit" onclick="setServiceType(this.value);" /> Audit

Then, the first row of our output display will be:

Name of Submitted element: Radio

tax

Which tells us that the tax radio button was selected.

Sorry for the confusion.

Scot L. Diddle, Richmond VA

Sign In

Identify the checkbox that is checked, in a group of checkboxes

Recommended Posts

help_lucky

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

help_lucky

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

help_lucky

Link to comment

Share on other sites

ScotDiddle

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

ScotDiddle

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information