I have the following code:
Logic:
var describe = document.getElementById('describe');
var brandpower = document.getElementById('brandpower');
var describeV = describe.options[describe.selectedIndex].value || describe.value;
var brandpowerV = brandpower.options[brandpower.selectedIndex].value || describe.value;
function pollRadio() {
var handle = window.setInterval(function() {
if (jQuery('input[name="dealer"]:checked').val() == 'Non-Pro') {
jQuery('#domain').value = "null";
jQuery('#website-container').addClass('important-hide')
//window.clearInterval(handle);
} else if (jQuery('input[name="dealer"]:checked').val() == 'Pro') {
jQuery('#website-container').removeClass('important-hide')
jQuery('#domain').value = "";
jQuery('#describe').replaceWith('<select id="describe" class="describeClass custom-select" required ><option value="" selected>Tell us about your business.</option><option value="Just getting started">Just getting started</option><option value="Expanding Quickly">Expanding Quickly</option><option value="Need new cutsomers">Need new cutomers</option><option value="I need better products & solutions">I need better products & solutions</option><option value="Other">Other</option></select>');
window.clearInterval(handle);
}
}, 100);
}
pollRadio();
$(document).on('change', "#describe", function() {
if (jQuery('.describeClass').val() == 'Other') {
jQuery('.describeClass').replaceWith('<input id="describe" class="describeClass form-text" placeholder="Tell us about Other" type="text" style="height:52px; width:100%;" required> ')
}
});
$('#brandpower').on('change', function(){
if (jQuery('#brandpower').val() == 'Other') {
jQuery('#brandpower').replaceWith('<input id="brandpower" placeholder="Tell us about Other" type="text" class="form-text" style="height:52px; width:100%;" required> ')
}
});
Markup:
<div class="padded-container">
<div class="form-container-padded">
<select id="describe" class="custom-select describeClass" required >
<option value="" selected>Which best describes you?</option>
<option value="Household CEO">Household CEO</option>
<option value="Geek Dad">Geek Dad</option>
<option value="Geek Mom">Geek Mom</option>
<option value="Home Automation Thought Leader">Home Automation Thought Leader</option>
<option value="New Home Automation Business Owner">New Home Automation Business Leader</option>
<option value="Z-Wave Evangelist">Z-Wave Evangelist</option>
<option value="Integrator">Integrator</option>
<option value="IoT Expert">IoT Expert</option>
<option value="Enviormentalist">Enviormentalist</option>
<option value="Educator">Educator</option>
<option value="Computer Science Graduate">Computer Science Graduate</option>
<option value="CES Atendee">CES Atendee</option>
<option value="Competitor">Competitor</option>
<option value="College Student">College Student</option>
<option value="Urban Dweller">Urban Dweller</option>
<option value="Minimalist">Minimalist</option>
<option value="Home Builder">Home Builder</option>
<option value="New Home Owner">New Home Owner</option>
<option value="Electrician">Electrician</option>
<option value="Plumber">Plumber</option>
<option value="Other type of Tradesmen/Tradeswoman">Other type of Tradesmen/Tradeswoman</option>
<option value="General Contractor">General Contractor</option>
<option value="Generalist">Generalist</option>
<option value="Summer Home Owner">Owner</option>
<option value="Serial Entreprenour">Serial Entreprenour</option>
<option value="Tech Savvy">Tech Savvy</option>
<option value="Tinkerer">Tinkerer</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="padded-container">
<div class="form-container-padded">
<select id="brandpower" class="custom-select" required>
<option value="" selected>How well do you know dome?</option>
<option value="I don't. This is my first time hearing about Dome.'">I don't. This is my first time hearing about Dome.</option>
<option value="Have heard of somewhere, but not sure where.">Have heard of somewhere, but not sure where.</option>
<option value="I discovered Dome while researching on the internet.">I discovered Dome while researching on the internet.</option>
<option value="I clicked on an ad for Dome I saw online">I clicked on an ad for Dome I saw online</option>
<option value="Someone told about Dome">Someone told about Dome</option>
<option value="We met at a tradeshow">We met at a tradeshow</option>
<option value="I'm alreaedy interested in working with Dome">I'm alreaedy interested in working with Dome</option>
<option value="I have Dome installed in my home">I have Dome installed in my home</option>
<option value="I've been to Dome's websites several times">I've been to Dome's websites several times</option>
<option value="Other">Other</option>
</select>
</div>
</div>
So, the idea is, on lines 2 - 4, if one element doesn't exist the interpreter picks up the value of the one that does hence the || operator.
The jQuery that is using the replaceWith method is dynamically changing DOM elements if certian conditions are met. Part of me feels as if this, coupled with getDocumentById is part of the issue because an ID can only exist once. It looks to exist properly though in the console.
However, while I believe this should work in theory, chrome throws an error where at the [element.selectedIndex].value part because it is undefined. How can I overcome this error and have my forms work the way I want them to?
EDIT: Short Circut Evaluation JavaScript OR (||) variable assignment explanation
The interpreter will try to evaluate everything before the ||, so it will blow up if any of the following are true:
describe is undefined (no element in the DOM with that ID), so you can't access describe.options
describe.options is undefined, meaning you can't reference the [describe.selectedIndex] property on it
describe.selectedIndex is undefined, which means that describe.options[describe.selectedIndex] will return undefined, and then you cannot access the value property on it
You'll just need to be more defensive, maybe something like this:
var describeV = (describe && describe.options && describe.selectedIndex) ? describe.options[describe.selectedIndex].value : describe.value;
Related
If the cardSelect variable is true, just let [readonly]="cardSelect"
<select name="card-exp-month" #validateMonth formControlName="digiMes" class="form-
control" name="validade" id="validade" >
<option value="">Mês</option>
<option value="01">01 Jan</option>
<option value="02">02 Fev</option>
<option value="03">03 Mar</option>
<option value="04">04 Abr</option>
<option value="05">05 Mai</option>
<option value="06">06 Jun</option>
<option value="07">07 Jul</option>
<option value="08">08 Ago</option>
<option value="09">09 Set</option>
<option value="10">10 Out</option>
<option value="11">11 Nov</option>
<option value="12">12 Dez</option>
</select>
When is input text its works
<label for="nomeimpresso">Nome <b>impresso</b> no cartão<span class="text-danger"> *
</span></label>
<input #nomeImpresso formControlName="digiNome" name="holder-name" id="nomeimpresso"
class="form-control col-lg-6" type="text" [readonly]="cardSelect" >
try [disabled]="cardSelect" or if that didn't work [attr.disabled]="!editable ? '' : null" as a workaround.
As stated by #rmjoia, my previous answer is dangerous and should be avoided (see below).
Updated answer
For disabling the whole "select" element you can use a boolean variable declared in your controller (isDisabled in my following example)
In the HTML:
<select [disabled]="isDisabled">
<option>a</option>
</select>
In the controller:
export class AppComponent {
…
// the variable declaration (at start the select is enabled)
isDisabled = false;
// later you may change the state of the select element.
onClick() {
this.isDisabled = true;
}
}
Some code implementing different solutions :
https://stackblitz.com/edit/angular-ivy-qkwier?file=src/app/app.component.html
Previous answer
For disabling the whole "select" element you can :
<select … [disabled]="isSelectDisabled()">
…
</select>
and decide in your controller the logic behind the isSelectDisabled method.
Okay guys, I have a problem. For some reason my JavaScript file isn't keeping track on how many times the user choose the "no" class when he selects an option in the select tags. I'm trying to make it so that when the user selects no in the dropdown list,it keeps track of how many times the user selected no. Any idea on how to keep track how many times the user selects no without Jquery in javascript?
<head>
<meta charset="utf-8" />
<meta name="quiz" content="myown quiz" />
<title>Quiz</title>
</head>
<body>
<script type="text/javascript" src="machine.js"></script>
<link rel="stylesheet" type="text/css" href="quizformatting.css">
<h1>Choose the major right for you</h1>
<pre>
<form>
Do you like enjoy programming?
<select>
<option class="choice">Select a value</option>
<option class="program">Yes</option>
<option class="no">No</option>
</select>
Do you enjoy 2d animation and 3d animation?
<select>
<option class="choice">Select a value</option>
<option class="art">Yes</option>
<option class="no">no</option>
</select>
Do you like music
<select>
<option class="choice">Select a value</option>
<option>Yes</option>
<option class="no">no</option>
</select>
What are your favorite pastimes?
<select>
<option class="choice">Select a value</option>
<option class="music">Listening to music</option>
<option class="program">making websites</option>
<option class="art">Drawing</option>
<option class="no">None of these</option>
</select>
Out of all the activities you like to do, which one do you enjoy the most?
<select>
<option class="choice">Select a value</option>
<option class="art">Painting and drawing</option>
<option class="music">Playing instruments</option>
<option class="art">Drawing</option>
<option class="no">None of these</option>
</select>
Would you be interested in making art or coding for video games?
<select>
<option class="choice">Select a value</option>
<option class="program">I would be interested in learning the programming languages used to create the scripting for games</option>
<option class="art">I would like to the models and the environment for modeling</option>
<option class="no">I'm not interested in either of these options</option>
</select>
Do you enjoy making websites or learning how to sing?
<select>
<option class="choice">Select a value</option>
<option class="music">Learning how to sing</option>
<option class="program">making websites for projects</option>
<option class="no">I'm not interested in any of this</option>
</select>
Do you enjoy listening to music more or making programming applications?
<select>
<option class="choice">Select a value</option>
<option class="music">I would like to listen to music</option>
<option class="program">Programming is my thing</option>
<option class="art">I'm more of a drawer</option>
<option class="no">I don't like any of these options</option>
</select>
Which skillset are you more interested in learning?
<select>
<option class="choice">Select a value</option>
<option class="music">Learning the notes of instruments</option>
<option class="program">Learning the language of javascript</option>
<option class="art">I like anime, so I would love to learn how to animate in anime style</option>
<option class="no">I don't want to do any of these options</option>
</select>
Please press the button to get your answer
<button type="button" onclick="Starting();">Click me</button>
</form>
</pre>
<p id="yos">Your answer here</p>
Here is my javascript code:
```javascript
function Starting() {
var artchoices = document.querySelectorAll(".art:checked");
var program = document.querySelectorAll(".program:checked");
var choice = document.querySelectorAll(".choice");
var no = document.querySelectorAll(".no:checked");
var music = document.querySelectorAll(".music:checked");
var x = document.getElementById("yos");
var answer = true;
for (var e = 0; e < choice.length; e++) {
if (choice[e].selected == true) {
answer = false;
break;
}
}
if (answer == false) {
console.log("Make sure you checked all values");
} else {
if (no == 9) {
console.log("Oh, so you don't want to become anything huh");
x.innerHTML = "HEY";
} else {
if (program > artchoices) {
console.log("Congrulations, you are an artist");
}
}
}
window.onload = Starting;
}
You need to check for the length of the list. The node list (what is returned by document.querySelectorAll(".no:checked")) will never equal 9.
if (no == 9)
needs to be
if (no.length === 9)
Here iam trying to get values based on #category selection when i select a category men or women,following select option should show the relevant options.what i did satisfied my requirement but when i try to access it using keyboard(down arrow) it shows all the options of the #subcategory.here is the code and fiddle.any help is thankful.
my fiddle http://jsfiddle.net/JUGWU/
HTML:
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1">MEN</option>
<option value="WOMEN" id="menu2">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing">Clothing</option>
<option id="Accessories" value="Accessories">Accessories</option>
<option id="Footwear" value="Footwear">Footwear</option>
<option id="Watches" value="Watches">Watches</option>
<option id="Sunglasses" value="Sunglasses">Sunglasses</option>
<option id="Bags" value="Bags">Bags</option>
</select>
Jquery:
$(document).ready(function(){
$("#category").change(function() {
var xyz = $("option:selected").attr("id");
alert(xyz);
if(xyz === "menu1"){
$("#subcategory option").hide();
$("#Clothing,#Footwear").show();
}
});
});
Try this in your conditional. The disabled property doesn't allow keyboard selection. Seems to work for me.
$("#subcategory option").prop('disabled', true).hide();
$("#Clothing,#Footwear").prop('disabled', false).show();
Also, your logic breaks if a user switches from men to women.
This answer is not exactly addressing your problem (using keyboard(down arrow)) but I think it is IMHO a better way to do what you want. And also I used the fixed part from #user2301903 answer, just to make my point. my main point here was using the markup attributes.
We can use our markup attributes to have less complexity, I changed your markup like this (added a catg attribute):
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1" catg="m">MEN</option>
<option value="WOMEN" id="menu2" catg="w">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing" catg="m">Clothing</option>
<option id="Accessories" value="Accessories" catg="w">Accessories</option>
<option id="Footwear" value="Footwear" catg="m">Footwear</option>
<option id="Watches" value="Watches" catg="w">Watches</option>
<option id="Sunglasses" value="Sunglasses" catg="w">Sunglasses</option>
<option id="Bags" value="Bags" catg="w">Bags</option>
</select>
and your code like this:
$(document).ready(function () {
$("#category").change(function () {
var catg = $("option:selected").attr("catg");
//from #user2301903 answer
$("#subcategory option").prop('disabled', true).hide();
$("option[catg=" + catg + "]").prop('disabled', false).show();
});
});
and this is your working DEMO;
and this one is another way of doing what you want which works even in IE: IE_DEMO
I have a booking form on my website and if I select 10+ people the form options for a booth disappear because they only hold a max of 9 people. This is all working and here is my script:
$(document).ready(function(){
$('#form1_people').on('change',function(){
if( $(this).val()==="10+ People"){
$("#tenplus").hide()
$("#booth-notice").show()
}
else{
$("#tenplus").show()
$("#booth-notice").hide()
}
});
});
My problem is on the homepage I have a quick booking form that when the user fills it out and it autoupdates the large form. But if I select 10+ people from the homepage the JavaScript doesn't execute.
I thought I needed to have this JavaScript on every page? I tried this but it doesn't work. I'm out of ideas. Anyone?
Thanks
UPDATE!!!!
<div>
<label for="form1_people">How many people:</label>
<select id="form1_people" name="people" class="venue-select">
<option value="Select how many people">Select how many people</option>
<option value="2 People">2 People</option>
<option value="3 People">3 People</option>
<option value="4 People">4 People</option>
<option value="5 People">5 People</option>
<option value="6 People">6 People</option>
<option value="7 People">7 People</option>
<option value="8 People">8 People</option>
<option value="9 People">9 People</option>
<option value="10 People">10 People</option>
<option value="10+ People">10+ People</option>
</select>
</div>
<div id="booth-notice" style="display:none;">
<label style="color: #ed1c24!important; font-size: 16px!important; line-height: 1.4em!important;"><em style="color: #ed1c24!important;">Customer Notice * Booths are not available for parties with more than 10 people</em></label>
</div>
<div id="tenplus"><!-- HIDE THESE IF THERE IS MORE THAN 10 PEOPLE -->
<div>
<label for="form1_booth">Would you like a Booth: <em>*Liverpool & Manchester Only</em> What's this?</label>
<select id="form1_booth" name="booth" class="venue-select">
<option value="Please select an option">Please select an option</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div>
<label for="form1_booth-package">We have some Booth Packages What's this?</label>
<select id="form1_booth-package" name="booth-package" class="venue-select">
<option value="Select an option if wanting a booth">Select an option if wanting a booth</option>
<option value="Bier Package">Bier Package</option>
<option value="Cocktail Package">Cocktail Package</option>
<option value="Just a booth please">Just a booth please</option>
</select>
</div>
</div><!-- HIDE THESE IF THERE IS MORE THAN 10 PEOPLE -->
I think you should change something in your logic and I'll explain now what I'd do.
Your JavaScript is correctly written but it's called only when the "change" event occurs. So, when the page is loaded after your post from the homepage the select value has already been changed and your function won't be called.
You could do something like this. It's not very elegant but it can do your job:
$(document).ready(function(){
boothUpdate(); // This function is called at every page load
$('#form1_people').on('change',function(){
boothUpdate(); // This function is called at every select change
});
});
function boothUpdate() {
if( $(this).val()==="10+ People"){
$("#tenplus").hide()
$("#booth-notice").show()
}
else {
$("#tenplus").show()
$("#booth-notice").hide()
}
}
I managed to sort this by adding .trigger('change'); at the end of the function.
Full working script here:
$(document).ready(function(){
$('#form1_people').on('change',function(){
if( $(this).val()=="10+ People"){
$("#tenplus").hide()
$("#booth-notice").show()
}
else{
$("#tenplus").show()
$("#booth-notice").hide()
}
}).trigger('change');
});
Thanks everyone for the help...
I'm new posting here, have visited several times over the years to read every ones ideas.
My issue is I have a form with 2 select boxes, second one populated with values upon selection in the first. The second holds a url value which you got to upon submit.
This function works perfectly using the onchange but on submit only the first of the second select list urls work. I can swap them but only the first works, all the others only pass the primary url followed by a crosshatch '#'.
<script>
$(document).ready(function($){
$("#category").change(function() {
$('select[name="product"]').removeAttr("name").hide();
$("#" + $(this).val()).show().attr("name", "product");
});
/* ' This works on all
$(".product").change(function() {
document.location = $(this).val();
});
*/
/* this only passes url on first product option list else passes opening url + #*/
$('#discover').submit(function() {
document.location = $(".product").val();
return false;
});
});
</script>
<div id="discover-box">
<form id="discover" method="post">
<fieldset>
<p class="category">
<label class="title">Category:</label>
<select id="category" name="category">
<option value="#" selected="selected">Choose category</option>
<option value="accommodation">Accommodation</option>
<option value="food">Food</option>
<option value="explore">Explore</option>
</select>
<p><label>Sub-Category:</label>
<select id="accommodation" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="accommodation_category.asp?o=1&c=1">Motels</option>
<option value="accommodation_category.asp?o=2&c=2">Camping, Caravan & Holiday Parks</option>
<option value="accommodation_category.asp?o=3&c=3">B&B, Self-Contained Houses & Cottages</option>
<option value="accommodation_category.asp?o=4&c=4">Hotels</option>
<option value="accommodation_category.asp?o=5&c=5">Backpackers & Group Accommodation</option>
<option value="accommodation_category.asp?o=6&c=6">National Parks</option>
</select>
<select id="food" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="food_wine_category.asp?o=1&t=1&c=1">Restaurants & Cafes</option>
<option value="food_wine_category.asp?o=2&t=1&c=2">Pubs</option>
<option value="food_wine_category.asp?o=3&t=1&c=3">Bakeries & Takeaway</option>
<option value="food_wine_category.asp?o=4&t=1&c=4">Local Produce</option>
<option value="food_wine_category.asp?o=5&t=2&c=1">Mount Gambier Wine Region</option>
<option value="food_wine_category.asp?o=5&t=2&c=2">Other Limestone Coast Wine Regions</option>
</select>
<select id="explore" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="explore_category.asp?o=1">Top 10</option>
<option value="explore_category.asp?o=2">Arts, Crafts, Galleries & Museums</option>
<option value="explore_category.asp?o=3">Heritage, Antiques & Collectables</option>
<option value="explore_category.asp?o=4">Family Fun</option>
<option value="explore_category.asp?o=5">Caves & Sinkholes</option>
<option value="explore_category.asp?o=6">Parks & Gardens</option>
<option value="explore_category.asp?o=7">Walks & Drives</option>
<option value="explore_category.asp?o=8">Kanawinka Geotrail</option>
<option value="explore_category.asp?o=9">Retail</option>
<option value="explore_category.asp?o=10">Recreation, Leisure & Adventure</option>
</select>
</p>
<p class="buttons">
<input type="image" src="images/submit-red.png" Value="submit">
</p>
</fieldset>
</form>
</div>
because $(".product").val(); will find first occurrence of DOM having class product so in any case it will fetch first one... u can do this using
$('#discover').submit(function() {
document.location = $('select[name="product"]').val();
return false;
});
Open Fiddler (fiddler2.com) and watch the post go past. I find that generally when more than one control on a page uses the same name, the browser actually passes all of them, but the server-side framework expecting each post parameter to be unique, ignores all but the last one.
when you submit , you have only one select box with attribute name ,so you can select the selected value by that attribute
$('#discover').submit(function() {
document.location = $('select[name="product"]').val();
return false;
});