How can you show a radio button selection on a refreshed page - javascript

I am new to coding and I apologise if my English is bad. I have a group of radio buttons and when I clicked it, It shows my tables but filtered for the selection. So if maths is selected from the 3, only the records with maths will be shown then I can export or print this data. but the problem is that when I selection maths it unchecks the radio so the export button cant be pressed because there is no button selected.
Is there any way to keep the button selected?
I try to use localStorage.setItem("radio", value); but this did not work too
my html and script:
<div>
<input type="radio" name="download" id="1" value="/mathsrecord"/>Math <br />
<input type="radio" name="download" id="2" value="/englishrecord"/>English <br />
<input type="radio" name="download" id="2" value="/accountingrecord"/>Acc <br />
<input type="radio" name="download" id="3" value="/all"/>All <br />
</div>
<button type="button" class="btn btn-primary" id="download" value="download">Export to Excel</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$('input[type="radio"]').on('click', function() {
window.location = $(this).val();
localStorage.setItem("radio", value);
});
</script>
<script>
var radio_1 = document.getElementById('1');
var radio_2 = document.getElementById('2');
var radio_3 = document.getElementById('3');
var button = document.getElementById('download');
button.onclick = downloadFile;
function downloadFile() {
if(radio_1.checked) {
window.open("/exportmath/excel");
}else if(radio_2.checked) {
window.open("/exporteng/excel");
} else if(radio_3.checked) {
window.open("/exportacc/excel");
}
}</script>

You need to set the value back to radio button after reloading a page.
Like this
var itemValue = localStorage.getItem("radio");
if (itemValue !== null) {
$("input[value=\""+itemValue+"\"]").click();
}

Related

how to update sub attributes in html custom button input via javascript

I want to update data-percent value on a radiobutton click before clicking the update button
html:
<input type="radio" name="percentage" value="50" onclick="changeVal(this.value)"> Happy 50 percent</input>
</br>
<input type="radio" name="percentage" value="75" onclick="changeVal(this.value)"> Happy 75 percent</input>
</br>
<button class="btn btn-danger my-btn" id = "myUpdateBtn" data-id="1" data-name="John" data-summary="John is Happy" data-percent="50" >Click to Update</button>
javascript: my script function does not update button sub attribute value. please help.
changeVal(val){
alert(val);
document.getElementById("myUpdateBtn").value('data-price') = val;
}
In order to access data attributes you have to do it like this:
var val = document.getElementById('21').dataset.id;
var msg = document.getElementById('21').dataset.name;
alert(val); //Alert '21'
alert(msg); //Alert 'HiDiv'
document.getElementById('21').dataset.lastName = 'Rod'; //Create new data attribute
console.log(document.getElementById('21')); //View changes
<div data-id='21' id='21' data-name = 'HiDiv'>
</div>

Remove div on changing the radio button

There are two radio buttons. (Javascript)Upon selecting 1st option the div class must be removed which is in another page and upon selecting 2nd option the div must be shown and this execution should happen only after clicking on submit button.
Any help highly appreciated.
<input type="radio" name="radio" id="radio1">Regular Shipping
<input type="radio" name="radio" id="radio2">COD Shopping
<input type="submit" class="btn" value="SUBMIT">
<!----------The following div is in another page------>
<div class="test">Lorem Ipusm</div>
You can try with below solution:
document.getElementById('submit').addEventListener('click', change_value);
function change_value(){
var radioOptions = document.getElementsByName('radio');
var selected = '';
for (var i = 0; i < radioOptions.length; i++) {
if (radioOptions[i].checked) {
selected = radioOptions[i].id
break;
}
}
if(selected == 'radio1'){
document.getElementsByClassName('test')[0].style.display = 'none';
} else if (selected == 'radio2'){
document.getElementsByClassName('test')[0].style.display = 'block';
} else {
alert('select option first!');
}
}
<input type="radio" name="radio" id="radio1">Regular Shipping
<input type="radio" name="radio" id="radio2">COD Shopping
<input type="submit" id='submit' class="btn" value="SUBMIT">
<!----------The following div is in another page------>
<div class="test">Lorem Ipusm</div>
In above code I just hidden/display the first element with className is 'test', incase you want to apply for all, you need a loop to do it.

How to show jquery dialog with radio buttons when checkbox is checked and post value in textbox

I have 41 checkboxes like this
HTML
<input id="1" type="checkbox" onclick="updatebox()" />
<input id="2" type="checkbox" onclick="updatebox()" />
<input id="3" type="checkbox" onclick="updatebox()" />
<input id="4" type="checkbox" onclick="updatebox()" />
Javascript
<script type="text/javascript">
function updatebox()
{
var textbox = document.getElementById("list");
var values = [];
if(document.getElementById('1').checked) {values.push("1");}
if(document.getElementById('2').checked) {values.push("2");}
if(document.getElementById('3').checked) {values.push("3");}
if(document.getElementById('4').checked) {values.push("4");}
textbox.value = values.join(", ");
}
</script>
When checkbox is checked the value is posted in textbox,
now what i want is when the user clicks the checkbox the jquery dialog popups and the user will have two radio buttons with Male or Female options along with ok button so when the user will click on ok the value should be posted on textbox depending on selection M for male F for female along with number like 1M or 1F, 2M or 2F and so on.
P.S user can select multiple checkboxes.
Thanks You!
Here is something that does what you want. HTML:
<body>
<form id="form">
<input id="1" type="checkbox" /> 1
<input id="2" type="checkbox" /> 2
<input id="3" type="checkbox" /> 3
<input id="4" type="checkbox" /> 4
...
<input id="10" type="checkbox" /> 10
...
<input id="41" type="checkbox" /> 41
<input id="list" />
</form>
<div id="prompt" style="display:none;" title="Gender">
<form>
<input type="radio" name="gender" id="radio" value="male" />
<label for="radio">Male</label>
<input type="radio" name="gender" id="radio2" value="female" />
<label for="radio2">Female</label>
</form>
</div>
</body>
The JavaScript:
$(function() {
var form = document.getElementById("form");
var textbox = document.getElementById("list");
var $prompt = $("#prompt");
// We record what is currently checked, and the user's answers in this `pairs` object.
var pairs = [];
// Listen to `change` events.
$("input[type='checkbox']", form).on('change', function (ev) {
var check = ev.target;
if (check.checked) {
// Checked, so prompt and record.
$prompt.dialog({
modal: true,
buttons: {
"Ok": function() {
var gender = $prompt.find("input[name='gender']:checked")[0];
var letter = {"male":"M", "female":"F"}[gender.value];
pairs[check.id] = '' + check.id + letter;
$( this ).dialog( "close" );
refresh();
}
}
});
}
else {
// Unchecked, so forget it.
delete pairs[check.id];
refresh();
}
function refresh() {
// Generate what we must now display in the textbox and refresh it.
// We walk the list.
var keys = Object.keys(pairs);
var values = [];
for (var i = 0, key; (key = keys[i]); ++i) {
values.push(pairs[key]);
}
textbox.value = values.join(", ");
}
});
});
Here is a jsbin with the code above.
Salient points:
This code adds the event handlers using JavaScript rather than use onclick in the HTML. It is not recommended to associated handlers directly in the HTML.
It listens to the change event rather than click. Some clicks can sometimes not result in a change to an input element.
It uses $.dialog to prompt the user for M, F.
The refresh function is what recomputes the text field.
It keeps a record of what is currently checked rather than requery for all the check boxes when one of them changes.
function updatebox()
{
var textbox = document.getElementById("list");
var values = [];
for (var i = 1; i <= 41; ++i) {
var id = '' + i;
if (document.getElementById(id).checked) {
var gender = prompt('Male (M) or female (F)?');
values.push(gender + id);
}
}
textbox.value = values.join(", ");
}
A few things to note:
I got rid of all that code repetition by simply using a for loop from 1 to 41.
I also fixed the strange indentation you had there.
You may want to use a method of getting user input other than prompt, but it'll work the same way.
(If you're going to keep using prompt, you might also want to add input validation as well to make sure the user didn't input something other than M or F.)

Checkbox new state not reflecting

I have shown the problem at http://jsfiddle.net/7ZpCW/1/
I have implemented the code such that when I click on checkbox or text next to it, checkbox should be selected/de-selected depending upon its previous state.
The problem is when I click on text, though checkbox is getting checked but the alert message is getting executed only the number of times the previous checkboxes were selected.
While when I click on checkbox alert message is executed based on current state.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<span id="MYARRAYloader_collapse" class = "w195" style="display:block">
<div class="sp15"> </div>
<div class="lf fs12 lh15" style="padding-left:10px;">
<input type="checkbox" name="MYARRAY[]" id="MYARRAY0" value="ALL" checked class="chbx checkbox-selector1">
All
<br>
<input type="checkbox" name="MYARRAY[]" value="V" class="chbx checkbox-selector1">
Opt1
<span class="gray t11">(42)</span>
<br>
<input type="checkbox" name="MYARRAY[]" value="N" class="chbx checkbox-selector1">
Opt2
<span class="gray t11">(38)</span>
<br>
</div>
<div class="sp12"> </div>
</span>
<script>
$('.checkbox-selector').click(function() {
var chb = $(this).prev();
chb.click();
return false;
})
$('.checkbox-selector1').click(function() {
var chb , chb1 , action;
chb= $(this);
clusterName = chb.attr('name');
clusterVal = chb.attr('value');
var array = new Array();
$('input[name="'+clusterName+'"]:checked').each(function(i,el){
alert('Count Me');
chb1 = $(this);
if(clusterVal == 'ALL')
{
if(chb1.attr('value')!='ALL')
{
chb1.attr("checked","");
}
else
array.push($(el).val());
}
else
{
if(chb1.attr('value')=='ALL')
{
chb1.attr("checked","");
}
else
{
array.push($(el).val());
}
}
});
});
</script>
You are seriously convoluting this problem. You can make the text clickable simply by wrapping the checkbox and text in a label.
<label><input type="checkbox" /> This is some text</label>
<label><input type="checkbox" /> This is some text</label>
<label><input type="checkbox" /> This is some text</label>
jsFiddle: http://jsfiddle.net/7ZpCW/
​
You should really format your code like this to make it more semantic. But you won't. So you can fix your code by replacing this:
$('.checkbox-selector1').click( ... );
with this:
$('.checkbox-selector1').change( ... );
jsFiddle: http://jsfiddle.net/7ZpCW/2/

Javascript Radiobutton Group Validation

I would like your help to develop a javascript function to validate if one of the following radiobutton group (IDType) is selected and which value is checked and view error message in (ValidationError) division in case no radio button selected ??
<td>
<div>
<span>
<input type="radio" name="IDType" id="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" id="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
</div>
</div>
</td>
Thanks for your help.....
First of all, as said my collegues, you cannot have the same id ("IDType") for both your radio buttons.
Here is a solution with javascript only, without any jquery.
<html>
<head>
<script type="text/javascript">
function Validate() {
var radios = document.getElementsByName('IDType')
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
alert("Selected Value = " + radios[i].value);
return true; // checked
}
};
// not checked, show error
document.getElementById('ValidationError').innerHTML = 'Error!!!';
return false;
}
</script>
</head>
<body>
<form>
<div>
<span>
<input type="radio" name="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
</div>
</div>
<input type="submit" value="Submit" onclick="return Validate();" />
</form>
</body>
</html>
function validateRadioButtons(){
var radio = $('input:radio[name="IDType"]:checked');
if(radio.length == 0)//no buttons selected
{
$('ValidationError').text("you haven't selected any buttons!");
return;
}
$('ValidationError').text(radio.val()+' is selected');
}
ps: in order for this to work, you should consider using unique id's for dom elements. you cannot have the same id ("IDType") for both your radio buttons.

Categories