Display the value of multiple checkboxes in another page after submit - javascript

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);

Related

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()
});
});

Add Value from One Text Input Field to A Pre Populated Input Field

I have an input field that gets populated by the values of checkboxes in a form. That part works perfectly fine, so the input field labeled total will display the sum of checkbox1 + checkbox2 etc. depending on which boxes are checked. My client added the extra obstacle of having a text input field where users can manually enter any additional costs and this gets added to the sum of total as well.
This is what the form currently looks like:
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox" id="outside" class="sum" value="1" data-toggle="checkbox"/>
Outside Wash
</label>
</div><br/>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox" id="aclean" class="sum" value="1" data-toggle="checkbox"/>
A - Clean: Wash Vacuum, Windows, Wheels/Tires, Wax
</label>
</div><br/>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox" id="bclean" class="sum" value="1" data-toggle="checkbox">
B - Clean: Same as A above <em>PLUS:</em> Shampoo Interior, Clean/Dress Interior Panels, Remove Bugs/Tar.
</label>
</div><br/>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox" id="cclean" class="sum" value="1" data-toggle="checkbox">
C - Clean: Same as B above <em>PLUS:</em> Compound Polish Exterior, Clean/Dress Moldings as Needed.
</label>
</div>
These are the 2 text input fields. The total field currently grabs the sum of those checkboxes. The inputSpecial field is where the user will manually type in any additional charges.
<label for="inputSpecial">Special Price</label><br/>
<input type="special" class="form-controlv sum" id="inputSpecial" placeholder="Enter Price for Any Additional Services">
<label for="total"><strong>Total Price</strong></label><br/>
<input type="text" class="form-control" id="total">
And lastly, here is the javascript that is running behind the form and adding the values. I'd like to build on this code rather than scrapping it for something else.
$(document).ready(function() {
function updateSum() {
$("#total").val($(".sum:checked").length);
}
// run the update on every checkbox change and on startup
$("input.sum").change(updateSum);
updateSum();
})
You want to use parseFloat when adding the value else you will add concatenate a string of numbers.
Checking to see if the value isNaN will also handle any invalid values and use 0 instead of NaN.
Add the change event to handle changed to #inputSpecial as well. Also changed length to value to get valid sum of values.
https://jsfiddle.net/SeanWessell/gwco6uj3/
$(document).ready(function() {
function updateSum() {
var total = 0;
var $special = $('#inputSpecial');
$(".sum:checked").each(function() {
var val = isNaN(parseFloat(this.value)) ? 0 : parseFloat(this.value);
total += val;
})
var addl = isNaN(parseFloat($special.val())) ? 0 : parseFloat($special.val());
$("#total").val(Math.round((total + addl) * 100) / 100);
}
// run the update on every checkbox change and on startup
$("input.sum,#inputSpecial").change(updateSum);
updateSum();
});
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN
You could do it like this:
$("#total").val($(".sum:checked").length + parseFloat($("#inputSpecial").val());
However, I don't think that $(".sum:checked").length is the best way to do the initial summation. It assumes that all four checkboxes have the same monetary value (which is exactly $1).
So you'd probably want something more like:
var sumTotal = 0;
$(".sum:checked").each(function() {
sumTotal += $(this).val();
});
sumTotal += parseFloat($("#inputSpecial").val()
$("#total").val(sumTotal);

Repeative values occur in Autocomplete jquery

I am working in ASP.NET Project.My task is to Prevent the repative values occured in Textbox.Textbox is bound with autocomplete and appending text from checkboxlist as like in the below picture
! https://drive.google.com/file/d/0B5OPwgmPG6QpTHBTdVlFaldRaEE/view?usp=sharing
After i appended the content from checkbox list to textbox means it is repeating value,if i typed it inital time it won't.And my task is to show unique values based on the textbox content.
My project files are in the below link..please help me out guys
https://drive.google.com/file/d/0B5OPwgmPG6QpS3NMNElGN2k4RzQ/view?usp=sharing
Based on my answer I gave you in the other thread (https://stackoverflow.com/a/28828842/4569271) I extended my solution to only display unique values:
$(function() {
$('input[type="checkbox"]').change(function() {
// Reset output:
$("#output").html('');
// remeber all unique values in this array:
var tmpArray = new Array();
// Repeat for all checked checkboxes:
var checkboxes = $('input[type="checkbox"]:checked').each(function() {
// Get value from checkbox:
var textToAppend = $(this).val();
// Check if value from checkbox was added already:
if (jQuery.inArray(textToAppend, tmpArray) == -1) {
// add entry to array so it will be not added again:
tmpArray.push(textToAppend);
var existingText = $("#output").html();
// Append seperator (';') if neccessary:
if (existingText != '') {
existingText = existingText + ";";
}
// Print out append value:
$("#output").html(existingText + textToAppend);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Select:</h2>
<input type="checkbox" value="Jan" />Jan
<input type="checkbox" value="Jan" />Jan
<input type="checkbox" value="Jan" />Jan
<input type="checkbox" value="Feb" />Feb
<input type="checkbox" value="Feb" />Feb
<input type="checkbox" value="Feb" />Feb
<input type="checkbox" value="Mar" />Mar
<input type="checkbox" value="Mar" />Mar
<input type="checkbox" value="Mar" />Mar
<h2>Output:</h2>
<div id="output"></div>
Based on your description, I am not sure if this is the solution you were looking for? But maybe it helps.

Issue with processing form i ajax with radio buttons

I have this script which makes possible the insertion of some data using ajax and php.
Now , all works fine, except the radio buttons (the select options work fine as well) , and it takes the first value of the radio buttons..
Why is this happening?
Here is the code:
<div id="formfields" ><label>Tipologia Pdv: </label>
<input type="radio" name="tipologia_pdv" id="tipologia_pdv" value="Iper" style="width:40px;" /><span > Iper</span>
<input type="radio" name="tipologia_pdv" id="tipologia_pdv"
value="Super" style="width:40px;" /><span > Super</span><br /><br /></div>
<div id="formfields" ><label>Richiesta Ccnl: </label>
<input type="radio" name="richiesta_ccnl" id="richiesta_ccnl" value="Si" style="width:40px;"/><span> Si</span>
<input type="radio" name="richiesta_ccnl" id="richiesta_ccnl"
value="No" style="width:40px;"/><span> No</span><br /><br /></div>
The javascript:
// Fetch data from input fields.
var js_tipologia_pdv = $("#tipologia_pdv").val();
var js_richiesta_ccnl = $("#richiesta_ccnl").val();
//let's put all data together
var myData = 'postTipologia_pdv='+ js_tipologia_pdv + '&postRichiesta_ccnl='+ js_richiesta_ccnl + '&postDistretto_pdv=' + js_distretto_pdv + '&postCoopva_pdv=' + js_coopva_pdv + '&postNome_pdv=' + js_nome_pdv;
In php they go something like this:
$postTipologia_pdv = filter_var($_POST["postTipologia_pdv"], FILTER_SANITIZE_STRING);
$postRichiesta_ccnl = filter_var($_POST["postRichiesta_ccnl"], FILTER_SANITIZE_STRING);
Making my comments into an answer:
1) Your id attributes need to be unique.
2) Get the value of the selected radio button using something like: $('input:radio[name=tipologia_pdv]:checked').val();

Trying to find selected radio button. What's wrong?

I can read out text field values, but when I try to find the selected radio button, I get nothing.
$(document).ready(function(){
$("form#create_form").submit(function() {
var title = $('#title').attr('value');
var owner = $('#owner').attr('value');
var users = $('#users').attr('value');
var groups = $('#groups').attr('value');
var begin_date = $('#begin_date').attr('value');
var end_date = $('#end_date').attr('value');
// get selected radio button
var type = '';
for (i=0; i<document.forms[0].type.length; i++) {
if (document.forms[0].type[i].checked) {
type = document.forms[0].type[i].value;
}
}
HTML:
<div class="create-new">
<form id="create_form" name="create_form" action="" method="post">
...
<input name="type" id="type" value="individuel" type="radio" /> Individuel <br/>
<input name="type" id="type" value="course" type="radio" /> Course <br/>
<button class="n" type="submit">Create</button>
</form>
What am I doing wrong?
I would suggest an alternative method to getting the selected radio button (since you are already using jQuery):
$('input:radio[name=type]:checked').val();
This solution is an example on .val().
The above solution is much more succinct, and you avoid any conflicts in the future if other forms are added (i.e you can avoid the potentially hazardous document.forms[0]).
Update
I tested your original function with the following fiddle and it works:
http://jsfiddle.net/nujh2/
The only change I made was adding a var in front of the loop variable i.

Categories