Radio buttons and hidden fields - javascript

I am trying to create a list that appears when the radio buttons are clicked, I am having a problem with the way the list appears once the button is clicked.
Here is the example http://jsfiddle.net/c2webdev/4bpKE/
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
.none {
display: none;
}
</style>
</head>
<body>
<input type="radio" name='thing' value='valuable' data-id="bank"/>Running Event
<input type="radio" name='thing' value='valuable' data-id="school"/>Other challenges
<input type="radio" name='thing' value='valuable' data-id="bakery"/>Baking
<div id="school" class="none">
<label for="name">What was the activity called?</label>
<select id="myList">
<option value="1">List item 1</option>
<option value="2">List item 2</option>
<option value="3">List item 3</option>
<option value="4">List item 4</option>
</select>
</div>
<div id="bank" class="none">
<label for="name">What was the activity called?</label>
<select id="myList">
<option value="1">Pancake Making</option>
<option value="2">Egg and spoon race</option>
<option value="3">Sack race</option>
<option value="4">Three leg race</option>
</select></div>
<div id="bakery" class="none">
<label for="name">What was the activity called?</label>
<select id="myList">
<option value="1">Pancake Making</option>
<option value="2">Egg and spoon race</option>
<option value="3">Sack race</option>
<option value="4">Three leg race</option>
</select></div>
<script>
$(':radio').change(function (event) {
var id = $(this).data('id');
$('#' + id).addClass('none').siblings().removeClass('none');
});
</script>
</body>
</html>
Please help

I added a class name .select to your select containers. If you added another radio in the future, this way fill it. So:
CSS:
.select {
display: none;
}
JS:
$('input[type="radio"]').click(function (event) {
$(".select").hide();
var id = $(this).data('id');
$('#' + id).show();
});
HTML:
<input type="radio" name='thing' value='valuable' data-id="bank" />Running Event
<input type="radio" name='thing' value='valuable' data-id="school" />Other challenges
<div id="school" class="select">
<label for="myList1">What was the activity called?</label>
<select id="myList1">
<option value="1">Virgin London Marathon</option>
<option value="2">Round the Island cycle challenge</option>
<option value="3">Kilimanjaro trek</option>
<option value="4">Thames Path Challenge</option>
</select>
</div>
<div id="bank" class="select">
<label for="myList2">What was the activity called?</label>
<select id="myList2">
<option value="1">Pancake Making</option>
<option value="2">Egg and spoon race</option>
<option value="3">Sack race </option>
<option value="4">Three leg race</option>
</select>
</div>
See Demo by jquery enabled

You didn't set a library, e.g. jQuery on the left pane

Related

Move Div Inside Other Hidden Div

I'm trying to move a div inside of another div.
This is how it looks now.
When you select a Donation amount the "Choose a Purchase Plan" radio field appears.
What I want to happen is to move the "Agency" dropdown field from where it is currently to below the "Choose a Purchase Plan" radio like this. That way it will remain hidden until a donation amount has been selected.
This is the code I have presently to achieve this, but it is not working.
$(document).ajaxComplete(function() {
$(".wapf-wrapper").appendTo(".wcsatt-options-wrapper");
$(this).hide(); // Hide move button
});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<form>
<table>
<tr>
<td class="label"><label for="donation-amount">Donation Amount</label></td>
<td class="value">
<select id="donation-amount" class="" name="attribute_donation-amount" data-attribute_name="attribute_donation-amount"><br>
<option value="">Choose an option</option>
<option value="$50" class="attached enabled">$50</option>
<option value="$100" class="attached enabled">$100</option>
<option value="$200" class="attached enabled">$200</option>
<option value="Custom Amount" class="attached enabled">Custom Amount</option>
</select>
</td>
</tr>
</table>
<div class="wapf-wrapper">
<div class="wapf-field-group" data-group="74">
<div class="wapf-field-row">
<div class="wapf-field-container wapf-field-select" style="width:100%;" for="5f87355d578fd">
<div class="wapf-field-label wapf--above"><label><span>Agency</span></label></div>
<div class="wapf-field-input">
<select name="wapf[field_5f87355d578fd]" class="wapf-input" data-is-required="" data-field-id="5f87355d578fd">
<option value="">Choose an option</option>
<option value="mwh9o">Lifebridge - Salem</option>
<option value="hrv77">Plummer Youth Promise - Salem</option>
<option value="77l7n">NSCDC Harborlight Crossing - Salem </option>
<option value="dftor">NE Arc </option>
<option value="7za56">Beverly Bootstraps - Beverly</option>
<option value="jogvz">Citizens Inn</option>
</select>
</div>
</div>
</div>
</div>
<span>Choose a purchase plan:</span>
<ul>
<li>
<label>
<input type="radio" name="convert_to_sub_36" data-custom_data="[]" value="0">
</label>
</li>
<li>
<label>
<input type="radio" name="convert_to_sub_36" value="1_month">
</label>
</li>
</ul>
</div>
</form>
</body>
</html>
You can see the current fields here where I am trying to achieve this: https://rootmeals.wpengine.com/product/meals-donation/

jquery for the drop-down select

Here is my index file code. whenever I select something into the drop-down then show me related dropdown.
I put this code in my file but I can't get drop down after selecting the main type.
css file code is .hide{display:none;}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('#mode').on('change', function () {
var value = $("#mode option:selected").val();
$('.hide').slideUp('fast').find('select').val('');
$('#' + value).show('slow');
});
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="">
<label class="control-label">Mode</label>
<select class="input-large m-wrap" name="mode" id="mode" required>
<option value=""></option>
<option value="general">General Knowledge</option>
<option value="preparatory">Preparatory Exam</option>
</select>
</div>
<div class=" hide" id="general">
<br>
<label class="control-label">Module</label>
<select class="input-large m-wrap" name="module" id="sub">
<option value=""></option>
<option value="Module 1">Module 1</option>
<option value="Module 2">Module 2</option>
</select>
</div>
<div class=" hide" id="preparatory">
<br>
<label class="control-label">Exam</label>
<select class="input-large m-wrap" name="exam" id="sub">
<option value=""></option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</div>
</body>
</html>
Your problem is type class=" hide" change to class="hide"
and you need move your script to before close body tag not head tag.
$('#mode').on('change', function () {
var value = $("#mode option:selected").val();
//$('.hide').show();
$('.hide').slideUp('fast').find('select').val('');
$('#' + value).show('slow');
});
.hide{
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="">
<label class="control-label">Mode</label>
<select class="input-large m-wrap" name="mode" id="mode" required>
<option value=""></option>
<option value="general">General Knowledge</option>
<option value="preparatory">Preparatory Exam</option>
</select>
</div>
<div class="hide" id="general">
<br>
<label class="control-label">Module</label>
<select class="input-large m-wrap" name="module" id="sub">
<option value=""></option>
<option value="Module 1">Module 1</option>
<option value="Module 2">Module 2</option>
</select>
</div>
<div class=" hide" id="preparatory">
<br>
<label class="control-label">Exam</label>
<select class="input-large m-wrap" name="exam" id="sub">
<option value=""></option>
<option value="A1">A1</option>
<option value="A2">A2</option>
</select>
</div>
</body>
</html>

Select options from only one item, jquery change each

So I'm trying to build a quickbuy of products with different variants in my list of products. The product has a set of avaialble options, that are collected from the select option with jQuery, passed to a input field and then submitted to the cart. The products are listed out by a loop. When I'm at the single product page it works fine, since all the option values are required.
But once in the list of products, it gets the options from all the products and passes them to all the submit fields. How can I scope a jquery function to work on only one product at a time
In the example below, I want the field to have only the values from the select options relevant to the product. Not th evalues from both product options.
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$("select option:selected").each(function() {
str += $(this).val() + ".";
});
$("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
here you have
$(document).ready(function() {
$(".variant-selected")
.change(function() {
var str = "";
$(this).parent().find("select option:selected").each(function() {
str += $(this).val() + ".";
});
$(this).parent().find("input[name='variant']").val(str.slice(0, -1));
})
.trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
<h2>
Shirt
</h2>
<select class="variant-selected" name="select1">
<option value="1" selected>Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<select class="variant-selected" name="select2">
<option value="A" selected>Large</option>
<option value="B">Medium</option>
<option value="C">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>
<div id="prod2">
<h2>Jeans
</h2>
<select class="variant-selected" name="select1">
<option value="4" selected>Orange</option>
<option value="5">Teal</option>
<option value="6">Forest</option>
</select>
<select class="variant-selected" name="select2">
<option value="D" selected>Large</option>
<option value="E">Medium</option>
<option value="F">Small</option>
</select>
<form class="addtocart">
<input type="text" value="" name="variant">
</form>
</div>

Populate Values in Dynamically Loaded Multiple Select Boxes

I have a Symfony2 application, where I am adding selected boxes to the page dynamically using jQuery. I click add more and 2 select boxes are added with the following IDs:
#taskbundle_product_values_1_kind
#taskbundle_product_values_1_values
another click:
#taskbundle_product_values_2_kind
#taskbundle_product_values_2_values
so on and so forth.
Now I have a script that will bind to the change event of the kind select boxes and accordingly attach values to the values select box:
Now the problem is that I need some way to run the script in an iterative way that when I make changes to the first block, the effect should also only be on the first block. and Also I am looking for a way to detect changes on select boxes without multiple attribute.
$('body').on('change', '#select select', function() {
alert("Yahoo");
//console.log("Yahoo");
var val = $(this).val();
var $valSelect = $(this).next("select").html('');
$valSelect.append('<option value="value">Value</option>');
//alert(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/product/" method="post">
<div>
<label for="webmuch_taskbundle_product_name" class="required">Name</label>
<input type="text" id="webmuch_taskbundle_product_name" name="webmuch_taskbundle_product[name]" required="required" maxlength="255">
</div>
<div id="select">
<ul class="values">
<li>
<div id="webmuch_taskbundle_product_values_1">
<div>
<label for="webmuch_taskbundle_product_values_1_kind" class="required">Kind</label>
<select id="webmuch_taskbundle_product_values_1_kind" name="webmuch_taskbundle_product[values][1][kind]" required="required">
<option value="" selected="selected">-----Select Kind-----</option>
<option value="2">Size</option>
<option value="3">Shape</option>
<option value="4">Weight</option>
</select>
</div>
<div>
<label for="webmuch_taskbundle_product_values_1_values">Values</label>
<select id="webmuch_taskbundle_product_values_1_values" name="webmuch_taskbundle_product[values][1][values][]" multiple="multiple">
<option value="4">small</option>
<option value="5">medium</option>
<option value="6">large</option>
<option value="7">v-neck</option>
<option value="8">round-neck</option>
<option value="9">collor</option>
<option value="10">light</option>
<option value="11">middle</option>
<option value="12">heavy</option>
</select>
</div>
</div>
</li>
<li>
<div id="webmuch_taskbundle_product_values_2">
<div>
<label for="webmuch_taskbundle_product_values_2_kind" class="required">Kind</label>
<select id="webmuch_taskbundle_product_values_2_kind" name="webmuch_taskbundle_product[values][2][kind]" required="required">
<option value="" selected="selected">-----Select Kind-----</option>
<option value="2">Size</option>
<option value="3">Shape</option>
<option value="4">Weight</option>
</select>
</div>
<div>
<label for="webmuch_taskbundle_product_values_2_values">Values</label>
<select id="webmuch_taskbundle_product_values_2_values" name="webmuch_taskbundle_product[values][2][values][]" multiple="multiple">
<option value="4">small</option>
<option value="5">medium</option>
<option value="6">large</option>
<option value="7">v-neck</option>
<option value="8">round-neck</option>
<option value="9">collor</option>
<option value="10">light</option>
<option value="11">middle</option>
<option value="12">heavy</option>
</select>
</div>
</div>
</li>
<li>Add a value
</li>
</ul>
</div>
<div>
<label class="required">Values</label>
<div id="webmuch_taskbundle_product_values" data-prototype=""></div>
</div>
<div>
<button type="submit" id="webmuch_taskbundle_product_submit" name="webmuch_taskbundle_product[submit]">Create</button>
</div>
<input type="hidden" id="webmuch_taskbundle_product__token" name="webmuch_taskbundle_product[_token]" value="IRD3S7rLy-SQPAxyfMZNQ5UU05RR8qmVPXSrPe6Hnig">
</form>
.html() returns a string and not a jQuery object
You likely want
var $valSelect = $(this).next("select");
$valSelect.html('<option value="value">Value</option>');
or
var $valSelect = $(this).next("select");
$valSelect.empty().append('<option value="value">Value</option>');

Formatting issue: DropDown of checkboxes

I have been trying to create a form that having 4 elements. One is a dropdown box of checkboxes and the other are simple checkboxes. I am trying to place them one below the other. The difficulty is when the dropdown with the checkboxes are clicked the other dropdown slide down. On closing the dropdown with the checkboxes they slide up again. I am trying to place them one below the other, so that if the dropdown with checkboxes is clicked the other simply become invisible and not slide down. when the the dropdown of checkboxes is closed the remaining dropdown simply show up. Could someone please help me on this. I am trying to emulate something like the filters on luxuryretreats.com
Below is the code.
<html>
<head>
<script type="text/javascript">
function ExposeList1() {
var showstatus = document.getElementById('ScrollCountry').style.visibility;
if (showstatus == 'hidden') {
document.getElementById('ScrollCountry').style.visibility = "visible";
document.getElementById('Scrollguests').style.visibility = "hidden";
document.getElementById('Scrollminprice').style.visibility = "hidden";
document.getElementById('Scrollmaxprice').style.visibility = "hidden";
} else {
document.getElementById('ScrollCountry').style.visibility = 'hidden';
document.getElementById('Scrollguests').style.visibility = "visible";
document.getElementById('Scrollminprice').style.visibility = "visible";
document.getElementById('Scrollmaxprice').style.visibility = "visible";
}
}
</script>
</head>
<body>
<form action="trying.php" method="post">
<img src="original1.png" onmouseover="this.src='onhover1.png'"
onmouseout="this.src='original1.png'" onclick="ExposeList1()">
<div id="ScrollCountry"
style="height: 120; width: 150px; overflow: auto; border: 2px solid orange; visibility:hidden;border-radius:10px;">
<input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br>
<input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br>
<input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br>
<input type="checkbox" id="scb5" name="c5" value="Turks & Caicos">Turks & Caicos<br>
</div>
<br />
<div id = "Scrollguests">
<select>
<option id="n1" value="4">2 - 4</option>
<option id="n2" value="6">4 - 6</option>
<option id="n3" value="8">6 - 8</option>
<option id = "n4" value="10">8 - 10</option>
<option id = "n5" value="30">10+</option>
</select>
</div>
<br />
<div id = "Scrollminprice">
<select>
<option id="mn1" value="200">200</option>
<option id="mn2" value="300">300</option>
<option id="mn3" value="400">400</option>
<option id = "mn4" value="500">500</option>
<option id = "mn5" value="600">600</option>
</select>
</div>
<br />
<div id = "Scrollmaxprice">
<select >
<option id = "mx1" value="600">600</option>
<option id = "mx2" value="700">700</option>
<option id = "mx3" value="800">800</option>
<option id = "mx4" value="900">900</option>
<option id = "mx5" value="1000">1000</option>
</select>
</div>
<input type="submit" />
</form>
</body>
</html>
I changed it to use display instead of visibility since it makes more sense and works better. And since the #ScrollCountry now is above the checkboxes there is no need to hide them anymore.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function ExposeList1() {
var showstatus=document.getElementById('ScrollCountry').style.display;
if (showstatus == 'none') {
document.getElementById('ScrollCountry').style.display="block";
} else {
document.getElementById('ScrollCountry').style.display='none';
}
}
</script>
<style>
fieldset{ border: 0; padding: 0; position: relative }
#ScrollCountry{
height: 120px;
width: 150px;
overflow: auto;
border: 2px solid orange;
display:none;
border-radius:10px;
position: absolute;
background: #fff;
}
</style>
</head>
<body>
<form action="trying.php" method="post">
<fieldset>
<img src="original1.png" onmouseover="this.src='onhover1.png'" onmouseout="this.src='original1.png'" onclick="ExposeList1();return false;">
<div id="ScrollCountry">
<input type="checkbox" id="scb1" name="c1" value="Mexico"><label for="scb1">Mexico</label><br>
<input type="checkbox" id="scb2" name="c2" value="Belize"><label for="scb2">Belize</label><br>
<input type="checkbox" id="scb3" name="c3" value="Jamaica"><label for="scb3">Jamaica</label><br>
<input type="checkbox" id="scb4" name="c4" value="Thailand"><label for="scb4">Thailand</label><br>
<input type="checkbox" id="scb5" name="c5" value="Turks & Caicos"><label for="scb5">Turks & Caicos</label><br>
</div>
<div id="Scrollguests">
<select>
<option id="n1" value="4">2 - 4</option>
<option id="n2" value="6">4 - 6</option>
<option id="n3" value="8">6 - 8</option>
<option id="n4" value="10">8 - 10</option>
<option id="n5" value="30">10+</option>
</select>
</div>
<div id="Scrollminprice">
<select>
<option id="mn1" value="200">200</option>
<option id="mn2" value="300">300</option>
<option id="mn3" value="400">400</option>
<option id="mn4" value="500">500</option>
<option id="mn5" value="600">600</option>
</select>
</div>
<div id="Scrollmaxprice">
<select >
<option id="mx1" value="600">600</option>
<option id="mx2" value="700">700</option>
<option id="mx3" value="800">800</option>
<option id="mx4" value="900">900</option>
<option id="mx5" value="1000">1000</option>
</select>
</div>
<input type="submit">
</fieldset>
</form>
</body>
</html>
You have to position the ScrollCountry-block element outside the normal flow of elements by adding the css-code:
position: absolute;
to it.

Categories