We Keep Coding

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>

Show select field if checkbox is checked

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>

Automatic scroll on href

I am trying to add some improvements to a site that I haven't developed, and I currently have a navigation panel on the page. The HTML for this is below
<div id="calendar-nav-container">
<span class="calendar-nav" style="float: left"> <<< </span>
<span class="calendar-nav" style="float: left"> < </span>
<span class="calendar-nav" style="float: right"> >>> </span>
<span class="calendar-nav" style="float: right"> > </span>
<form action="/Calendar" id="calendarForm" method="get"> <label for="CalendarType">
<select name="calendarType">
<option value="Courses" selected="selected">By Course</option>
<option value="Venues">By Venue</option>
<option value="Trainers">By Trainer</option>
</select></label>
<label for="LocationId"><select id="locationId" name="locationId">
<option value="">All Locations</option>
<option value="1">Brighton</option>
<option value="2">London</option>
<option value="3">Leeds</option>
<option value="4">New York</option>
<option value="5">Frankfurt</option>
<option value="6">Hong Kong</option>
<option value="7">Toronto</option>
<option value="8">Dublin</option>
<option value="9">Cape Town</option>
<option value="10">Glasgow</option>
<option value="11">Newcastle</option>
<option value="16">Singapore</option>
<option value="17">Birmingham</option>
</select></label>
<label for="DaysToShow"><select id="daysToShow" name="daysToShow">
<option value="5">1 week</option>
<option value="19">3 weeks</option>
</select></label>
<label for="StartDate"><input id="startDate" name="startDate" type="text" value="06/07/2015" class="hasDatepicker"></label>
<label for="IncludePond" style="color: white"><input checked="checked" data-val="true" data-val-required="The Boolean field is required." id="includePond" name="includePond" type="checkbox" value="true"><input name="includePond" type="hidden" value="false">Include Pond Courses </label>
</form></div>
I want to maintain page scrolling when these options or links are clicked or chosen. I have limited HTML knowledge.

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>');

Input focus doesnt work / can't select radio button - Bootstrap

I have the following html code which uses twitter bootstrap framework, where I am not able to select the input fields,its focus gets removed when I click on it and also I am not able to select a radio button.Even if I select one,it moves to the first radio button and Im not able to select the second one.Please help me resolve this issue.And the main thing is that this is happening in firefox browser and in chrome and IE its working fine!
<form action="test.php" style="border: solid 1px #eee;box-shadow: 10px 10px 5px #888888;margin-top:20px" class="panel-body" method="POST" id="myForm" data-validate="parsley">
<div id="alert" style="display:none" class="alert alert-danger text-center">Please enter a valid card number !</div>
<div>
<div class="col-md-4">
<input type="radio" data-required="true" name="cardType" id="one" class="" value="CC"><label for="radio43" class="css-label cb3">Credit Card</label>
</div>
<div class="col-md-4">
<input type="radio" name="cardType" id="one" class="" value="DB"><label for="radio53" class="css-label cb3">Debit Card</label>
</div>
<div class="col-md-4">
<img src="certificate.png" width="120" class="bw">
</div>
</div>
<!-- Card Payment -->
<div id="a">
<br>
<br>
<br>
<input type="hidden" id="ccType" name="ccType">
<ul style="float:right;display:none" class="cards">
<li class="visa"></li>
<li class="visa_electron"></li>
<li class="mastercard"></li>
<li class="maestro"></li>
</ul>
<div class="col-md-8">
<div class="form-group">
<label for="exampleInputEmail1">Card number</label>
<div class="fake-input">
<input type="text" class="form-control zwitch_data" autocomplete="off" data-required="true" data-trigger="change" id="ccnumber" name="ccnumber" onblur="testCreditCard () ">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputPassword1">CVV</label><input type="password" maxlength="4" class="form-control" data-required="true" data-trigger="change">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Expiry Month</label>
<select name="expiry_month" class="form-control" data-required="true" data-trigger="change">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputPassword1">Expiry Year</label>
<select name="expiry_year" class="form-control" data-required="true" data-trigger="change">
<option selected="" value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="exampleInputPassword1">Name on Card</label><input type="text" class="form-control" name="name_on_card" data-required="true" data-trigger="change">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="hidden" name="ak" value="">
<input type="hidden" name="amount" value="10.00">
<input type="hidden" name="app" value="Checkout">
<input type="hidden" name="orderID" value="123456">
<input type="hidden" name="email" value="">
<input type="hidden" name="mobileNo" value="9999999999">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block m-b-sm">Pay</button>
</div>
</div>
</div><!-- Card payments ends here -->

I don't see anything wrong with the code you posted, per se.
I personally prefer to wrap radio input buttons in the label tag without the for="" attribute. This makes it so clicking on the text also selects the radio button. Like so:
<label class="css-label cb3">
<input type="radio" data-required="true" name="cardType" id="one" class="" value="CC">
Credit Card
</label>
I tested your code in this jsfiddle (granted, I added my radio button change) and it seems to work. There must be something else in your code that is causing the issue. You could try posting a link to your development website.

I encountered probably same problem. Don't use "contenteditable='true'" property.
ERROR EXAMPLE:
<div class="input" contenteditable="true">
<label for="RadioOne"><input type="radio" value="val1" name="radio" id="RadioOne">Radio 1</label>
<label for="RadioTwo"><input type="radio" value="val2" name="radio" id="RadioTwo">Radio 2</label>
</div>
In your case if it isn't "contenteditable" search for other attributes which could interfere.

I think the problem is in your question, not in the code. Radio buttons all have the same name and are treated as a group. This is why the first one is selected with a tab, then to get to individual buttons with the arrow keys. I might have misunderstood the question but I hope its useful.
g