We Keep Coding

Display the value of multiple checkboxes in another page after submit

I need to display the value of multiple checkbox in another page using local storage on form submit.
This is the 1st page where I'm having my checkbox.
<p id="qualifications">Qualifications:</p>
<label for="checkbox1">BE</label>
<input type="checkbox" value="BE" id="checkbox1">
<label for="checkbox2">MCA</label>
<input type="checkbox" value="MCA" id="checkbox2">
This is the second page where I want to show the the values such as MCA or BE on form submit. It was easy to show in the popup window but not in other page.
<p> Qualification: <span id="display_qualifications"></span> </p>
This is the script I'm using and it's showing null in 2nd page.
// qualification storing value of checkbox now need to store inside localstorage
var qualification = $("#checkbox1").val();
var qualification1 = $("#checkbox2").val();
localStorage.setItem('qualification1', qualification1);
localStorage.setItem('qualification', qualification);
var qualification = localStorage.getItem("qualification");
var qualification1 = localStorage.getItem("qualification1");
$("#display_qualifications").text(qualification);
$("#display_qualifications").text(qualification1);

Its showing null because you are not setting values of checkboxes in first page.
<p id="qualifications">Qualifications:</p>
<label for="checkbox1">BE</label>
<input type="checkbox" value="BE" id="checkbox1">
<label for="checkbox2">MCA</label>
<input type="checkbox" value="MCA" id="checkbox2">
Assign value MCA and BE to checkboxes.
Update
Got the error. You have misspelled "Qualification".
var qualifiaction = $("#checkbox1").val();
var qualifiaction1 = $("#checkbox2").val();
localStorage.setItem('qualification1', qualification1);
localStorage.setItem('qualification', qualification);
qualifiaction != qualification And qualifiaction1 != qualification1
So change the var name like this.
var qualification = $("#checkbox1").val();
var qualification1 = $("#checkbox2").val();
localStorage.setItem('qualification1', qualification1);
localStorage.setItem('qualification', qualification);
Also check all the spellings in your code.
Update 2
Working Demo jsfiddle

Here you replacing the value and missing value attribute -
$("#display_qualifications").text(qualification);
$("#display_qualifications").text(qualification1);
You can see display_qualifications area can't show both value so you need to concat both value like -
var concatString = qualification + "" + qualification1;
console.log(concatString)

1. Set values
<p id="qualifications">Qualifications:</p>
<label for="checkbox1">BE</label>
<input type="checkbox" value="BE" id="checkbox1">
<label for="checkbox2">MCA</label>
<input type="checkbox" value="MCA" id="checkbox2">
2. Append result and not overwrite
$("#display_qualifications").text(qualification + qualification1);

get multiple checkbox checked value in c#

In my web form I am generating multiple checkboxes dynamically. hence they are not in the control. I am trying to get the value using Request.Form[name] but it is not correct
<input type="checkbox" name="Suppresision" value="Suppresision" />Suppresision
Now I have a add button which dynamically (using Javascript) add more similar checkbox. So within my table element now I have
<input type="checkbox" name="Suppresision" value="Suppresision" />Suppresision
<input type="checkbox" name="Suppresision" value="Suppresision" />Suppresision
<input type="checkbox" name="Suppresision" value="Suppresision" />Suppresision
How do I try to get the values of all three ? I am doing the same for textbox but when I use Request.Form[textbox name] I get a comma separated values of all of them. But for the checkbox I do Request.Form["Suppresision"] I only get one value that too Suppresision instead of checked or not checked.How do I get all three value even if it not checked

If you absolutely need to get a list of all the checkbox controls you have dynamically added you could assemble them into a hidden input when you submit the form.
You need to include a hidden input for each set of checkboxes you add with a name like name="[checkbox name]_allValues"
<input type="checkbox" name="Suppresision" value="Suppresision1" />Suppresision 1
<input type="checkbox" name="Suppresision" value="Suppresision2" />Suppresision 2
<input type="checkbox" name="Suppresision" value="Suppresision3"/>Suppresision 3
<input type='hidden' value='' name="Suppresision_allVals">
Then add in this jQuery to loop the checkbox groups and you will have access to the full list of values for each checkbox on the server.
$(document.forms[0]).submit(function(event){
$('input[type=checkbox]').each(function( index ) { //loop all checkboxes
$itm = $( this );
$allVals = $('input[name=' + $itm.attr('name') + '_allVals]').first();
if ($allVals.length) { //see if we have a hidden input
$allVals.val($allVals.val()
+ ($allVals.val().length > 0 ? ',' : ' ') //add delemiter
+ ($itm.is(':checked') ? $itm.val() : '')); //add value
}
});
});
This way you will have access to the full list in Request.Form["Suppresision_allVals"] with blank values for unchecked boxes similar to what you have for empty textbox controls now.

You have same name attribute value for the three checkboxes. You should have different to make sure they can be read separately from the request form's collection on the server side. Also, in case of checkboxes, it should be checked attribute. Hopefully this will put you the right direction.
<input type="checkbox" name="Suppresision1" checked="checked" />
<input type="checkbox" name="Suppresision2" checked="" />
<input type="checkbox" name="Suppresision3" checked="" />

<input type="checkbox" class="chkItems" name="Suppresision1" checked="checked" />
<input type="checkbox" class="chkItems" name="Suppresision2" checked="" />
<input type="checkbox" class="chkItems" name="Suppresision3" checked="" />
var chkValue = [];
$('.chkItems:checked').each(function(i, e) {
chkValue.push({
chkItem : $(this).val()
});
});

php - if radio button selected, select value from table of database

I'm using codeigniter and i have some issue with radio button, javascript, and php.
The radio button is used for selecting type of customer. This is my radio button on view file
<input type="radio" name="customerType" value="Reseller" /> Reseller
<input type="radio" name="customerType" value="Dropshipper" /> Dropshipper
<input type="text" class="form-control" value ="" name="customerCode" aria-describedby="basic-addon1" />
When Reseller radio button selected, I want the value of customerCode will showing codename like "RSL", and when Dropshipper selected, the value of customerCode showing "DRP" automatically.
Please advice,
Thank you very much :)
============================AFTER SOLVED============================
Hi guys, after this case was solved i want to share my code.
as we know, this thread will auto generating value of form input depends by radio button. And we got it! Thanks to Ashwani Goyal :)
And now, I want to give a numerical character on this form input. So this is my model code :
function getCustomerCodeRSL(){ //this function will generating when "RSL" radio button selected
$q = $this->db->query("select MAX(RIGHT(customer_code,3)) as codeMax from customer where customer_code like 'RSL%'");
$code = "";
if($q->num_rows()>0){
foreach($q->result() as $k){
$tmp = ((int)$k->codeMax)+1;
$code = sprintf("%03s", $tmp);
}
}else{
$code = "001";
}
return $code;
}
function getCustomerCodeDRP(){ //this function will generating when "DRP" radio button selected
$q = $this->db->query("select MAX(RIGHT(customer_code,3)) as codeMax from customer where customer_code like 'DRP%'");
$code = "";
if($q->num_rows()>0){
foreach($q->result() as $k){
$tmp = ((int)$k->codeMax)+1;
$code = sprintf("%03s", $tmp);
}
}else{
$code = "001";
}
return $code;
}
And this is my controller :
function cCustomer(){
$data = array(
'data_customer' => $this->Model_App->getAllData('customer'),
'total_customer' => $this->Model_App->counterAllRowTable('customer'),
'cust_codeRSL' => $this->Model_App->getCustomerCodeRSL(),
'cust_codeDRP' => $this->Model_App->getCustomerCodeDRP(),
);
$this->load->view('admin/header');
$this->load->view('admin/vCustomer', $data);
$this->load->view('admin/footer');
}
So, the output will be like this :
if DRP selected then the output is; DRP001, DRP002, ... and more
if RSL selected then the output is; RSL001, RSL002, ... and more.
hope it will helping someone else out there who need the same thing with me :)

Try the following:
$("input[name='customerType']").click(function(){
$("input[name='customerCode']").val( $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="customerType" value="RSL" id="rsl" /><label for="rsl">Reseller</label>
<input type="radio" name="customerType" value="DSL" id="dsl"/> <label for="dsl">Dropshipper</label>
<input type="text" class="form-control" value ="" name="customerCode" aria-describedby="basic-addon1" />

i think thats it you want fiddle
<input type="radio" name="customerType" value="RSL" /> Reseller
<input type="radio" name="customerType" value="DSL" /> Dropshipper
<input type="text" class="form-control" value ="" name="customerCode" aria-describedby="basic-addon1" /
$("input[name='customerType']").click(function(){
$("input[name='customerCode']").val( $(this).val());
});

if($_POST['customerType'] == "Reseller"){
$_POST['customerCode'] = "RSL";
}elseif($_POST['customerType'] == "Dropshipper"){
$_POST['customerCode'] = "DRP";
}
Easiest way with only php

Iterating through hidden inputs

I have a long list of checkboxes. What I need is that when someone checks a checkbox (it has a class of 'compare'), I need to populate one of 4 hidden form inputs. The idea is to compare up to four products (the ones they select via checkbox), and when the press the "Compare" button, it will send the values of the hidden inputs to a page which I can then use to query a database.
The problem I am having is using jQuery to populate the hidden form fields, but if the user unchecks a checkbox, to remove that item from the hidden input and make it available to potentially hold another value.
<input type="hidden" class="comp" name="compare_0" id="compare_0"/>
<input type="hidden" class="comp" name="compare_1" id="compare_1"/>
<input type="hidden" class="comp" name="compare_2" id="compare_2"/>
<input type="hidden" class="comp" name="compare_3" id="compare_3"/>
And the product checkboxes are like the following, with a refid containing the product ID that I need to populate the hidden fields with:
<input type="checkbox" class="compare" refid="productIDvalue"/>
<input type="checkbox" class="compare" refid="16809"/>
<input type="checkbox" class="compare" refid="27091"/>
<input type="checkbox" class="compare" refid="W3490"/>
<input type="checkbox" class="compare" refid="ST089"/>
So when an item is checked, it would then populate an open hidden form with the value of the productID:
<input type="hidden" class="comp" name="compare_0" id="compare_0" value="ST089"/>
Here is the mangled code:
$('.compare input').each(function() {
$(this).click(function(){
var me = $(this).attr("refid");
var img = $(this).attr("imgloc");
//populates a tray containing product images
$(".compareTray ul li:not(:has(>img))").first().append('<img src="' + img + '" alt="' + me + '" height="28" width="28" />');
//mangled portion
$(".comp:not([value])").value(me);
});
})
ANY assistance would be greatly appreciated.

JavaScript read radio button value in IE and FireFox

I have a simple web form that uses JavaScript for building a POST statement. In Chrome, I can use a simple line of code...
var form = document.forms['myForm'];
var env = form.env.value;
The form itself looks like this...
<form name="myForm" action='JavaScript:xmlhttpPost("/path/to/some/pythoncode.py")'>
<input type="radio" name="env" id="env" value="inside">Inside
<input type="radio" name="env" id="env" value="outside" checked="checked">Outside
<input type="radio" name="env" id="env" value="both">Both
<input type="radio" name="env" id="env" value="neither">Neither
I have some text boxes on the form that I can use the same technique to find the value (
var name = form.fname.value
with a
<input type="text" name="fname" id="fname">
However, when I submit the form and build my post, the value for the radio buttons is always undefined. It works fine in Chrome, but nothing in IE or FireFox.
I tried var env = document.getElementById('env').value, but for some reason that always defaults to the first value (inside) no matter what I select. That method also does not return a value when using Chrome.
Is there something I'm missing for reading the checked value of a radio input in FF or IE?

Try this
function getValueFromRadioButton(name) {
//Get all elements with the name
var buttons = document.getElementsByName(name);
for(var i = 0; i < buttons.length; i++) {
//Check if button is checked
var button = buttons[i];
if(button.checked) {
//Return value
return button.value;
}
}
//No radio button is selected.
return null;
}
IDs are unique so you should not use the same ID for multiple items. You can remove the all the radio button IDs if you use this function.

You are using the same ID for multiple Elements, ID is unique for element on the page.
use different IDs.
edit: names can be the same. because then the radio buttons are as a group.

As stated, the IDs should be different to be valid, but you could accomplish this by eliminating the IDs all together and using just the input name:
var form = document.forms['myForm'];
var radios = form.elements["env"];
var env = null;
for(var i=0;i<radios.length;i++) {
if(radios[i].checked == true) {
env = radios[i].value;
}
}
<form name="myForm">
<input type="radio" name="env" value="inside">Inside
<input type="radio" name="env" ivalue="outside" checked="checked">Outside
<input type="radio" name="env" value="both">Both
<input type="radio" name="env" value="neither">Neither
</form>

Short & clear on ES-2015, for use with Babel:
function getValueFromRadioButton( name ){
return [...document.getElementsByName(name)]
.reduce( (rez, btn) => (btn.checked ? btn.value : rez), null)
}
console.log( getValueFromRadioButton('payment') );
<div>
<input type="radio" name="payment" value="offline">
<input type="radio" name="payment" value="online">
<input type="radio" name="payment" value="part" checked>
<input type="radio" name="payment" value="free">
</div>

You can try this:
var form = document.querySelector('form#myForm');
var env_value = form.querySelector('[name="env"]:checked').value;