...

View Full Version : Selecting all the dynamically created radio button



Anishgiri
07-20-2011, 10:33 AM
Below I have dynamical generated radio buttons, the names($approve variable is the name) per radio button pairs are different(dynamically created names using looping). When I create two buttons, one is for if you click it, all the radio button with the label approve will be selected all, and the other button is for the disapprove label button that will select the radio button with the label disapprove. How can I make this right. Below are the codes I created. Thanks




<script>
function selectAll()
{
var i = 0;

objElems = document.t4.elements;
for(i=0;i<objElems.length;i++){
objElems[i].checked =true;
}
</script>



<form action="viewall.php" method="post" name="t4">
while(condition)
{
echo "<td ><input type='radio' name='". $approve."' id='app' value='approve' /> Approve<br /> </td>
<td ><input type='radio' name='". $approve."' id='disp' value='disapprove' /> Disapprove<br /> </td> ";
}


<tr><td><input type="button" name="all_app" value="Select All Approve" onclick="selectAll(this.value);" ></td>
<td><input type="button" name="all_app2" value="Select All disapprove" onclick="selectAll(this.value);" ></td>
</tr>
</form>

sunfighter
07-20-2011, 09:54 PM
Just hoping I don't any mistakes in your code.
Your php code:
It's not php and you don't need it to be. Remove the
while(condition)
{
echo

and just make input buttons.
----------------------
Why are you using <td> without a table??? clean that up.
------------------------------
onclick="selectAll(this.value);" is sending an argument but - function selectAll() is not receiving any.
---------------------------------------
<script> should be <script type="text/javascript">
--------------------------
your function needs an ending }
----------------------------

To test things for yourself in js use alerts. Like this:


<script type="text/javascript">
function selectAll()
{
alert('here'); <== lets you know your buttons are activating your function
var i = 0; <== Not Needed because the for function will initiate it.

objElems = document.t4.elements; <=== totally wrong. look up getElementById
alert(objElems); <=== will tell you if your making 'objElems' and your not.


This should be a good start in getting your code correct.

Anishgiri
07-21-2011, 01:36 AM
Just hoping I don't any mistakes in your code.
Your php code:
It's not php and you don't need it to be. Remove the
while(condition)
{
echo

and just make input buttons.
----------------------
Why are you using <td> without a table??? clean that up.
------------------------------
onclick="selectAll(this.value);" is sending an argument but - function selectAll() is not receiving any.
---------------------------------------
<script> should be <script type="text/javascript">
--------------------------
your function needs an ending }
----------------------------

To test things for yourself in js use alerts. Like this:


<script type="text/javascript">
function selectAll()
{
alert('here'); <== lets you know your buttons are activating your function
var i = 0; <== Not Needed because the for function will initiate it.

objElems = document.t4.elements; <=== totally wrong. look up getElementById
alert(objElems); <=== will tell you if your making 'objElems' and your not.


This should be a good start in getting your code correct.

Regarding the why I not use table, and why there is a loop, I just directly point out the problem I just put partial off my codes here to tell where I have a problem, the loop of php is there to show that I have many radio selection. To make it simple below I have


<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<SCRIPT LANGUAGE="JavaScript">

function selectAll()
{
var i = 0;

objElems = document.t4.elements;
for(i=0;i<objElems.length;i++){
objElems[i].checked =true;
}



}
</SCRIPT>
</HEAD>
<BODY>
<form name="t4">
<table>
<tr>
<td >
<input type='radio' name='one' id='app' value='approve' /> Approve </td>
<td >
<td>
<input type='radio' name='one' id='disp' value='disapprove' /> Disapprove<br /> </tr>
</form >
</td>
</tr>
<tr>
<td >
<input type='radio' name='two' id='app' value='approve' /> Approve </td>
<td >
<td>
<input type='radio' name='two' id='disp' value='disapprove' /> Disapprove<br /> </tr>
</td>
</tr>
<tr><td><input type="button" name="select all approve" value="select all approve" onclick="selectAll()"></td>
<td><input type="button" name="select all disapprove" value="select disapprove" onclick="selectAll()"></td>
</table>

</form>
</body>
</HTML>

How can I make it when I click the select all approve button all the radio button with the label approve will be selected? And vice versa, when I click the button with the label select all disapprove, the radio button with label Disapprove, will be selected. Thanks

jmrker
07-21-2011, 02:10 AM
See: http://www.webdeveloper.com/forum/showthread.php?t=249019

It is considered bad form to post questions simultaneously in two different forums
to pit the responders against each other in an effort to help you.

Post to one, then if you get no helpful responses, post to another after a reasonable delay.

Anishgiri
07-21-2011, 02:14 AM
See: http://www.webdeveloper.com/forum/showthread.php?t=249019

It is considered bad form to post questions simultaneously in two different forums
to pit the responders against each other in an effort to help you.

Post to one, then if you get no helpful responses, post to another after a reasonable delay.

Pardon for this, I will not repeat such thing again, I just need to get this done, but as I told, I will not repeat that again.

So does anybody know the answer? Thanks

jmrker
07-21-2011, 03:53 AM
You're HTML syntax was all messed up. Would be good to validate it along with your JS.


<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<SCRIPT type="text/javascript"> <!-- archaic form: LANGUAGE="JavaScript" -->

function selectAll(rbtnValue) {
var i = 0;
objElems = document.t4.elements;
for(i=0;i<objElems.length;i++){
if (objElems[i].value==rbtnValue) { objElems[i].checked = true; }
}
}
</SCRIPT>

</HEAD>
<BODY>
<form name="t4">
<table>
<tr>
<td> <input type='radio' name='one' value='approve' /> Approve </td>
<td> <input type='radio' name='one' value='disapprove' /> Disapprove </td>
</tr>
<tr>
<td> <input type='radio' name='two' value='approve' /> Approve </td>
<td> <input type='radio' name='two' value='disapprove' /> Disapprove </td>
</tr>
<tr>
<td> <input type="button" value="select all approve" onclick="selectAll('approve')"></td>
<td> <input type="button" value="select all disapprove" onclick="selectAll('disapprove')"></td>
</tr>
</table>

</form>
</body>
</HTML>

Note line-by-line differences in the table creation.

Anishgiri
07-21-2011, 07:35 AM
You're HTML syntax was all messed up. Would be good to validate it along with your JS.


<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<SCRIPT type="text/javascript"> <!-- archaic form: LANGUAGE="JavaScript" -->

function selectAll(rbtnValue) {
var i = 0;
objElems = document.t4.elements;
for(i=0;i<objElems.length;i++){
if (objElems[i].value==rbtnValue) { objElems[i].checked = true; }
}
}
</SCRIPT>

</HEAD>
<BODY>
<form name="t4">
<table>
<tr>
<td> <input type='radio' name='one' value='approve' /> Approve </td>
<td> <input type='radio' name='one' value='disapprove' /> Disapprove </td>
</tr>
<tr>
<td> <input type='radio' name='two' value='approve' /> Approve </td>
<td> <input type='radio' name='two' value='disapprove' /> Disapprove </td>
</tr>
<tr>
<td> <input type="button" value="select all approve" onclick="selectAll('approve')"></td>
<td> <input type="button" value="select all disapprove" onclick="selectAll('disapprove')"></td>
</tr>
</table>

</form>
</body>
</HTML>

Note line-by-line differences in the table creation.

Thanks for the answer!!, very much appreciated.

jmrker
07-21-2011, 03:18 PM
You're most welcome.
Happy to help.

Now you should mark the threads on both forums resolved if you are satisfied with the answer.

Good Luck!
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum