Pushing HTML checklist elements into an array with JS - javascript

I want my checklist to remember the value of the checked options. Whenever the user checks the box I want to push the value into the array, whenever he unchecks it, I want it to be deleted.
With my submit button, I want to display an alert for every checked element.
I can fill the array, but for some reason it overwrites the previous elements. Also it just won´t react to the "unchecked-state", neither does it display anything on submit.
Note: I need this to work for about 200 inputs later.
<h1>Checklist</h1>
<form>
<input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value)" value="F-Card geholt">F-Card geholt<br>
<input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value)" value="Ersti Rally">Ersti Rally <br>
<input type="checkbox" name="remember" id="remember" onclick="checkboxFunction(value)" value="TEST">TEST<br>
</form>
<script type="text/javascript">
var checkbox = document.getElementsByName("remember");
var checkboxArray = [];
function checkboxFunction(value)
{
for(var i=0, length=checkbox.length; i<length; i++)
{
if(checkbox[i].checked)
{
checkboxArray.push(value);
}
else if (!checkbox[i].checked && value == checkboxArray[i])
{
checkboxArray.splice(value);
}
}
}
function alertFunction()
{
for(var i=0, length=checkbox.length; i<length; i++)
{
if (typeof checkboxArray[i] != 'undefined')
{
alert(checkboxArray[i]);
}
}
}
</script>
<input type="button" name="alert" value="Submit" onclick="alertFunction()">

move var checkboxArray = [];
outside the checkboxFunction function
<script type="text/javascript">
var checkboxArray = [];
function checkboxFunction(value)
{
var checkbox = document.getElementsByName("remember");
for(var i=0, length=checkbox.length; i<length; i++)
{
if(checkbox[i].checked)
{
checkboxArray.push(value);
}
else if (!checkbox[i].checked && value == checkboxArray[i])
{
checkboxArray[i] = null;
}
//alert(checkboxArray[i]);
}
}
function alertFunction()
{
for(var i=0, length=checkboxArray.length; i<length; i++)
{
alert(checkboxArray[i]);
}
}
</script>

Related

JavaScript Form Validation -

I'm trying to get a basic javascript validation. For some reason it's picking up text and drop downs but not radio buttons? What am I doing wrong?
JS Fiddle
<script>
function validateForm(formId)
{
var inputs, index;
var form=document.getElementById(formId);
inputs = form.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
// deal with inputs[index] element.
if (inputs[index].value==null || inputs[index].value==""))
{
alert("Field is empty");
return false;
}
}
</script>
To validate for radio buttons, You need to go through all radio's and see which one's checked property is true.
<script>
function validateForm(){
for(i=0; i<document.form.radios.length; i++){
if(document.form.radios[i].checked==false){
c=1;
}
else{
c=0;
break;
}}
if(c==1){
alert('Please select an option');
}
}
</script>
document.form.radios.length gives the number of radio buttons.
You can also use HTML's required attribute to achieve the same functionality.
<form>
<input type="radio" name="gender" value="Male" required /> Male
<input type="radio" name="gender" value="Female" /> Female
<input type="submit" name = "sub" value="SAVE" />
</form>
Fiddle
Provided below is an approach you can take to identify if you have multiple radio buttons in your form
function hasEmptyRadio(radioMap) {
var emptyRadio = false;
for (var i in radioMap) {
if (radioMap.hasOwnProperty(i) && !radioMap[i]) {
emptyRadio = true;
break;
}
}
return emptyRadio; // return the radio object or name if required
}
function markEmptyRadios(radioMap, radioObj) {
var checked = radioObj.checked;
radioMap[radioObj.name] = radioMap[radioObj.name] || checked;
}
function validateForm(formId) {
var inputs, index;
var radioMap = {};
var form = document.getElementById(formId);
inputs = form.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
if (inputs[index].type === 'radio') {
markEmptyRadios(radioMap, inputs[index])
}
// Your check for other input type can go here
}
alert("Radio Empty check returned => " + hasEmptyRadio(radioMap));
}

how to check checkboxes in javascript

I have three checkboxes in html.
In Javascript I have variable newspaper = "jang,News,Dawn";
Now I want to check the checkboxes based on newspaper values if it contain only jang then only jang check box should be checked if it contain jang,News,Dawn then all three checkbox should be checked.
The code I have written always checked last two checkboxes which is wrong.
My code is:
var newspaper = document.forms[0].newspaper;
var a = "Jang,News";
var news = ["Jang", "Dawn", "News"]
for (i = 0; i < news.length; i++)
{
if (a.indexOf(news[i]))
{
newspaper[i].checked = true;
}
}
<input type="checkbox" name="newspaper[]" value="Jang">Jang<br />
<input type="checkbox" name="newspaper[]" value="Dawn">Dawn<br />
<input type="checkbox" name="newspaper[]" value="News">The News
If you want to do it using Javascript only, you have to do some changes in your code :
Change the name of all the checkboxes to "newspaper" (without square brackets)
<input type="checkbox" name="newspaper" value="Jang"/>Jang<br />
<input type="checkbox" name="newspaper" value="Dawn"/>Dawn<br />
<input type="checkbox" name="newspaper" value="News"/>The News
Check indexOf return value is not equal to -1 :
if (a.indexOf(news[i]) != -1) {
newspaper[i].checked = true;
}
Here is the working demo.
var newspaper = document.forms[0]["newspaper[]"];
var a = "Jang,News";
for (i = 0; i < newspaper.length; i++)
{
if(a.indexOf(newspaper[i].value) > -1){
newspaper[i].checked = true;
}
}
Yeah, I would review your code, and the names of your elements. But here, this works.
http://jsfiddle.net/3qeeox0a/
Try this-
var newspaper = document.forms[0].newspaper;
var a = "Jang,News";
var news = ["Jang","Dawn", "News"]
for (i = 0; i < news.length; i++)
{
if (a.indexOf(news[i]) != 1)
{
newspaper[i].checked = true;
}
}
Fiddle:-http://jsfiddle.net/um0y5wrp/9/
Please change the code, and replace this:
if (a.indexOf(news[i]))
{newspaper[i].checked = true;
}
by:
for(j = 0; j < newspaper.length; j++){
if(newspaper[j].value == newspaper[i].value){
if (a.indexOf(news[i])){
newspaper[j].checked = true;
}
}
}

Check/Uncheck all checkboxes in a grid view

I am trying to implement the feature of checking and unchecking all checkboxes in a grid view at once. I created a main checkbox that will be used to check all the checkboxes at once
<input id="main-checkbox" type="checkbox" name="messages-checkall" value="all" checked="checked" onclick='checkedAll();'>
The checkedAll() function is implemeted as follows
<script type='text/javaScript'>
function checkedAll () {
var inputs = document.getElementsByTagName('input');
var checkboxes = [];
if (document.getElementById('main-checkbox').checked === "checked") {check = false} else {check = true};
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'checkbox') {
inputs[i].checked = check;
}
}
}
</script>
but this is not working.
Note - I cannot create a form with all the checkboxes and then handle all the checkboxes in the form.
Please tell if you want other detail.
Change
if (document.getElementById('main-checkbox').checked === "checked") {check = false} else {check = true};
To
var check = document.getElementById('main-checkbox').checked
var objCheckBoxes = document.getElementById('containerId').getElementsByTagName('input');
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
{
objCheckBoxes.checked = true/false;
}
else
{
for(var i = 0; i < countCheckBoxes; i++)
{
objCheckBoxes[i].checked = true/false;
}
}
In html
<ul id="containerId">
<li><input type="checkbox" name="selected" value="Some text description 1"></li>
<li><input type="checkbox" name="selected" value="Some text description 2"></li>
</ul>

Javascript: Detect checked boxes isn't working with form with only 1 checkbox. Working with 2 or more

I have the function below. It gets the values from checked boxes and transfer it to a textbox. It is working... but only if the form has 2 or more checkboxes.
<script type="text/javascript">
function sendValue()
{
var all_values = '';
boxes = document.DataRequest.itens.length
for (i = 0; i < boxes; i++)
{
if (document.DataRequest.itens[i].checked)
{
all_values = all_values + document.DataRequest.itens[i].value + ","
}
}
window.opener.document.getElementById('emailto').value = all_values;
self.close();
}
</script>
<form name="DataRequest">
<input name="itens" type="checkbox" value="name1">
<input name="itens" type="checkbox" value="name2">
</form>
Am I missing something to make this work with only 1 checkbox?
When there is one item. it does not return array
function sendValue()
{
var all_values = '';
boxes = document.DataRequest.itens.length
if(boxes>1)
{
for (i = 0; i < boxes; i++)
{
if (document.DataRequest.itens[i].checked)
{
all_values = all_values + document.DataRequest.itens[i].value + ","
}
}
}
else
{
if (document.DataRequest.itens.checked)
{
all_values = document.DataRequest.itens.value
}
}
window.opener.document.getElementById('emailto').value = all_values;
self.close();
}
First, you need to give different names to your inputs :
<form name="DataRequest">
<input name="item1" type="checkbox" value="name1">
<input name="item2" type="checkbox" value="name2">
</form>
Using the same name to your inputs is technically possible in your case but a terrible practice as the name is normally what's identify for a form the different inputs.
Then, to access your inputs, you must use a different syntax. More than one version are possible but you can do this :
var boxes = document.forms['DataRequest'].getElementsByTagName('input');
var tokens = [];
for (var i=0; i<boxes.length; i++) {
if (boxes[i].checked) tokens.push(boxes[i].name+'='+boxes[i].value);
}
var all_values = tokens.join(',');
Note that the use of join avoids the trailing comma.
not sure how much compatibility you need with IE 6 - 8, but if that's not required you can use
function serializeChecked() {
var values = [];
var checked_boxes = document.querySelectorAll('form[name="DataRequest"] input[checked]');
for (var i = 0, l = checked_boxes.length; i < l; i++) {
values.push(checked_boxes[i].getAtrribute('value'))
}
return values.join(',');
}
function sendValue() {
window.opener.document.getElementById('emailto').value = serializeChecked();
}
If you do require IE support, use document.DataRequest.getElementsByTagName('input') instead of QSA and iterate through them to collect the values if they have the checked attribute.

How to manipulate form field values in javascript

I'm trying to get the value of a few checkboxes and enter them in a hidden form field.
My checkboxes look like this:
<form>
<input type="checkbox" name="chicken" id="chicken" value="chicken"/>Chicken
<input type="checkbox" name="meat" id="meat" value="meat"/>Meat
</form>
<form method="post" action="">
<input type="hidden" name="my-item-name" value="" />
<input type="submit" name="my-add-button" value=" add " />
</form>
I only need to submit the hidden field data so I'd like the value of the hidden field change when the checkbox is ticked. So if the first checkbox is ticked I'd like the value of the hidden field to become chicken and if both of them are ticked the value should be chicken,meat.
I'm using the following javascript
function SetHiddenFieldValue()
{
var checks = document.getElementsByName("checkbox");
var hiddenFieldVal = "";
for(i = 0; i < checks.length; i++)
{
if(hiddenFieldVal != "")
hiddenFieldVal += ",";
hiddenFieldVal += checks[i].value;
}
document.getElementById('my-item-name').value = hiddenFieldVal;
}
but when I add the items, it adds both of them, it doesn't check which one's been checked, is there a way to fix that, so when the first item is checked it'll only add that item and if both of them are checked, it'll add 2 items separated by comma,
for(i = 0; i < checks.length; i++)
{
if (!checks[i].checked)
continue;
....
}
You need to give the checkboxes the same name to have them grouped:
<input type="checkbox" name="food[]" id="chicken" value="chicken"/>Chicken
<input type="checkbox" name="food[]" id="meat" value="meat"/>Meat
And in your JavaScript function:
function SetHiddenFieldValue() {
var checks = document.getElementsByName("food[]");
var hiddenFieldVal = "";
for (var i=0; i<checks.length; i++) {
if (checks[i].checked) {
if (hiddenFieldVal != "")
hiddenFieldVal += ",";
hiddenFieldVal += checks[i].value;
}
}
document.getElementById('my-item-name').value = hiddenFieldVal;
}
You forgot to test for checks[i].checked
function SetHiddenFieldValue() {
var checks = document.getElementsByName("checkbox");
var hiddenFieldVal = "";
for(i = 0; i < checks.length; i++) {
if (checks[i].checked) {
if(hiddenFieldVal != "")
hiddenFieldVal += ",";
hiddenFieldVal += checks[i].value;
}
}
}
document.getElementById('my-item-name').value = hiddenFieldVal;
}
Hi your best to put the values into an array, makes it easier to then create the comma separated value. Also makes it a lot easier if you add more options later.
function SetHiddenFieldValue()
{
var checks = document.getElementsByName("checkbox");
var foods = new Array();
for (i = 0; i < checks.length; i++)
{
if (checks[i].checked)
{
foods[i] = checks[i].value;
}
}
document.getElementById('my-item-name').value = foods.join(",");
}

Categories