I have a code of multiple radio buttons (nested in tabs) and I need to save and restore all values locally. I tried with cookies but only one value was saved. I tried with "localStorage" but I think I need some help. The basic idea is to save the values on each click and restore them on "window.onload".
If it is easier I can go back to cookies! Any experience anyone? Thank you in advance.
<html>
<head>
<title>Saving RadioButtons locally</title>
</head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script src="scripts/modernizr.js"></script>
<script type="text/javascript">
//this function runs everytime there is a click from the mouse to update and save the radio values (logicaly)
function saveState() {
//gets every object from the main form to read and save it.
localStorage.setItem("flag", "set");
var data = $("#mainform").serializeArray();
$.each(data, function(i, obj) {
localStorage.setItem(obj.name, obj.value);
});
console.log(data); //console shows only one object which is the first one (pid) with one value
}
//this function must be run each time the window loads to initialize the radio values (logicaly)
function onloadfunction() {
if (localStorage.getItem("flag") == "set") {
//gets every object from the main form to read and restore it.
var data = $("#mainform").serializeArray();
$.each(data, function(i, obj) {
$("[name='" + obj.name +"']").val(localStorage.getItem(obj.name));
});
}
}
window.onload=onloadfunction;
window.onbeforeunload=saveState;
//end of ideas...............
</script>
<body>
<form id="mainform" name='mainform'>
<div id="container" class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Cid">Cid</a></li>
<li><a data-toggle="tab" href="#Bid">Bid</a></li>
<!-- first tab -->
<!-- first radio box in first tab -->
</ul>
<div class="tab-content">
<div id="Cid" class="tab-pane fade in active">
<form name='pid'>
<input type="radio" id="p40" name="p" value="40">40
<input type="radio" id="p45" name="p" value="45">45
<input type="radio" id="p50" name="p" value="50">50
</form>
<!-- second radio box in first tab -->
<form name='BName'>
<input type="radio" id="B40" name="B" value="40">40
<input type="radio" id="B45" name="B" value="45">45
</form>
</div>
<!-- second tab -->
<!-- first radio box in second tab -->
<div id="Bid" class="tab-pane fade">
<form name='HName'>
<input type="radio" id="H40" name="H" value="40">40
<input type="radio" id="H45" name="H" value="45">45
<input type="radio" id="H50" name="H" value="50">50
</form>
</div>
</form>
</body>
Related
I've been trying for a long time to make a button appear on a webpage and make the link that button goes to change depending on the radio button selected. However, so far nothing appears on my web page except for the radio buttons.
This is my code so far:
<div id="quick-book">
<script>
if (document.getElementById("radio-restaurant").checked){
document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else if (document.getElementById("radio-hotel").checked){
document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
}
</script>
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
</form>
<div name ="button">
</div>
</div>
I hope someone here can help guide me in the right direction!
You should add a function in you code and add it when click in the radio.
Something like this:
<script>
function myFunction() {
if (document.getElementById("radio-restaurant").checked){
document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else if (document.getElementById("radio-hotel").checked){
document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
}
}
</script>
<div id="quick-book">
<form onchange="myFunction()" name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onclick="document.getElementById('radio-buttons').action='';">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onclick="document.getElementById('radio-buttons').action='';">Hotel<br>
</form>
<div id="button">
</div>
</div>
And change name="button" to id="button"
First, your <script> is executed only once, not on every radio button change. And since initially nothing is checked, script does nothing. Moreover, when this script is executed, elements below are not rendered yet. You need to:
1) Move the script down, below all your divs.
2) Create a change callback to check radio buttons values
<div id="quick-book">
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onclick="change(this)">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onclick="change(this)">Hotel<br>
</form>
<div id ="button">
</div>
</div>
<script>
function change(radio) {
if (radio.checked && radio.id === "radio-restaurant") {
document.getElementById("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else {
document.getElementById("button").innerHTML = "<a href='./hotel.html'>Submit</a>"
}
}
</script>
<div id="quick-book">
<script>
function checkRadio(radio) {
if (radio.id === "radio-restaurant"){
document.getElementById("button-div").innerHTML = "<a href='./restaurant.html'>Submit</a>";
} else {
document.getElementById("button-div").innerHTML = "<a href='./hotel.html'>Submit</a>";
}
}
</script>
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onchange="checkRadio(this)">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onchange="checkRadio(this)">Hotel<br>
</form>
<div id="button-div">
</div>
</div>
Try this:
<div id="quick-book">
<script>
function $(e) {
//Just something I have found useful
return document.getElementById(e);
}
function rb_onchange(s) {
//First clean up
$("button").innerHTML = '';
//The id is added because both radio buttons
//will fire this event when one changes
//So to prevent both both conditions firing you have to add this additional condition
if (s.checked && s.id == "radio-restaurant") {
//If the radio button is checked and the id of
//said radio button is the restaurant one then add the innerHTML
$("button").innerHTML = "<a href='./restaurant.html'>Submit</a>";
}
else if (s.checked && s.id == "radio-hotel") {
//If the radio button is checked and the id of
//said radio button is the hotel one then add the innerHTML
$("button").innerHTML = "<a href='./hotel.html'>Submit</a>";
}
}
</script>
<form name="frmRadio" id="radio-buttons" action="">
<input type="radio" id="radio-restaurant" name="option" onchange="rb_onchange(this);">Restaurant<br>
<input type="radio" id="radio-hotel" name="option" onchange="rb_onchange(this);">Hotel<br>
</form>
<div name ="button"></div>
</div>
EDIT:
Seems I failed to notice the id attribute of the button div.,....
Change:
<div name ="button"></div>
to
<div name="button" id="button"></div>
EDIT:
Adding some comments
$(document).ready(function ()
{
$("#watch-me").click(function()
{
$("#show-me:hidden").show('slow');
$("#show-me-two").hide();
$("#show-me-three").hide();
});
$("#watch-me").click(function()
{
if($('watch-me').prop('checked')===false)
{
$('#show-me').hide();
}
});
$("#see-me").click(function()
{
$("#show-me-two:hidden").show('slow');
$("#show-me").hide();
$("#show-me-three").hide();
});
$("#see-me").click(function()
{
if($('see-me-two').prop('checked')===false)
{
$('#show-me-two').hide();
}
});
$("#look-me").click(function()
{
$("#show-me-three:hidden").show('slow');
$("#show-me").hide();
$("#show-me-two").hide();
});
$("#look-me").click(function()
{
if($('see-me-three').prop('checked')===false)
{
$('#show-me-three').hide();
}
});
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="row">
<div class="col-sm-12" align="center">
<form id='form-id'>
<input id='watch-me' name='test' type='radio' checked /> Radio 1
<input id='see-me' name='test' type='radio' /> Radio 2
<input id='look-me' name='test' type='radio' /> Radio 3
</form>
<br><br>
<div id='show-me'>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home Tab Content</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile Tab Content</div>
<div role="tabpanel" class="tab-pane" id="messages">Messages tab Content</div>
<div role="tabpanel" class="tab-pane" id="settings">Setting tab Content</div>
</div>
</div>
<div id='show-me-two' style='display:none; border:2px solid #ccc'>Editing snippet "On Click Change on Radio Button" <br> Editing snippet "On Click Change on Radio Button"</div>
<div id='show-me-three' style='display:none; border:2px solid #ccc'>Hello I'm Div 3</div>
</div>
</div>
In django template , i have a modal which pops up on click of a span.
<div class="modal-body">
<form action="#">
<fieldset>
<legend>Please Select Your Option</legend>
<p><label style="font-size:15px;"><input type="checkbox" style="margin-right:5px;" id="selectAll"/>Select All</label></p>
<div id="options">
{% for data in allData %}
<p><label style="font-size:15px;" for={{data}}><input type="checkbox" style="margin-right:5px;" value={{data}}/>{{option}}</label></p>
{% endfor %}
<div>
</fieldset>
</form>
</div>
I saw many examples and get to know that using ids i can access the value property of each checkbox. but i am really confused in this case where the no of checkboxes are dynamic.
I want to access the label name as the value . Any help?
Edit :
var allVals = [];
$('#options :checked').each(function() {
allVals.push($(this).val());
});
console.log(allVals);
I used this jquery code to get the values, but it doesnot returns the complete value, as i have done in the code (put the label name in value property).
Eg. If the option says:
a,b,c,d
it returns the array having [a].
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
// for delete row
$('#container').on('click', 'input[type="checkbox"]', function () {
alert($(this).closest('label').text());
});
$('#btnAdd').click(function () {
iCounter=$('#container p').siblings().length + 1
$('#container').append('<p><label style="font-size:15px;" for="test1"><input type="checkbox" style="margin-right:5px;" value="test1"/>sample' + iCounter + '</label></p>');
});
});
</script>
</head>
<body>
<button id="btnAdd">Add Data</button>
<div class="modal-body">
<form action="#">
<fieldset>
<legend>Please Select Your Option</legend>
<p><label style="font-size:15px;"><input type="checkbox" style="margin-right:5px;" id="selectAll"/>Select All</label></p>
<div id="container">
<p><label style="font-size:15px;" for="test1"><input type="checkbox" style="margin-right:5px;" value="test1"/>sample</label></p>
</div>
</fieldset>
</form>
</div>
</body>
</html>
In the following code, how can I
- If I click all, it will show both buy and rent
- If I click buy, it will show buy (Rangeslider) only
- If I click rent, it will show rent (Rangeslider) only
<div class="box-filter">
<!---------------------------------------- Filtering Start ---------------------------------------->
<ul data-role="listview" data-inset="false" data-theme="d">
<li>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend></legend>
<input name="radio-choice-h-1" id="radio-choice-h-1a" type="radio" checked="checked" value="">
<label for="radio-choice-h-1a">All</label>
<input name="radio-choice-h-1" id="radio-choice-h-1b" type="radio" value="1">
<label for="radio-choice-h-1b">Buy</label>
<input name="radio-choice-h-1" id="radio-choice-h-1c" type="radio" value="2">
<label for="radio-choice-h-1c">Rent</label>
</fieldset>
</li>
<!-- Buy Start -->
<li id="rangeslider_buy">
<div data-role="rangeslider" data-mini="true">
<label for="range-1a">Buy</label>
<input name="range-1a" id="range-1a" min="0" max="2000" value="0" type="range" />
<label for="range-1b">Buy</label>
<input name="range-1b" id="range-1b" min="0" max="2000" value="2000" type="range" />
</div>
</li>
<!-- Buy End -->
<!-- Rent Start -->
<li id="rangeslider_rent">
<div data-role="rangeslider" data-mini="true">
<label for="range-2a">Rent</label>
<input name="range-2a" id="range-2a" min="0" max="50000" value="0" type="range" />
<label for="range-2b">Rent</label>
<input name="range-2b" id="range-2b" min="0" max="50000" value="50000" type="range" />
</div>
</li>
</ul></div>
Update
In jQuery Mobile, it is recommended to use class ui-screen-hidden instead of .show()/.hide() functions, in order not to break elements structure. Also, for better results, listview should be refreshed after hiding/showing elements.
Listen to change event fired on type=radio. Give each radio button a value and accordingly show/hide elements.
$(document).on("pageinit", function () {
$("[type=radio]").on("change", function () {
if ($(this).is(":checked")) {
if ($(this).val() == "all") { /* All */
$("#rangeslider_buy, #rangeslider_rent").removeClass("ui-screen-hidden");
}
if ($(this).val() == "buy") { /* Buy */
$("#rangeslider_buy").removeClass("ui-screen-hidden");
$("#rangeslider_rent").addClass("ui-screen-hidden");
}
if ($(this).val() == "rent") { /* Rent */
$("#rangeslider_buy").addClass("ui-screen-hidden");
$("#rangeslider_rent").removeClass("ui-screen-hidden");
}
$("listview_ID").listview("refresh");
}
});
});
Demo
I would prefer not ever have if 's or switch 's and I would like to re-use the code as much as possible, so I would do as:
$(function(){
$(".radio-selectors input[type='radio']").click(function() {
// get selected radio area
var radioType = $(this).attr("data-area");
// hide all
$(".area-all").hide();
// show correct
$(".area-" + radioType).show();
});
});
with JQuery Mobile Suggestions rule about hide and show:
$(function(){
$(".radio-selectors input[type='radio']").click(function() {
// get selected radio area
var radioType = $(this).attr("data-area");
// hide all
$(".area-all").addClass("ui-screen-hidden");
// show correct
$(".area-" + radioType).removeClass("ui-screen-hidden");
});
});
new demo: http://jsbin.com/rokohive/3/edit?html,js,output
and I would append classes to the HTML code as:
<ul ... class="radio-selectors">
<input id="radio-choice-h-1a" data-area="all" ...
<input id="radio-choice-h-1b" data-area="buy" ...
<input id="radio-choice-h-1c" data-area="rent" ...
and
<li id="rangeslider_buy" class="area-buy area-all">
<li id="rangeslider_rent" class="area-rent area-all">
This way, later, you can simply add more radio buttons and more areas and you do not have to change the javascript code:
Demo in JsBin: http://jsbin.com/rokohive/1/edit?html,js,output
Try this http://jsfiddle.net/4f55k/
var $buy = $('#rangeslider_buy'), $rent = $('#rangeslider_rent');
$('#radio-choice-h-1a').click(function () { $buy.add($rent).show() });
$('#radio-choice-h-1b').click(function () { $rent.hide(); $buy.show(); });
$('#radio-choice-h-1c').click(function () { $rent.show(); $buy.hide(); });
Animated: http://jsfiddle.net/4f55k/1/
I have a list of keywords, and I've created a checkbox for each. My template has a form wrapping the content, so I can't have a nested form around the checkbox list.
How can I send the selected checkbox values to my search results page?
The form that wraps the content doesn't have any actions or methods applied:
<form id="BoostMasterForm" runat="server">
This is an example of the HTML markup of my checkbox list (the checkboxes will be different depending on the keywords):
<div class="checkboxes">
<ul>
<li>
<input type="checkbox" name="search" class="options" value="one">
<label>one</label>
</li>
<li>
<input type="checkbox" name="search" class="options" value="two">
<label>two</label>
</li>
<li>
<input type="checkbox" name="search" class="options" value="three">
<label>three</label>
</li>
</ul>
<input type="submit" value="Submit"/>
</div>
How can I use javascript or jQuery to submit the values of the multiple checkbox selections and on submit action them to the following URL: '/imagery/image-search.aspx'
The resulting URL for a search where option 1 and 3 are submitted should be: '/imagery/image-search.aspx?search=one%20three'
I'm using this javascript that I found on another post, however I need it to append the form an the action and the method. My website is ASP, where this post is for a PHP site:
Sending multiple checkbox options
$('.options').click(function() {
var selectedItems = new Array();
$(".checkboxes input:checkbox[name=search]:checked").each(function() {selectedItems.push($(this).val());});
var data = selectedItems.join('|');
$("#opts").val(data);
});
If anyone can help, it'd be greatly appreciated.
Cheers, JV
This works for your example.
$('input[type=submit]').on('click', function(evt) {
var selectedValues = [];
var url = '/imagery/image-search.aspx?search=';
$('input[type=checkbox]:checked').each(function() {
selectedValues.push($(this).val());
});
url += selectedValues.join(' ');
window.location = url;
});
I am still not clear. But here is a code where you can build an string and pass it
<script type="text/javascript">
function fnc()
{
elements=document.getElementById("BoostMasterForm").elements;
str="";
for(i=0;i<elements.length;++i)
{
if(elements[i].type=='checkbox' && elements[i].checked)
str=str+elements[i].value;
}
alert(str);
//alert(window.location.href+'?str='+str);
//document.getElementById("aform").submit();
}
</script>
<form id="BoostMasterForm" onsubmit="fnc()">
<div class="checkboxes">
<ul>
<li>
<input type="checkbox" id="search1" name="search" class="options" value="one">
<label>one</label>
</li>
<li>
<input type="checkbox" id="search2" name="search" class="options" value="two">
<label>two</label>
</li>
<li>
<input type="checkbox" id="search3" name="search" class="options" value="three">
<label>three</label>
</li>
</ul>
<input type="submit" value="Submit"/>
</div>
</form>
I have been stuck with a code for a few days, and what I'm really trying to do is to append NEXT and PREVIOUS (link/button) on a radio button.
<div id="slides">
<ul class="options-list">
<li>
<input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73">
<input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72">
<input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74">
</ul>
</div>
<div id="buttons">
prev
next
<div class="clear"></div>
</div>
what I am trying to do here is that, when i click on next, it will select the radio button below it, so the code above has bundle-73, bundle-72 and bundle-74, says if the default selected is bundle-73, when i click next, it should select bundle-72.
Your HTML looks broken so I'm going to assume you really mean this:
<div id="slides">
<ul class="options-list">
<li><input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73"></li>
<li><input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72"></li>
<li><input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74"></li>
</ul>
</div>
Then your next action would look like this:
$('#next').click(function() {
var $all = $('.getradiotomove'); // Get them all
var $current = $('.getradiotomove:checked'); // Get the current one
var index = $all.index($current) + 1; // Find the index of the next one
if(index >= $all.length) // Wrap around at the end
index = 0;
$($all[index]).attr('checked', 'checked'); // Check it.
});
Demo: http://jsfiddle.net/ambiguous/hTgv3/1/
This assumes that you only have the one group of radio buttons.
You should be able to sort out the previous action yourself.
References:
:checked selector
index function
Maybe somethining like this?
<ul class="options-list">
<li>
<input type="radio" name="bundle_option" value="73">
</li>
<li>
<input type="radio" name="bundle_option" value="72">
</li>
<li>
<input type="radio" name="bundle_option" value="74">
</li>
</ul>
and javascript:
$('#next').click(function(){
$('[name=bundle_option]:checked').parent().next().children('[name=bundle_option]').attr('checked', true);
return false;
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Ejemplo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#next').click(function() {
var checkedOp = $('input[name=bundle_option]:checked')
var match = checkedOp.next('input[name=bundle_option]');
if (match.length > 0)
checkedOp.removeAttr('checked').next('input[name=bundle_option]').attr('checked', 'checked');
});
$('#prev').click(function() {
var checkedOp = $('input[name=bundle_option]:checked');
var match = checkedOp.prev('input[name=bundle_option]');
if (match.length > 0)
checkedOp.removeAttr('checked').prev('input[name=bundle_option]').attr('checked', 'checked');
});
}
);
</script>
</head>
<body>
<div id="slides">
<input type="radio" class="getradiotomove" id="bundle-73" name="bundle_option" value="73" checked="checked">
<input type="radio" class="getradiotomove" id="bundle-72" name="bundle_option" value="72">
<input type="radio" class="getradiotomove" id="bundle-74" name="bundle_option" value="74">
</div>
<div id="buttons">
prev
next
<div class="clear"></div>
</div>
</body>
</html>