I basically want an image to appear if a car is chosen in the drop down.Every time I alter the code the if statements stop working and the image never appears. I'm new to coding and am not sure how to go about it. Any help would be appreciated.
HTML
<script src="Script\configurator.js" type="text/javascript"></script>
<a> First Select a Car Make </a>
<form name="CarConfigurator">
<select name="Car_make" onchange="Transmission(this.value);">
<option value=" " selected="selected">None</option>
<option value="1">Audi RS6</option>
<option value="2">BMW M4</option>
<option value="3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select name="A_M" >
<option value="0" selected="selected">None</option>
<option value="1" selected="selected">Automatic</option>
<option value="2" selected="selected">Manual</option>
</select>
</form>
Javascript
function Transmission(Car) {
var make = document.CarConfigurator.A_M;
make.options.length = 0;
if (Car == "1") {
make.options[make.options.length] = new Option('Automatic', '1');
make.options[make.options.length] = new Option
('Manual', '2');
}
if (Car == "2") {
make.options[make.options.length] = new Option('Manual', '2');
}
if (Car == "3") {
make.options[make.options.length] = new Option('Automatic', '3');
}
}
I change some of your code, because I can't use it. Try this.
<form name="CarConfigurator">
<select name="Car_make">
<option value="" selected="selected">None</option>
<option value="1">Audi RS6</option>
<option value="2">BMW M4</option>
<option value="3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select name="A_M" >
<option value="0" selected="selected">None</option>
<option value="1">Automatic</option>
<option value="2">Manual</option>
</select>
</form>
<br>
<br>
<img id="carImage" style="width:500px">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
function transmission(car, option) {
if (car == "1" && option == "1") { // Audi RS6 | Automatic
$("#carImage").attr('src',"https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Audi_RS6_-_Mondial_de_l'Automobile_de_Paris_2014_-_001.jpg/280px-Audi_RS6_-_Mondial_de_l'Automobile_de_Paris_2014_-_001.jpg");
} else if (car =="2" && option == "2") { // BMW M4 | Manual
$("#carImage").attr('src',"http://buyersguide.caranddriver.com/media/assets/submodel/7774.jpg");
} else if (car == "3" && option == "1") { // Mercedes C63 AMG | Automatic
$("#carImage").attr('src',"http://images.cdn.autocar.co.uk/sites/autocar.co.uk/files/styles/gallery_slide/public/mercedes-benz-c63-amg-1.jpg?itok=yHBoS8gg");
} else {
$("#carImage").attr('src',"");
}
}
$("select").on("change",function(){
var selectCar = $("select[name=Car_make]");
var selectCarOption = $("select[name=A_M]");
transmission(selectCar.val(), selectCarOption.val());
});
</script>
Related
I am trying to show hide divs based on multiple dropdown selection.
Here is HTML page
<select id="vehicle">
<option="bike">Bike</option>
<option="car">Car</option>
</select>
<select id="electric">
<option="yes">Yes</option>
<option="no">no</option>
</select>
<div id="car_text">
<input type="text">
</div>
<div id="bike_text">
<input type="text">
</div>
And this is jquery i am trying to make but still fail
$(document).ready(function ()
{
$("#vehicle, #electric").change(function ()
{
$("#vehicle, #electric").find("option:selected").each(function ()
{
var vehicleSelect = $("#vehicle").attr("value");
var electricSelect = $("#electric").attr("value");
if (vehicleSelect == "car" && electricSelect == "yes")
{
$("#car_text").show();
$("#bike_text").hide();
}
else
{
$("#car_text").hide();
$("#bike_text").show();
}
});
});
});
Thanks for the help
You can do it like this:
$(document).ready(function() {
$("#vehicle, #electric").change(function() {
var vehicleSelect = $("#vehicle").val();
var electricSelect = $("#electric").val();
$("#car_text").toggle(vehicleSelect == "car" && electricSelect == "yes")
$("#bike_text").toggle(vehicleSelect == "bike" && electricSelect == "yes")
});
});
There is no reason to loop over each option. Second you should use $("#vehicle").val() not $("#vehicle").attr("value")
Demo
$(document).ready(function() {
$("#vehicle, #electric").change(function() {
var vehicleSelect = $("#vehicle").val();
var electricSelect = $("#electric").val();
$("#car_text").toggle(vehicleSelect == "car" && electricSelect == "yes")
$("#bike_text").toggle(vehicleSelect == "bike" && electricSelect == "yes")
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="vehicle">
<option value="bike">Bike</option>
<option value="car">Car</option>
</select>
<select id="electric">
<option value="yes">Yes</option>
<option value="no">no</option>
</select>
<div id="car_text">
<input type="text" value="car">
</div>
<div id="bike_text">
<input type="text" value="bike">
</div>
$(document).ready(function() {
$("#vehicle").change(function() {
var vehicle = $('#vehicle').find(":selected").val();
if (vehicle == 'bike') {
$("#car_text").addClass('d-none');
$("#bike_text").removeClass('d-none');
}
if (vehicle == 'car') {
$("#bike_text").addClass('d-none');
$("#car_text").removeClass('d-none');
}
});
});
.d-none {
display: none;
}
<html>
<body>
<select id="vehicle">
<option value="bike">Bike</option>
<option value="car">Car</option>
</select>
<select id="electric">
<option value="yes">Yes</option>
<option value="no">no</option>
</select>
<div id="car_text" class="d-none">
<input type="text" placeholder="car">
</div>
<div id="bike_text" class="d-none">
<input type="text" placeholder="bike">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js">
</script>
</body>
</html>
I have this code i want to enabled or disable a certain select box for transaction.
I don't know what code is correct for this one hope you can lend me a hand.
<select id="paymenttype" class="paymenttype" name="input-paymenttype" onChange="changetextbox()">
<option value="Cash">Cash</option>
<option value="Installment">Installment</option>
</select>
<select id="paymentterms" class="" name="input-paymentterms" disabled="true">
<option value="3">3x</option>
<option value="4">6x</option>
<option value="6">12x</option>
</select>
<script type="text/javascript">
function changetextbox()
{
var e = document.getElementById("paymenttype");
var value = e.options[e.selectedIndex].value;
if (value == "Cash") {
alert('I need to disable payment terms');
}
else{
alert('I need to enable payment terms');
document.getElementById("paymentterms").disable =='false';
}
}
</script>
Use this to remove attribute:
document.getElementById("paymentterms").removeAttribute("disabled");
You can use .removeAttribute() you can check it here
function changetextbox()
{
var e = document.getElementById("paymenttype");
var value = e.options[e.selectedIndex].value;
if (value == "Cash") {
alert('I need to disable payment terms');
}
else{
alert('I need to enable payment terms');
document.getElementById("paymentterms").removeAttribute('disabled');
}
}
<select id="paymenttype" class="paymenttype" name="input-paymenttype" onChange="changetextbox()">
<option value="Cash">Cash</option>
<option value="Installment">Installment</option>
</select>
<select id="paymentterms" class="" name="input-paymentterms" disabled="true">
<option value="3">3x</option>
<option value="4">6x</option>
<option value="6">12x</option>
</select>
Thank you so much for the answer. I tried and test all your answer. It is quite impressive I finish it with your help. So i decided to paste the final code here.
<select id="paymenttype" class="paymenttype" name="input-paymenttype" onChange="changetextbox()">
<option value="Cash">Cash</option>
<option value="Installment">Installment</option>
</select>
<select id="paymentterms" class="" name="input-paymentterms" disabled="true">
<option value="3">3x</option>
<option value="4">6x</option>
<option value="6">12x</option>
</select>
<script type="text/javascript">
function changetextbox()
{
var e = document.getElementById("paymenttype");
var value = e.options[e.selectedIndex].value;
if (value == "Cash") {
document.getElementById("paymentterms").disabled = true;
} else
{
document.getElementById("paymentterms").disabled = false;
}
}
</script>
I'm sure this must be a simple fix, but I'm not sure what's going wrong. I'm looking to create a form that redirects depending on the selection of multiple fields.
My coding is as follows:
<form onsubmit="return setAction()" method="post" action="">
<div class="row">
<label for="FormCtrl_1">Where are you going?</label>
<select id="FormCtrl_1" name="FormCtrl_1">
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
</select>
<select id="FormCtrl_2" name="FormCtrl_2">
<option value="Business">Business</option>
<option value="Pleasure">Plesure</option>
</select>
<select id="FormCtrl_3" name="FormCtrl_3">
<option value="1">1 Day</option>
<option value="2">2 Day</option>
</select>
</div>
<div class="row">
<input value="Submit" type="submit" />
</div>
</form>
With the js:
function setAction() {
var country = document.getElementById("FormCtrl_1").value;
var reason = document.getElementById("FormCtrl_2").value;
var days = document.getElementById("FormCtrl_3").value;
if (country === "Afghanistan" && reason === "Business" && days === "1")
{
window.location = "https://google.com";
}
if (country === "Afghanistan" && reason === "Business" && days === "2")
{
window.location = "https://facebook.com";
}
return false; }
I have a multiselect option. If i select Mahesh & Dilip both, I want to show a pop up message that you can not select both at a time. If I click Ok on pop up then I want to deselect ONLY these two. How to do this? Here is my code:
<select multiple="" name="playerNames" id="playerNames" class="">
<option value="">-- Select --</option>
<option value="4">Rakesh</option>
<option value="5">Suresh</option>
<option value="2">Mahesh</option>
<option value="6">Dilip</option>
<option value="1">Ramesh</option>
<option value="3">Dinesh</option>
</select>
<script type="text/javascript">
$('#playerNames').on('change',function(){
var selected = $('#playerNames:selected').map(function(){return $(this).val();}).get();
alert(selected.length);
if(jQuery.inArray("Mahesh", selected) !== -1){
var maheshSelected = true;
}
if(jQuery.inArray("Dilip", selected) !== -1){
var dilipSelected = true;
}
if(maheshSelected == true && dilipSelected == true){
var alertMessage = "You cannot choose Mahesh + Dilip. Please select either Mahesh or Dilip.";
alert(alertMessage);
if (confirm(alertMessage)) {
//code to deselect both
}
}
});
You can select the options using $('option:contains(Mahesh), option:contains(Dilip)') and deselect them using .prop('selected', false):
$('#playerNames').on('change', function(){
const selected = $('#playerNames :selected').map(function() {return $(this).text()}).get()
if (selected.includes('Mahesh') && selected.includes('Dilip')) {
alert('You cannot choose Mahesh + Dilip. Please select either Mahesh or Dilip.')
$('option:contains(Mahesh), option:contains(Dilip)').prop('selected', false)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="" name="playerNames" id="playerNames" class="">
<option value="">-- Select --</option>
<option value="4">Rakesh</option>
<option value="5">Suresh</option>
<option value="2">Mahesh</option>
<option value="6">Dilip</option>
<option value="1">Ramesh</option>
<option value="3">Dinesh</option>
</select>
Here's a cross-browser solution (works on Internet Explorer 9+):
$('#playerNames').on('change', function(){
var selected = $('#playerNames :selected').map(function() {return $(this).text()}).get()
if (selected.indexOf('Mahesh') > -1 && selected.indexOf('Dilip') > -1) {
alert('You cannot choose Mahesh + Dilip. Please select either Mahesh or Dilip.')
$('option:contains(Mahesh), option:contains(Dilip)').prop('selected', false)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="" name="playerNames" id="playerNames" class="">
<option value="">-- Select --</option>
<option value="4">Rakesh</option>
<option value="5">Suresh</option>
<option value="2">Mahesh</option>
<option value="6">Dilip</option>
<option value="1">Ramesh</option>
<option value="3">Dinesh</option>
</select>
I need your help,
Using javascript, how could I add some sort of data form validation that would be two-fold:
1st Event, [OnKeyUp] attached to all of the input boxes
2nd Event, [OnChange] attached to all of the select boxes
Typical User Scenarios
If there is any data present in any of the input boxes and no selected option values then { enable the search button } else { keep the search button disabled }
If there are any selected option values who’s option value is not null and no data present in all of then { enable the search button } else { keep the search button disabled }
<!DOCTYPE html>
<html>
<head></head>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>
</html>
var car=$('#car'); var fruits=$('#fruits');
var veggie=$('#veggie'); var number = $('#number');
$('select').change(function(){
validate();
});
$('input').keyup(function(){
validate();
});
function validate(){
if(($(veggie).val()!='' || $(number).val()!='') &&
$(car).val()=='' && $(fruits).val()==''){
$('#search').prop('disabled',false);
}else if($(veggie).val()=='' && $(number).val()=='' &&
($(car).val()!='' || $(fruits).val()!='')){
$('#search').prop('disabled',false);
}else{
$('#search').prop('disabled',true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<form id="myform">
Cars
<select id="car">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
Fruits
<select id="fruits">
<option value=""></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pear">pear</option>
<option value="strawberry">strawberry</option>
<option value="mango">mango</option>
<option value="orange">orange</option>
</select>
<br><br>
Vegetable
<input type="input" id="veggie">
<br><br>
Number
<input type="input" id="number">
<br><br>
<input type="button" value="search" id="search" disabled>
</form>
</body>
I'm not 100% sure, but it looks like you want to enable the button if only one of the select elements has a value or one of the input elements has a value, but not if both (or neither) do.
If that's the case then this should work, and it allows you you add as many elements to it as you need by adding IDs to the arrays at the top.
https://jsfiddle.net/j7by6bsz/
var selectInputIds = ['fruits', 'car'];
var textInputIds = ['veggie', 'number'];
function setButtonState() {
var hasVal = function(arr) {
for(var i = 0; i < arr.length; i++) {
if(document.getElementById(arr[i]).value) {
return true;
}
}
return false;
};
var hasSelectValue = function () {
return hasVal(selectInputIds);
}
var hasTextValue = function () {
return hasVal(textInputIds);
}
var theButton = document.getElementById('search');
var s = hasSelectValue();
var t = hasTextValue();
theButton.disabled = ((s && t) || (!t && !s)); // you can do this bit smarter, but this is explicit
}
(function attachStuff (arr, evt) {
function listenIn(arr, evt) {
for(var i = 0; i < arr.length; i++) {
document.getElementById(arr[i]).addEventListener(evt, setButtonState);
}
}
listenIn(selectInputIds, 'change');
listenIn(textInputIds, 'keyup');
}())
Your requirements could use some clarification around what happens if both input types have values though.