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/
Related
I have a drop-down menu in the jquery append() function which adds contents to the row of a table whenever I click a button I call "AddItem".
$('#tbody').append(`<tr id="R${++rowIdx}">
<td class="row-index text-center">
<select style="resize:none" id="item-deducted">
<option id="window" value="Window">Window</option>
<option id="door" value="Door">Door</option>
</select>
</td>
<td>
<select style="resize:none; display:none;" id="shapeDeducted" selected="none" >
<option id="none" value="" selected></option>
<option id="Normal" value="Normal (LxH)">Normal (LxH)</option>
<option id="Triangular" value="Triangular">Triangular</option>
</select>
</td>
</tr>`);
I want to display option "Triangle" in the second select option whenever a user clicks or selects the option "Window" in the first select drop-down.
Use on change: $('#item-deducted').on('change').
$('#tbody').append(`<tr id="R$">
<td class="row-index text-center">
<select style="resize:none" id="item-deducted">
<option id="window" value="Window">Window</option>
<option id="door" value="Door">Door</option>
</select>
</td>
<td>
<select style="resize:none; display:none;" id="shapeDeducted" selected="none" >
<option id="none" value="" selected></option>
<option id="Normal" value="Normal (LxH)">Normal (LxH)</option>
<option id="Triangular" value="Triangular">Triangular</option>
</select>
</td>
</tr>`);
$('#item-deducted').on('change', function() {
if($(this).val() === 'Window'){
$('#shapeDeducted').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tbody"></div>
Good day, I'm having a bit trouble of how can I show the select field if the check box is checked
<div class="checkbox">
<br>
<label style="padding-right:0px;"><input type="checkbox" name="cod" value="1" > My shop offers <b>Cash on Delivery</b></label>
</div>
<select name="" id="" style="padding-left:0px;">
<option value="">Around Metro Manila Only</option>
<option value="">Outside Metro Manila Only</option>
<option value="">Both</option>
</select>
You must have id attribute to the select input element to identify the element and use it as jQuery selector.
.change() will trigger change event on the checkbox and invoke the handler, which will show/hide the select input initially.
Edit: Use .toggle() Display or hide the matched elements. Boolean argument will decide the visibility of the matched elements.
$('[name="cod"]').on('change', function() {
$('#select').toggle(this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="checkbox">
<br>
<label style="padding-right:0px;">
<input type="checkbox" name="cod" value="1">My shop offers <b>Cash on Delivery</b>
</label>
</div>
<select name="" style="padding-left:0px;" id='select'>
<option value="">Around Metro Manila Only</option>
<option value="">Outside Metro Manila Only</option>
<option value="">Both</option>
</select>
here is Solution of your problem please check this
css
select.selectDrop{
display:none;
}
html
<input type="checkbox" name="seeds" value="Indigofera" /> <span> My shop offers <b>Cash on Delivery</b></span>
<select class="selectDrop" name="" id="" style="padding-left:0px;">
<option value="">Around Metro Manila Only</option>
<option value="">Outside Metro Manila Only</option>
<option value="">Both</option>
</select>
jquery
$('[type="checkbox"][name="seeds"]').change(function(){
$('select.selectDrop').toggle(this.checked);
});
Here's the working Fiddle example.
You can also use toggle event, if checkbox checked display the select box else hide.
Note that, you need to use id attribute for select box
id="selectBox"
Example:
$('[name="cod"]').click(function() {
$("#selectBox").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="checkbox">
<br>
<label style="padding-right:0px;"><input type="checkbox" name="cod" value="1" > My shop offers <b>Cash on Delivery</b></label>
</div>
<select name="" id="selectBox" style="padding-left:0px;display:none;">
<option value="">Around Metro Manila Only</option>
<option value="">Outside Metro Manila Only</option>
<option value="">Both</option>
</select>
Try this
<div class="checkbox">
<br>
<label style="padding-right:0px;"><input type="checkbox" name="cod" value="1" > My shop offers <b>Cash on Delivery</b></label>
<?php $test=$_GET['test']?>
<select name="test" id="" style="padding-left:0px;">
<option <?php if($test==1) echo 'selected'?> value="1">Around Metro Manila Only</option>
<option <?php if($test==2) echo 'selected'?> value="2">Outside Metro Manila Only</option>
<option <?php if($test==3) echo 'selected'?> value="3">Both</option>
</select>
Not sure which option you want to select but you can alter the .selectedIndex value to change that.
<!DOCTYPE html>
<html>
<body>
<div class="checkbox">
<br>
<label style="padding-right:0px;"><input type="checkbox" name="cod" value="1" onclick="selectItem(this.checked)"> My shop offers <b>Cash on Delivery</b></label>
</div>
<select name="" id="myList" style="padding-left:0px;">
<option value="">Around Metro Manila Only</option>
<option value="">Outside Metro Manila Only</option>
<option value="">Both</option>
</select>
</body>
</html>
<script>
function selectItem(isChecked){
if(isChecked){
document.getElementById('myList').selectedIndex=1;
}else{
document.getElementById('myList').selectedIndex=0;
}
}
</script>
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>');
Before I explain my problem, below is my simple code
<body>
<div>
<input type="radio" name="salary"/>Per Year
<select>
<option value="0">All</option>
<option value="40000">$40,000.00+</option>
<option value="50000">$50,000.00+</option>
</select>
</div>
<div>
<input type="radio" name="salary"/>Per Hour
<select>
<option value="0">All</option>
<option value="20">$20.00+</option>
<option value="25">$25.00+</option>
</select>
</div
</body>
What am I trying to achieve is when user selects radio button with value "Per Year".I want to disable the other radio button[with value "Per Hour"].So he can't select the values from other drop-down list.
How can I do this in AngularJS?Is their any directive that could solve this??
http://jsbin.com/boqexu/1/edit
<body ng-app="app">
<div ng-controller="firstCtrl">
<div>
<input type="radio" name="salary" ng-model="type" value="year"/>Per Year
<select ng-model="year.value" ng-disabled="type =='hour'">
<option value="0">All</option>
<option value="40000">$40,000.00+</option>
<option value="50000">$50,000.00+</option>
</select>
</div>
<div>
<input type="radio" name="salary" ng-model="type" value="hour"/>Per Hour
<select ng-disabled="type =='year'" ng-model="hour.value">
<option value="0">All</option>
<option value="20">$20.00+</option>
<option value="25">$25.00+</option>
</select>
</div>
</div>
</body>
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