...

View Full Version : Help!



brandond424
03-23-2012, 08:13 PM
This is simple but not simple enough for me. What I am trying to do this have a list of checkboxes as such:

<input type="checkbox" name"Checkbox1" />
<input type="checkbox" name"Checkbox2" />
<input type="checkbox" name"Checkbox3" />
<input type="checkbox" name"Checkbox4" />
<input type="checkbox" name"Checkbox5" />


I want to detect when a user clicks on the checkbox and then display the name of the checkbox in an textarea. I've tried this before but it displayed the variables in an array with commas and I rather have the output as follows:

Checkbox1
Checkbox2
Checkbox3
etc... (depending on what the user clicks)

I also want to make sure that these variables are still in an array so that I can eventually use the data for my next step.

array[0] = "Checkbox1";
array[1] = "Checkbox2";
(depending on what the user clicks)


PLEASE HELP.

SamHuff
03-23-2012, 08:39 PM
feel free to ask questions. i put an alert box in the function so you can easily see the array grow



<script type="text/javascript">
var boxArray = [];

function display(checkbox){
textarea = document.getElementById("checkDisplay");
textarea.innerText = checkbox.name;
boxArray.push(checkbox.name);
alert(boxArray);
}
</script>


<html>

<input type="checkbox" onclick="display(this);" name="Checkbox1" />
<textarea id="checkDisplay" rows="2" cols="20"></textarea>

</html>

brandond424
03-23-2012, 08:54 PM
Actually I might need to clarify more.

I want the textbox to display the boxArray and update whenever a checkbox is checked or unchecked. also without any comma separation.

And I want to prevent the same value being added to the array.

SamHuff
03-23-2012, 09:25 PM
<script type="text/javascript">
var boxArray = [];
var newline = "";

function display(checkbox){
textarea = document.getElementById("checkDisplay");
if(textarea.innerText.search(checkbox.name) == -1){
textarea.innerText += newline + checkbox.name;
boxArray.push(checkbox.name);
}
newline = "\n";
}
</script>


<html>

<input type="checkbox" onclick="display(this);" name="Checkbox1" />
<input type="checkbox" onclick="display(this);" name="Checkbox2" />
<textarea id="checkDisplay" rows="2" cols="20"></textarea>

</html>

brandond424
03-23-2012, 09:33 PM
Nope close! but I was looking for something more like this..

<script type="text/javascript">
var boxArray = [];

function display(checkbox){
textarea = document.getElementById("checkDisplay");
boxArray.push(checkbox.name + "\r\n");

textarea.innerText = boxArray;

}
</script>


Only thing im missing now is the removal of the commas from the textarea, and when you uncheck a checkbox the value is removed from both the array and the textbox.

SamHuff
03-23-2012, 09:57 PM
you probably don't want "\r\n" in your array and the code you just posted also does not check for duplicates and you can not insert the array into a text area without getting the commas.

Old Pedant
03-23-2012, 10:19 PM
K.I.S.S.

Assuming the checkboxes can all be grouped in a <div> it's easy.

(Would also be easy if these were only checkboxes in the <form>.
Would also be easy if you gave a class= to them that was not shared by any other form elements.)




function displayDBs()
{
var cbs = document.getElementById("CBgroup").getElementsByTagName("input");
var list = [];
for ( var c = 0; c < cbs.length; ++c )
{
var cb;
if ( cb.checked ) list.push( cb.name );
}
document.forms[0].checkDisplay.value = list.join("\n");
}
</script>

...


<form>
<div id="CBgroup">
<input type="checkbox" onclick="displayCBs();" name="Checkbox1" />
<input type="checkbox" onclick="displayCBs();" name="Checkbox2" />
<input type="checkbox" onclick="displayCBs();" name="Checkbox3" />
<input type="checkbox" onclick="displayCBs();" name="Checkbox4" />
</div>

<textarea name="checkDisplay" rows="4" cols="20"></textarea>
...
</form>

Old Pedant
03-23-2012, 10:22 PM
If these are the only checkboxes in the <form> you can ditch the grouping DIV and do:



function displayDBs()
{
var form = document.forms[0];
var list = [];
for ( var e = 0; e < form.elements.length; ++e )
{
var elem = form.elements[e];
if ( elem.type == "checkbox" && elem.checked ) list.push( elem.name );
]
form.checkDisplay.value = list.join("\n");
}

Or if you gave them all the same classname (e.g, <input class="zamboni" type="checkbox" ...>) then


function displayDBs()
{
var form = document.forms[0];
var list = [];
for ( var e = 0; e < form.elements.length; ++e )
{
var elem = form.elements[e];
if ( elem.className == "zamboni" && elem.checked ) list.push( elem.name );
]
form.checkDisplay.value = list.join("\n");
}


THere are other ways if one of those won't work.

brandond424
03-23-2012, 11:04 PM
Yes that is perfect! thanks alot

brandond424
03-23-2012, 11:17 PM
One more thing, is there anyway I can set it up so that it access the form class name instead of

var form = document.forms[0];

Old Pedant
03-23-2012, 11:23 PM
The best thing (most modern and conforming) is to give the <form> an id:



<form id="cbDemoForm">

And then get the reference as you would any other thing with an id:


var form = document.getElementById("dbDemoForm");


Is there some reason to get the <form> by classname? Would you really have lots of <form>s on the page, each with a different class? If they each have a different class, wouldn't it work as well to give each a different id? Even in your <style> section that just means the difference between

<style type="text/css">
form.wolfram { ... }
</style>

versus

<style type="text/css">
form#wolfram { ... }
</style>

brandond424
03-23-2012, 11:35 PM
The only this is what if I have multiple checkboxes within different parts of the website. Should I just wrap the entire site in the Form ID.

What I want to is have multiple checkboxes with the same form ID, I tried that using the code you provide but it did not work. heres my example.





<form id="PLEASEWORK">

<input type="checkbox" class="DirectoryCheckBox" onclick="displayCompany();" name="Checkbox1" />
</form>

<form id="PLEASEWORK">
<input type="checkbox" class="DirectoryCheckBox" onclick="displayCompany();" name="Checkbox2" />
</form>

<form id="PLEASEWORK">
<input type="checkbox" class="DirectoryCheckBox" onclick="displayCompany();" name="Checkbox3" />
</form>

<form id="PLEASEWORK">
<input type="checkbox" class="DirectoryCheckBox" onclick="displayCompany();" name="Checkbox4" />
</form>

<form id="PLEASEWORK">
<textarea name="checkDisplay" rows="4" cols="20"></textarea>

</form>




<script type="text/javascript">

function displayCompany()
{
var form = document.getElementById("PLEASEWORK");
var list = [];
for ( var e = 0; e < form.elements.length; ++e )
{
var elem = form.elements[e];
if ( elem.className == "DirectoryCheckBox" && elem.checked ) list.push( elem.name );
}

form.checkDisplay.value = list.join("\n");



}
</script>

Old Pedant
03-23-2012, 11:40 PM
No no...an ID *MUST* be UNIQUE on a page! You can't use the same ID more than once.

But...

But normally, it is a bad idea to have more than one <form> per page. If you are sending the <form> contents to some server-side code (e.g., PHP/ASP/JSP) then you can never send the contents of more than one <form>.

Why do you need multiple <form>s??

brandond424
03-23-2012, 11:49 PM
What Im doing is building a directory, and I want to add a function where the user can check a box and the company gets added to a list, so they can send a request to all the companies on a list. The directory is generated using a while loop and getting data from a database.

Now I want to incorporate the checkbox into the while loop but since there's always gonna be more than one company there's gonna be multiple forms with the same Ids as well. Which won't work. So now I need another way to handle this.

Old Pedant
03-24-2012, 12:08 AM
I still don't see the reason for the multiple forms. Eventually, you are going to have to send this information to a server if you expect the data to be saved in your system. (It could only be saved on the user's machine if you don't send it to the server...and even then only in a limited way.)

And as I said, you can *NOT* send the contents of more than one <form> to the server. [Okay, okay...there are tricky ways to do it. Way beyond the scope of this thread.]

So you want one <form>. Really.

And another thing to realize is that the IDs in a <form> are *USELESS* when you send the data to the server. They are *NEVER* sent. ONLY the names of <form> elements are sent.

So you simply have to give your elements unique names.

For example:

<form ...>
Company 1:
<input name="company_1" />
<input type="checkbox" name="company_1_box1" />
<input type="checkbox" name="company_1_box2" />

Company 2:
<input name="company_2" />
<input type="checkbox" name="company_2_box1" />
<input type="checkbox" name="company_2_box2" />

... and so on ...
</form>


But I don't know enough about your total application to know if this makes sense to you.

Old Pedant
03-24-2012, 12:09 AM
Oh, and generating that kind of <form> and those kinds of names is easy from server side code.

Just have a counter and as you loop throgh the records from the DB you increment it once per company.

brandond424
03-24-2012, 12:16 AM
Yea that's what I'm thinking about doing, just making the form ids unique to the company name then calling them in the JavaScript.

But you think putting the entire directory within the form id wouldn't work?

Old Pedant
03-24-2012, 01:28 AM
form ids

One more time: ids are useless for sending data to the server. Use form field names

*******

I don't understand this sentence at all:


you think putting the entire directory within the form id wouldn't work?

I don't know what you mean by "form id". But I *said* that you *should* put the entire directory inside *ONE* <form>.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum