This question already has answers here:
Show and hide, enable and disable depending on radios and checkboxes
(4 answers)
Closed 7 years ago.
Reposting this question. I need to approach it from a different way than
Show and hide, enable and disable depending on radios and checkboxes
My old way below:
First I am not supposed to use the click function for radio buttons. I need to check if radio buttons are checked and then display the electronics div or cookware-items div accordingly. Also need to display both if the radio button option "both" is checked.
The textbox fields in electronics div and cookware items div for the user to input quantities should be displayed only when the checkbox for the respective electronics or cookware item is checked.
Any inputs ?
<html>
<head>
<script src="jquery-1.11.0.js"></script>
<style>
div{display:none}
</style>
</head>
<body>
<form>
<input type="radio" name="household" id ="electronics" value="electronics">Electronics<br>
<input type="radio" name="household" id="cookware" value="cookware">Cookware<br>
<input type="radio" name="household" id="both" value="both">Both<br>
</form>
<script>
$(document).ready(function(){
$(input[type="radio"]).click(function(){
$("#electronics").show;
});
});
</script>
<div id="electronics">
<input type="checkbox" value="radio" name="radio">Radio 2000 <input type="textbox" name="text1"><br>
<input type="checkbox" value="phone" name="phone">Phone 2000 <input type="textbox" name="text2"><br>
<div id="cookware-items">
<input type="checkbox" value="grinder" name="grinder">Grinder 2000 <input type="textbox" name="text1"><br>
<input type="checkbox" value="mixer" name="mixer">Mixer 2000 <input type="textbox" name="text2"><br>
</div>
</body>
</html>
Edit checkbox Cookware's value to cookware-items
Using jquery hide and show like this:
Live demo: http://code.freetuts.net/editor.html?id=241
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.0.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
div{display:none}
</style>
</head>
<body>
<form>
<input type="radio" name="household" value="electronics">Electronics<br>
<input type="radio" name="household" value="cookware-items">Cookware<br>
<input type="radio" name="household" value="both">Both<br>
</form>
<script>
$(document).ready(function() {
$('input[name="household"]').click(function()
{
// Hide 2 divs
$('#electronics').hide();
$('#cookware-items').hide();
// Show by current checkbox
var value = $(this).val();
if (value == 'both'){
$('#electronics').show();
$('#cookware-items').show();
}
else{
$('#'+value).show();
}
});
});
</script>
<div id="electronics">
<input type="checkbox" value="radio" name="radio">Radio 2000 <input type="textbox" name="text1"><br>
<input type="checkbox" value="phone" name="phone">Phone 2000 <input type="textbox" name="text2"><br>
</div>
<div id="cookware-items">
<input type="checkbox" value="grinder" name="grinder">Grinder 2000 <input type="textbox" name="text1"><br>
<input type="checkbox" value="mixer" name="mixer">Mixer 2000 <input type="textbox" name="text2"><br>
</div>
</body>
</html>
Related
I have two divs containing the same checkbox with the same name,class and id. When I am selecting the checkbox of a particular div , it should alert the value of that checkbox when submitting a button.
Example :
<div>
<input type="checkbox" class="snowplay" id="snowplayy" name="snowplay" value="1">
</div>
<div>
<input type="checkbox" class="snowplay" id="snowplayy" name="snowplay" value="2">
</div>
<div>
<input type="submit" class="submit" id="submit" name="submit" />
</div>
When I am clicking any of the two checkboxes, and then submitting the button, I want to alert the value of the checkbox of that particular checkbox. Can anyone say how to do this ?
$('.submit').click(function(e) {
e.preventDefault()
//alert($('.snowplay:checked').val()) //single value
$('.snowplay:checked').each(function() {//iterate over
alert($(this).val()) // many value
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" class="snowplay" id="snowplayy" name="snowplay" value="1">
</div>
<div>
<input type="checkbox" class="snowplay" id="snowplayy1" name="snowplay" value="2">
</div>
<div>
<input type="submit" class="submit" id="submit" name="submit" />
</div>
Use this .snowplay:checked checkbox with class snowplay that is checked
Change your id to be unique
Id should be unique. So here i removed the id Attribute :).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
$('.snowplay:checked').each(function(){
alert($(this).val())
});
});
});
</script>
</head>
<body>
<div>
<input type="checkbox" class="snowplay" name="snowplay" value="1">
</div>
<div>
<input type="checkbox" class="snowplay" name="snowplay" value="2">
</div>
<div>
<input type="submit" class="submit" id="submit" name="submit" />
</div>
</body>
</html>
I have a profile edit form below in which I am asking the user to select multiple cities (I left 4, but on my page I am looking to add around 29,000) from a select2 dropdown menu using the following code, but the selected values do not save when I press the submit button and therefore when the page reloads there are no selected values.
<form action="/edit-my-profile/?action=edit&job_id=5792" method="post" id="submit-job-form" class="job-manager-form" enctype="multipart/form-data">
<fieldset class="fieldset-html">
<label for="html">HTML</label>
<div class="field ">
<select name='job_listing_region[]' id='regions' style='width:300px' multiple>
<option>Boca Raton,FL</option>
<option>New York City, NY</option>
<option>Los Angeles, CA</option>
<option>Boone, NC</option>
</select>
</div>
</fieldset>
<p>
<input type="hidden" name="job_manager_form" value="edit-job" />
<input type="hidden" name="job_id" value="5792" />
<input type="hidden" name="step" value="0" />
<input type="submit" name="submit_job" class="button" value="Save changes" />
</p>
</form>
and the following jquery script
<script>
jQuery(function($) {
$(document).ready(function() {
$("#regions").select2({
});
});
});
</script>
Is there a way I can have the selection box save the selected values?
<p><h3 style="font-size:18px;">Call Status:</h3>
<body>
<div>
<form action="immediate.php">
<label><input type="radio" name="colorRadio" <?php if (isset($colorRadio) && $colorRadio=="immediate" ) echo "checked";?>value="IMMEDIATE"> Call Immediate</label>
</form>
<form action="scheduled.php">
<label><input type="radio" name="colorRadio" <?php if (isset($colorRadio) && $colorRadio=="scheduled") echo "checked";?> value="SCHEDULED"> Call Scheduled</label>
</form></div>
<div class="IMMEDIATE box">You have selected <strong>red radio button</strong> so i am here</div>
<div class="SCHEDULED box"><p>
<td>
<input type="Text" id="demo1" name="demo1" maxlength="25" size="25"><a href="javascript:NewCal('demo1','DDMMYYYY',true,24)">
<img src="img/cal.gif" width="16" height="16" border="0"></a>
<span class="descriptions">Pick a Date</span>
</p></div>
Hi Sir this is my code...I just want to add multiple form action on selection of radio button... Call Immediate radio button is selected then send my form at immediate.php page and if Call Scheduled is selected then then page send on scheduled.php page
Its easier with jQuery. Basic version is:
<input type="radio" name="group1" id="basic" value="a.html" onclick="setLocation(this)" checked="checked" />
function setLocation(element) {
document.forms[0].action = element.value
}
here's an example for you
<html>
<head>
<script type="text/javascript">
function select()
{
var1=document.getElementById("radio1");
var2=document.getElementById("radio2");
if(var1.checked==true)
{
document.myform.action="immediate.php";
}
else
{
document.myform.action="Scheduled.php";
}
}
</script>
</head>
<body>
<form action="immediate.php" method="post" name="myform" onsubmit="select()">
<input type="radio" id="radio1" name="colorRadio" value="IMMEDIATE">
<input type="radio" id="radio2" name="colorRadio" value="Call SCHEDULED">
<input type="submit" value="Submit">
</form>
</body>
</html>
It check for selected radio button when submit is clicked and assign action based on selection.
Hope it helps
I was working on creating checkbox inside checkbox which all should appear inside a dropdownlist box. I was succeeded in creating a couple of checkboxes inside a dropdownlist box. follow the link http://vignesh.gvignesh.org/metroplots/drp/drpcheck.php
Now i am trying to create a checkbox which should appear once user clicks one checkbox. For instance if user checks documents then a couple of checkbox should appear below that checkbox.
Eg. []Documents (if user checks main, the sub checkboxes should appear)
[]Doc 1
[]Doc 2
[]Doc 3
[]Phots (if user checks)
[]photo 1
[]photo 2
[]photo 3
How to attain this through javascript or jquery.
Thanks in Advance. !!
There are different ways to do this. This is what I have done:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.team').on('click',function(){
if($(this).is(':checked')){
$(this).next().next().show();
}else{
$(this).next().next().hide();
}
});
});
</script>
</head>
<body>
<form name="FootballClubs">
<input type="checkbox" class="team" value="RealMadrid"/>Real Madrid<br />
<div style="padding:10px 10px 10px 15px;display:none;">
<input type="checkbox" class="player" value="CR"/>Cristiano Ronaldo<br />
<input type="checkbox" class="player" value="SA"/>Shabi Alanso<br />
<input type="checkbox" class="player" value="IC"/>Iker Casillias<br />
</div>
<input type="checkbox" class="team" value="ManCity"/>Man City<br />
<div style="padding:10px 10px 10px 15px;display:none;">
<input type="checkbox" class="player" value="SA"/>Sergio Aguero<br />
<input type="checkbox" class="player" value="SM"/>Super Mario<br />
</div>
</form>
</body>
</html>
This is fully working example. Also, you can unchecked the checked elements, when they are hidden again.
well today I want to learn how to grab multiple input type button value compare to original value and last submit to php script! How can I do that with Jquery?
<html>
<body>
<div id="leftDiv" class="container">
<form action="" method="get">
<fieldset>
<p>Something 0</p>
<lable>Yes</label>
<input type="radio" name="Group0" value="1" >
<lable>No</label>
<input type="radio" name="Group0" value="0" >
</fieldset>
<fieldset>
<p>Something 1</p>
<lable>Yes</label>
<input type="radio" name="Group1" value="1" >
<lable>No</label>
<input type="radio" name="Group1" value="0" >
</fieldset>
<fieldset>
<p>Something 2</p>
<lable>Yes</label>
<input type="radio" name="Group2" value="1" >
<lable>No</label>
<input type="radio" name="Group2" value="0" >
</fieldset>
<fieldset>
<input type="submit" name="update" class="button" value="Submit">
</fieldset>
</form>
</div>
</body>
</html>
the above values are generated by php script (can be 1 or 100)
the easiest method is actually to set the correct values as selected in the HTML and tie a .onChange event to them. otherwise, have a hidden field with the original value, and onChange compare them like this
//a hidden input field with the original value
<input type='hidden' id='Group0' value='0'/>
// a set of radio fields that reference the original field we will be comparing with in their 'rel' attribute for easy jQuery selection
Off<input type='radio' name='Group0' rel='#Group0' class='compareOnChane' value=0/><br/>
On <input type='radio' name='Group0' rel='#Group0' class='compareOnChane' value=1/>
<script>
$(document).ready(function(){
$('.compareOnChange').live('change',function(){
if($($(this).attr('rel')).val()!=$(this).val(){
//the value currently is different than the original value, fire our action
}
});
});
</script>
This is a pretty good tutorial that will teach you the basics of this:
http://trevordavis.net/blog/ajax-forms-with-jquery
You can get the values of the radio buttons in a JSON like so:
var radios = {};
$('input[type="radio"]').each(function() {
radios[$(this).attr('name')] = $(this).attr('value');
});