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 input field of a form according to the value of dropdown

I have a form which contains a dropdown and 2 other input fields.Initially I want to show only the dropdown and hide other two fields and show the other two fields when the value of dropdown is other.
<form id="submit_form" name="myform" action="/download" method="post"> {% csrf_token %}
<fieldset>
<select name="one" onchange="if (this.value=='other'){this.form['datefrom'].style.visibility='visible'}else {this.form['datefrom'].style.visibility='hidden'};">
<option value="none" selected="selected">Select...</option>
<option value = "1m" >1 month</option>
<option value = "2m">2 months</option>
<option value = "3m">3 months</option>
<option value = "other">other</option>
</select>
<br> From:
<br>
<input type="datetime-local" name="datefrom"><br> To:
<br>
<input type="datetime-local" name="dateto"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
In my code initially all the input fields are showing.So if anybody could me how to hide and the two datetime input fields initially and show them only when the value of dropdown is other.Any help would be appreciated.

You can use javascript.
First, you set your input field as hidden who warp inside div.
Use onchange for dynamic condition based on your select option value.
Check this example.
function func(value) {
if (value == 'other') {
$('#input_field').show();
} else {
$('#input_field').hide();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="submit_form" name="myform" action="/download" method="post"> {% csrf_token %}
<fieldset>
<select name="one" onchange="func(this.value)">
<option value="none" selected="selected">Select...</option>
<option value="1m">1 month</option>
<option value="2m">2 months</option>
<option value="3m">3 months</option>
<option value="other">other</option>
</select>
<div id="input_field" style="display:none;">
<br> From:
<br>
<input type="datetime-local" name="datefrom"><br> To:
<br>
<input type="datetime-local" name="dateto"><br><br>
</div>
<input type="submit" value="Submit">
</fieldset>
</form>

Javascript solution
<!DOCTYPE html>
<html>
<head>
<style>
.cs-hide{
display:none;
}
</style>
</head>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value = "1m" >1 month</option>
<option value = "2m">2 months</option>
<option value = "3m">3 months</option>
<option value = "other">other</option>
</select>
<br>
<div id="dateContainer" class="cs-hide">
From:<br>
<input type="datetime-local" name="datefrom"><br>
To:<br>
<input type="datetime-local" name="dateto"><br><br>
</div>
<input type="submit" value="Submit">
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
var element = document.getElementById("dateContainer");
if(x === "other"){
element.classList.remove("cs-hide");
}else{
element.classList.add("cs-hide");
}
}
</script>
</body>
</html>

Javascript - Toggle html5 required="" attribute based on form selection

I have a script that's almost complete but I can't figure out the last piece. The Javascript makes the check box appear or disappear based on the drop down selection (this is working great). But I'm trying to make the check box "Required" if the checkbox is present (the part I can't figure out).
I'm using the htm5 required="" attribute on the check box field, but the form still tries to validate it even with the 3rd option selected, which hides the check box altogether.
Is there a way to toggle on/off the required="" in coordination with the selection of the drop down, or any other suggestions?
<script>
function getTerms(select){
var selectedString = select.options[select.selectedIndex].value;
if(selectedString == "1" || selectedString == "2")
{
document.getElementById("terms_target").style.display = "block";
}else {
document.getElementById("terms_target").style.display = "none";
}
}
</script>
<form action="process_affiliate.php" method="post" onchange="getTerms(this)" >
<select name="InquiryType" required="">
<option value="">Please Select Your Inquiry Type</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="terms_target" style="display:none;">
<input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>

Here is a newer version using addEventListener
window.addEventListener("DOMContentLoaded", () => {
const sel = document.querySelector("[name=InquiryType]"),
terms = document.getElementById("terms_target"),
form = document.getElementById("myForm"),
agree = form.checked; // checked is a poor name for a field
toggleAgree = () => {
const show = ["1", "2"].includes(sel.value);
terms.hidden = !show;
agree.required = show;
};
sel.addEventListener("change", toggleAgree)
toggleAgree(); // initialise
})
<form action="process_affiliate.php" id="myForm" method="post">
<select name="InquiryType" required>
<option value="">Please Select Your Inquiry Type</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="terms_target" hidden>
<input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>
Older version
window.onload=function() {
var sel = document.getElementsByName("InquiryType")[0];
sel.onchange=function() {
var selectedString = this.value,
show = selectedString == "1" || selectedString == "2",
terms = document.getElementById("terms_target"),
checked=document.getElementsByName("checked")[0];
terms.style.display = show?"block":"none";
if (show) checked.setAttribute("required","required");
else checked.removeAttribute("required");
}
sel.onchange(); // initialise
}
<form action="process_affiliate.php" method="post">
<select name="InquiryType" required="">
<option value="">Please Select Your Inquiry Type</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<div id="terms_target" style="display:none;">
<input type="checkbox" name="checked" value="Checked" required="" />I agree to the terms
</div>
<input type="submit" value="Submit">
</form>

Change the values of radio buttons depending on dropdown selection

Hi I have been trying to set radio buttons to certain values depending on which select drop down was chosen.
First the select statement:
<select id="department" name="department" class="input-xlarge" onchange="setDefault();">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select>
I created a function that I thought would allow me to set the value, depenting on what is selected.
<script>
function setDefault() {
if (department.val() == '1'){
alert('One');
}
$("#radio-0").prop("checked", true);
</script>
I thought that if the val of department (the select drop down) was equal to 1 then set this value.
The error that I get in the console window is
*Uncaught TypeError: undefined is not a function*
I know this should be simple but as a jQuery novice I know I'm probably making a simple mistake.
Overall the goal would be to set a series of radio buttons to a specific value depending on the drop down selection. For example, if Read only was selected, certain values would be set as a 1, 2 ,3 4 or 5 (for a radio button) and so on depending on the drop down selection.
Thanks

Use jQuery onchange function.
$(document).ready(function () {
$("#department").change(function () {
if(this.value=='1')
{
alert("one");
}
$("#radio-0").prop("checked", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<select id="department" name="department" class="input-xlarge">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select>
<input type="radio" id="radio-0">

I would recommend using javascript for this. It is such a small request that you don't really need an external libarary.
The HTML based from yours and including some radio buttons
<select id="department" name="department" class="input-xlarge" onchange="setDefault(this);">
<option value="" selected></option>
<option value="1">Read Only</option>
<option value="2">HR Staff</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
<option value="7">Select 5</option>
</select><br />
<input type="radio" name="selectedop" id="radio-1" /><br />
<input type="radio" name="selectedop" id="radio-2" /><br />
<input type="radio" name="selectedop" id="radio-3" /><br />
<input type="radio" name="selectedop" id="radio-4" /><br />
<input type="radio" name="selectedop" id="radio-7" />
Then you simply add this javascript in your head. It selects the radio based on the value by combining "radio-" and the value to make the id.
function setDefault(input) {
document.getElementById("radio-" + input.value).checked = true;
}
JsFiddle Example: http://jsfiddle.net/bpmf3cks/

Try
$('#department').on('change',function() {
if ($(this).val() == '1') alert($(this).val())
})
http://jsfiddle.net/5x0h5g73/1/

Passing id of tag that submited form with onchange=this.form.submit()

Is there a way to know which select tag submitted form?
<form method="POST" action="submit.php">
<select id="id1" name="sel1" onchange="this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
<select id="id2" name="sel2" onchange="this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
</form>
Non-jQuery solution is preferable, but not mandatory...
P.S. Problem is that selected="select" attribute is generated dynamically (i don't know which option would be selected as default - so i can't compare default with submitted)

The first thing that comes to mind is a hidden field with a value you set. Something like this should do.
<form method="POST" action="submit.php">
<input type="hidden" name="submitselect" value="" id="submitselect">
<select id="id1" name="sel1" onchange="document.getElementById('submitselect').value='sel1';this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
<select id="id2" name="sel2" onchange="document.getElementById('submitselect').value='sel2';this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
</form>
Alternatively, you could have a default option chosen, e.g.
<option value="" selected>-</option>
That would never otherwise be chosen. That way, this option would remain unset in the selects that didn't cause the submit.