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>
Related
In JavaScript, how would I get whatever option the user selects from the menu list? I'm trying to make it so that when the first option "default" is selected, it displays an error message.
How do i do this in Javascript without changing the HTML? Thanks in advance!
<div class="error"></div>
<form class="form">
<div class="form-control">
<label for="menu">Menu List</label>
<select name="menu" id="menu">
<option value="default">Choose an image...</option>
<option value="fries">Fries</option>
<option value="ice-cream">Ice cream</option>
<option value="cake">Cheesecake</option>
</select>
</div>
</form>
Get the value property of the <select> element.
document.querySelector("#submit").addEventListener("click", function() {
let choice = document.getElementById("menu").value;
if (choice == "default") {
alert("Please select an image");
} else {
console.log("Thank you for purchasing " + choice);
}
});
<div class="error"></div>
<form class="form">
<div class="form-control">
<label for="menu">Menu List</label>
<select name="menu" id="menu">
<option value="default">Choose an image...</option>
<option value="fries">Fries</option>
<option value="ice-cream">Ice cream</option>
<option value="cake">Cheesecake</option>
</select>
</div>
<br>
<button type="button" id="submit">Submit</button>
</form>
If select has a blank first value and the select is required, they cannot submit the form
const sel = document.getElementById("menu");
sel.options[0].value=""; // remove the value
sel.setAttribute("required","required");
<div class="error"></div>
<form class="form">
<div class="form-control">
<label for="menu">Menu List</label>
<select name="menu" id="menu">
<option value="default">Choose an image...</option>
<option value="fries">Fries</option>
<option value="ice-cream">Ice cream</option>
<option value="cake">Cheesecake</option>
</select>
</div>
<input type="submit">
</form>
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>
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>
how to connect two dropdown lists in html by putting conditions.
<p>Enter your source and destination.</p>
<p>From:</p>
<select name="from">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<p>To:</p>
<select name="To">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<form method="post" action="flights.html">
<input type="submit" value="search" />
</form>
when user enter source and destination and click on search button it will go on different page on all different entries in two dropdown lists.
First, your select dropdowns need to be INSIDE your form.
<form method="post" action="flights.html" >
<p>Enter your source and destination.</p>
<p>
From:</p>
<select name="from">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<p>
To:</p>
<select name="To">
<option value="Islamabad">Islamabad</option>
<option value="Lahore">Lahore</option>
<option value="murree">Murree</option>
<option value="Muzaffarabad">Muzaffarabad</option>
</select>
<input type="submit" value="search" />
</form>
Second, on the action page, you can use PHP to process the form variables, then output conditional content based on them. Most likely the action should be flights.php, not flights.html