I am using change for my inputs and then I'm asking questions. All of my code is inside a click function. I would like to let the user answer the questions again, and for there previous data not be there. I am new to jquery so i am not sure if my function to clear should be inside my click function, or if it has to be outside of it. I'm seeing a lot of answers to this but they are not helping me. i have added a fiddle to give you just a idea of what i am trying to do. I shortened it to just give you a idea of what i am doing, so there maybe things wrong with it.
http://jsfiddle.net/46tYs/6/embedded/result/
$('.myOptions').change(function () {
$('.list').removeClass('active');
$('.' + this.value).addClass('active');
});
$('#butt').click(function () {
var ttta = $('.myOptions').val();
var tt = $('input[name=gender]:checked').val();
});
My html code:
<label>Please select an option :</label>
<select class="myOptions">
<option value="" selected>Pick an option</option>
<option value="owner">yes</option>
<option value="not-owner">no</option>
</select>
It seems unclear to me what your goal is. Judging by your reset button click code, it appears like you are having trouble removing "checked" and "selected" from radio buttons and drop downs? Here is the pertinent info:
"The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:"
Here is the API docs explaining the difference:
http://api.jquery.com/attr/
http://api.jquery.com/prop/
Here is an example I wrote for you showing basics of getting values and resetting fields:
http://jsfiddle.net/SbB3k/
Here is a rewrite of your code, it's not optimized, but much better I think:
http://jsfiddle.net/46tYs/10/
of how to reset radio buttons and select options
Here is the gist of it:
$('input[type="radio"]').prop('checked', false).val("");
$('select').prop('selectedIndex',0);
$('input[type="text"]').val("");
Related
I want to navigate useing a dynamically generated select drop down.
It doesn't appear I can do that directly, so I'd simply like to make a function call when the select changes.
To do that, I have this:
---In the template---
<select (change)="navSelected($event)">
<option *ngFor="let button of navButtons;"
value="button.route" >{{button.label}}</option>
</select>
suffice it to say that 'navButtons' is an array of objects that have a 'label' field.
---In the class---
navSelected(navName) {
console.log(navName + " Clicked!");
}
This actually works fine.
I got to this point from the great help of Mark Rajcok and his answer in this older question:
How can I get new selection in "select" in Angular 2?
That said, I'd like to be able to pass the selected value in the navSelected() function call. I'm unsure how to do that.
I have tried adding [ngValue]="button" on a wild guess from other searches to the option tag and then referencing the button variable in the (change) event handler (so: (change)="navSelected(button.label)" and other combos, to no avail. I've seen a lot of references to ngModel but they seem old and I'm not entirely sure they apply anymore (and I couldn't get them to work anyway in RC4).
I could probably pull some jquery or whatever out to find the select and get it's value, but that seems very rinky-dink compared to simply being able to call the function correctly.
The value you are looking for is on the $event.target and you can get it with $event.target.value, see my example below.
navSelected($event) {
console.log($event.target.value + " Clicked!");
}
If you are looking to get the selected text of the option you can do this
navSelected($event) {
let selectElement = $event.target;
var optionIndex = selectElement.selectedIndex;
var optionText = selectElement.options[optionIndex];
console.log(optionText + " Clicked!");
}
As a shortcut for #eltonkamami 's answer, you can pass your object like this:
<select (change)="navSelected(navButtons[$event.target.selectedIndex])">
<option *ngFor="let button of navButtons;">{{button.label}}</option>
</select>
And capture it like this:
navSelected(button: [type of navButtons]){
console.log(button);
}
Instead of $event. Try using the below typecast function.
$any($event.target).value
Which will stop the type checking in the template.
I'm facing an issue in selecting the dropdown first value after selecting it for the first time. When the dropdown options slidedown to select, the first value would be selected by default,bcoz of which I'm not able to select the first value. I'm using JQuery mobile framework and I'm writing custom JS to change the dropdown. I need to handle this dropdown only using custom JS and cannot make the dropdown work with this custom logic due to some other issue with my project.
Here first value im referring as 'US' from dropdown
The solution for this issue would be really appreciated. Thanks in advance.
HTML:
<select id="drpDwn">
<option value="" disabled="disabled">select</option>
<option value="US">US</option>
<option value="AU">AU</option>
<option value="NZ">NZ</option>
</select>
JS:
$(document).on('change', '#drpDwn', function () {
var index = $(this)[0].selectedIndex;
$(this).attr('selectedIndex', index);
$(this).find('option').removeAttr('selected');
$(this).find('option').eq(index).attr('selected', 'selected');
$(this).siblings('span').html($(this).find('option').eq(index).text());
});
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css
Check out this JSFiddle
The difference maker was modifying:
$(this).find('option').removeAttr('selected');
Into:
$(this).find('option:not(:selected)').removeAttr('selected');
When 'change' was triggered, the selected attribute is added to the new option, so you were stripping it away from everything even the new selection. That's why the option never changed.
Using :not(:selected) came in handy then since it will only strip away the attribute from things that weren't the current selected option.
I want to create two selections on my webpage which will be connected to each other so that both selections will always be the same. Let me explain in a mock example:
I have a webpage with two selects:
<select class="myselector">
<option value='1'>1
<br>
</option>
<option value='2'>2
<br>
</option>
</select>
<select class="myselector">
<option value='1'>1
<br>
</option>
<option value='2'>2
<br>
</option>
</select>
Note: in reality, I have more than just the two selects and I want them all to be connected.
Now, I want the webpage to automatically set the second selector to the value of the first if the first is changed. I also want to perform some other things on the select that has changed, so I also want the change event to trigger on the other selector. My first thought was simply to do this:
function valChange() {
myfun();
$('.myselector').val($(this).val());
}
$('.myselector').on('change', valChange);
This does what I need in that it changes the selected values so they match
This does not trigger the change event in the other select, so myfun runs only once
My next thought was to add $('.myselector').change(); to the end of the valChange function, but this (naturally) causes an infinite loop of change events.
My question is, therefore:
How can I trigger the change event in only the elements that have been
changed automatically (not by a user)?
I think it could be done by having both the change and the click event, but that just seems wrong and ugly to me.
EDIT: I found a way to solve my problem through the use of jquery selectors. If there exists a more elegant way of solving the problem, I will still be happy to see it though.
function valChange() {
myfun()
var others = $('.myselector[value!=' + $(this).val() + ']');
others.val($(this).val());
others.change();
}
$('.myselector').on('change', valChange);
JSfiddle for my solution:
http://jsfiddle.net/5xum/svjbdxgs/
you can use each method of jquery
function valChange() {
var _this = $(this)
$('.myselector').each(function(){
myFun();
$(this).val(_this.val());
});
}
$('.myselector').on('change', valChange);
here is fiddle for the same fiddle link
I have currently got a 2-tier javascript drop down box attached to my form, and i am looking to add another 3-tiers, but completely seperate to my current javascript and can't unfortunately figure it out (quite new to javascript :( )
Here what I have so far, it all works ( not even sure what framework to select on fiddle for it to display properly lol :( the embarassment haha
Any help is appreciated <3
This will probably be enough code for you to get the idea.
jsFiddle here
I used jQuery to get handles to the various DOM elements. Here is a quite decent resource for browsing all jQuery selectors, events, effects, css, etc - despite the source. (Just keep hitting Next Chapter)
First, this is your code for catching the optone select element's change event, removed from inline javascript (which is never a good idea):
$('select[name=optone]').change(function() {
var selval = $(this).val();
setOptions(selval);
});
Simple enough, yes?
I left your first setOptions function as is, because it works. However, I wrote the next function setOptions2() in jQuery, to show you how much less typing is required.
To catch the next select element's change event:
$('select[name=opttwo]').change(function() {
var sel2val = $(this).val();
alert('You selected: ' + sel2val);
setOptions2(sel2val);
$('#selthreeDiv').show();
});
Notice in my jsFiddle that I added a hidden div containing the 3rd select control, and I display that control when the 2nd select is changed...
Hopefully this will be of assistance.
ok I did something like this and it worked for me.
your new javascript
function setOptions2(chosen) {
var selbox = document.myform.optthree;
selbox.options.length = 0;
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('Worked', ' ');
}
}
then added some new html
<select name="opttwo" size="1" onchange="setOptions2(document.myform.optone.options[document.myform.optone.selectedIndex].value);" >
<option value="Please Select Prompt Category" selected="selected">Please Select Prompt Category</option>
</select>
<select name="optthree" size="1">
<option value="Please Select Prompt Category" selected="selected">Please Select Prompt Category</option>
</select>
I am wondering if someone could help me understand how I can achieve this. I want to show two input boxes only when a certain value in a select box is chosen using javascript (inc jquery).
My select box has this value:
<select name="menu-168" class="wpcf7-validates-as-required">
<option value="Residential">Residential</option>
<option value="Commercial">Commercial</option>
</select>
My input box has this value:
<input type="text" name="text-708" value="" class="wpcf7-validates-as-required" size="40">
In Pseudo code I am after something like this:
<if select name="menu-168" value = "Commerical">
<add css property ".hidden" to input name="text-708">
</if>
My javascript knowledge is so poor, would anyone mind showing me how this is done? This is a JSfiddle with the relevant HTML:
http://jsfiddle.net/K9zGP/
This is using jQuery:
if ($("select[name='menu-168']").val() == "Commercial") {
$("input[name='text-708']").addClass("hidden");
}
On a side note, i would advise you to use class instead of names for referencing HTML elements. Class selection is much faster than attributes.
You can use .on() to attach a listener on the select, to listen for a change event. With the change-event listener you can act whenever someone changes the selected option. Then you can use .toggle() to show/hide the input, depending on what the user has chosen in the select-list.
Something like this:
$(function(){
$("select[name='menu-168']").on("change", function (){
$("input[name='text-708']").toggle($(this).val() !== "Commercial");
});
});
Working example
In this example I use attribute selectors to select your elements, because there is nothing more exact to go on, but you could get slightly better performance by adding ID's to the relevant elements and use those for the selectors instead.
$('#menu-168').on('change', function(){
($this).val() = "Commericial" ?
$('input[name='text-708']').show() : $('input[name='text-708']').hide();
}
})