Show select field if checkbox is checked - javascript

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>

Related

How do i add multiple conditions in an if statement in javascript?

I'm kind of new to JavaScript and all and I'm having trouble with how to add multiple conditions in an if statement. I wanted the if statement to do: "if 'this' and 'this' and 'this' is selected (I made a select tag so it is a drop down selection) then send the user to another page. I've search solutions but they're too complex for me right now as I'm still a beginner in JavaScript. Sorry if it is not explained well this is my first time making a question in this site. Thank You! Here's my code for the html if needed.
<h1>Clothes Picker</h1>
<form action="clothespicker.html" id="clothespicker">
<fieldset>
<label for="place">Where are you going today?</label>
<div>
<select name="place" id="place">
<option value="Someone's House">Someone's House</option>
<option value="Outdoors">Outdoors</option>
<option value="Shopping">Shopping</option>
<option value="Local Shopping">Local Shopping</option>
<option value="Somewhere Special">Somewhere Special</option>
</select>
</div>
<label for="weather">What's the weather?</label>
<div>
<select name="weather" id="weather">
<option value="Sunny" id="Sunny">Sunny</option>
<option value="Cold">Cold</option>
<option value="Rainy">Rainy</option>
<option value="Cloudy">Cloudy</option>
</select>
</div>
<label for="look">How do you want to look?</label>
<div>
<select name="look" id="look">
<option value="Casual" id="Casual">Casual</option>
<option value="Formal">Formal</option>
<option value="I don't know">I don't know</option>
</select>
</div>
<input type="submit" value="Pick My Clothes!" id="button"></div>
</fieldset>
</form>
I made one condition for you take a look. My condition matched when you select "outdoors" from place, "Sunny" from weather and "casual" from look. If you have multiple conditions then you can else if after if condition
<h1>Clothes Picker</h1>
<form action="clothespicker.html" id="clothespicker">
<fieldset>
<label for="place">Where are you going today?</label>
<div>
<select name="place" id="place">
<option value="Someone's House">Someone's House</option>
<option value="Outdoors">Outdoors</option>
<option value="Shopping">Shopping</option>
<option value="Local Shopping">Local Shopping</option>
<option value="Somewhere Special">Somewhere Special</option>
</select>
</div>
<label for="weather">What's the weather?</label>
<div>
<select name="weather" id="weather">
<option value="Sunny" id="Sunny">Sunny</option>
<option value="Cold">Cold</option>
<option value="Rainy">Rainy</option>
<option value="Cloudy">Cloudy</option>
</select>
</div>
<label for="look">How do you want to look?</label>
<div>
<select name="look" id="look">
<option value="Casual" id="Casual">Casual</option>
<option value="Formal">Formal</option>
<option value="I don't know">I don't know</option>
</select>
</div>
<input type="submit" onclick="myFunction()" value="Pick My Clothes!" id="button">
</fieldset>
<p id="demo"></p>
</form>
<script>
function myFunction() {
var place = document.getElementById("place").value;
var weather = document.getElementById("weather").value;
var look = document.getElementById("look").value;
if(place == "Outdoors" && weather == "Sunny" && look == "Casual")
{
//your condition here
document.getElementById("demo").innerHTML = "Condition Matched";
}
}
</script>

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 mobile how to change select menu text align?

I am new to jquery and I am tiring to build a mobile web application, So I am using jquery mobile (1.4.5), and I have one simple problem I don't know how to change where the text in the select menu is located. I tried to do many things like to add a span with style of float:right or center and so on..
so here is my code:
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="select-custom-13">Select C</label>
<select style="text-align: right;" name="select-custom-13" id="select-custom-13" data-native-menu="false" class="filterable-select" data-icon="false">
<span style="float:right; text-align:right;">
<option>עיר</option>
<option value="#">באר שבע</option>
<option value="#">ת"א</option>
<option value="#">אילת</option>
</span>
</select>
</fieldset>
and the out put is like this :
And what I want it to look like is something like this :
So like you can see the text is on the right now and the cursor in the search field is also on the right.
Any advice how I can accomplish this ? Thanks is advance to everyone !
Try dir="rtl" on a parent element.
<fieldset dir="rtl" data-role="controlgroup" data-type="horizontal">
<label for="select-custom-11">Select A</label>
<select name="select-custom-11" id="select-custom-11" data-native-menu="false" data-icon="false">
<option>מועדון</option>
<option value="#">פורום</option>
<option value="#">אבסנט</option>
<option value="#">זיגי</option>
</select>
<label for="select-custom-12">Select B</label>
<select name="select-custom-12" id="select-custom-12" data-role="date" data-native-menu="false" data-icon="false">
<option>תאריך</option>
<option value="1">יום ראשון</option>
<option value="2">יום שני</option>
<option value="3">יום שלישי</option>
<option value="4">יום רבעי</option>
</select>
<label for="select-custom-13">Select C</label>
<select style="text-align: right;" name="select-custom-13" id="select-custom-13" data-native-menu="false" class="filterable-select" data-icon="false">
<span style="float:right; text-align:right;">
<option>עיר</option>
<option value="#">באר שבע</option>
<option value="#">ת"א</option>
<option value="#">אילת</option>
</span>
</select>
</fieldset>

Activate particular drop-down list when user selects the radio button in AngularJS

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>

Radio buttons and hidden fields

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

Categories