I want to populate a drop-list with several items and select a default item:
<select onchange="DoSomething(this)">
<option value="abb">This is the second item</option>
<option value="abc" selected>This is the third item</option>
etc...
</select>
However I don't want the onChange event to fire (or I want the code triggered by onChange to be ignored) until the user selects an item. At the moment the onChange event fires as the page loads and the selected item is chosen by default.
Can I wrap this code in PHP to achieve this - if so how?
?!
Manipulating the HTML DOM directly in JavaScript doesn't fire events. You can even call myForm.submit() and the browser will not fire the form's onsubmit event, therefore bypassing client-side onsubmit validation.
I don't know what you've tried, but this is one way to select for example the first item of the drop-down list:
document.getElementsByTagName('select')[0].getElementsByTagName('option')[0].selected = true;
(http://jsfiddle.net/Jawh6/)
Crude, I know. Usually your forms and fields would be named or otherwise identified so you can address them more excplicitly: e.g. document.myForm.mySelect.options[0].selected = true;
Since your PHP is already setting the 'selected' attribute on the option (or your question isn't very well tagged), this would be the best place to set the default option when the page loads, that requires no JavaScript at all.
If you're interested in how to get PHP to write out the HTML for a select element and correctly assign the selected attribute to the intended option, I reckon you need to write a new question to attract the PHP folk.
Either you have other calls to your DoSomething function, or you've oversimplified your example and you're actually using a framework to bind the event handler to the field and maybe you accidentally called your function instead of assigning it, e.g.:
mySelect.onchange = DoSomething(); // oops, this calls DoSomething right away.
mySelect.onchange = DoSomething; // this sets DoSomething as the event handler.
Related
I have the following scenario:
Two 'Controls' like this:
<span class="search-select">
<select id="Item_TBUID" name="ViewModel.SearchTbuid">
<option value="" style="display: block;" selected="selected">ALL</option>
</select>
<input class="textfield" id="textfield_SearchTbuid" name="textfield.SearchTbuid" type="text" value="" />
</span>
The 'Control' is involved in a couple of events.
input.textfield on focusout triggers the select's change event (via trigger).
The select's change event triggers an ajax call to change the second Control's options (simply put, cascading dropdowns).
When I type something into the input (filtering the options of the first Control's select) and then immediately click on the second Control's dropdown (the one cascading) it partially loads the new data. It will fully load the new data (from ajax call) if I simply lose focus of the select and click it again.
I know the following isn't super useful code but I don't want to paste a bunch of code when 90% of it is irrelevant since I'm asking about events, their order, etc.
/* Applies the SearchSelect plugin to all controls
* which filters the select's options and triggers the
* select's change event when the textfield loses focus.
*/
$(".search-select").SearchSelect();
/* Applies cascading event to the select element.
* Which makes an ajax call for the new options.
* The success event of the ajax call then adds the options
* to the second control's select.
*/
cascade(RetailerCostZone);
Question: How can I tell the select's click event that displays the options to wait on the AJAX call to finish fully?
Have you considered putting the ajax call on the onclick or onfocus of the other control, with the success triggering its normal behavior? So that every time you focus on it it will get the correct data first?
Also, since the data in the second control is dependent on that of the first, maybe you could just have a submit button with the first control that loads the options for the second.
I have a target website where there is the following dropdown menu.
<select class="categories-options" data-level="1" name="level1-option" id="level1-option" required="">
<option value="">default</option>
<option value="p1" data-href="/callback/p1">P1</option>
<option value="p2" data-href="/callback/p2">P2</option>
<option value="p3" data-href="/callback/p3">P3</option>
</select>
When an item is selected from the menu, it triggers a "change" event and a function is called when this event happens. I have debugged the event using Chrome and you can see the debugging output when I selected an item from the dropdown menu. I have taken a screenshot from the debugger.
Now, let me explain what I am trying to do. I use a javascript function to select an item from the dropdown menu using the following code:
var id= document.getElementById('level1-option');
setSelectedValue(id, "p2");
$('#level1-option').trigger("select");
In the last line, I try to trigger the same event that happens originally in the webpage as if I manually selected the item. however, it doesn't trigger anything. |I see in the debug output that the event is triggered by class. I have tried many different things but didn't work. Could anyone shed some light on this issue? How can I trigger the same event that happens in that webpage using jquery or javascript?
Your code:
$('#level1-option').trigger("select");
...will trigger an event called select (which isn't related to the value of a form field change), but the event you stopped on in the debugger is change, not select:
If you want to trigger the change event, trigger the change event:
$('#level1-option').trigger("change");
// Difference is here -------^
Side note: Because you're using jQuery, your code can be simpler, you dont need the getElementById or the setSelectedValue:
$('#level1-option').val("p2").trigger("change");
Try this
$('#level1-option').trigger("change");
I have a select inside HTML
<select id="league" name="league">
which I'm listening for changes inside my javascript.
var league = dojo.byId("league");
dojo.connect(league, "onchange", function (evt) { //do stuff }
Which works fine.
However I have a link that I can click which updates the select:
League
The link works as it updates the selected value of the select with the following function.
function updateSelection(NewLeague){
dojo.byId('league').value = NewLeague; // works
dojo.byId('league').onChange; //this isnt working
//dojo.byId('league').onChange(); //this throws: TypeError: dojo.byId("league").onChange is not a function
}
My problem, as I've read through other stack posts is that programmatically updating the value wont trigger onChange, thus I need to call onchange in the code (shown above). As per the comments inline, the onChange isn't being triggered or throws an error. My first thought that it has something to do with the dojo.Connect which listens for onChange, but I havent found any information that says I cant do this, nor any explanation how to get around it.
Any ideas?
Select onchange doesn't fire for programattic changes, you need to fire it yourself with league.onchange();
As noted by #Greg, the call should be lowercase.
Additionally, I don't know if dojo has a trigger method, but in jQuery this would be done as jQuery('#league').trigger('change').
Depending on your version of dojo you may also want to check: http://dojotoolkit.org/reference-guide/1.8/dojo/connect.html
Have you tried just calling the select by it's id using normal js?
document.getElementById('league').onchange.call();
As others have said, you need to trigger the event yourself, just setting the value does not do that. See the code on How to trigger event in JavaScript? to see how in a cross-browser way.
I know i can use the javascript event onchange, or the jquery event change, however, enother of these cover the senario when the user does not change the value of the select him self.
For example, when using javascripts onchange event if I have three cascading selects and I select the first one, and the second one populates and the default value if the second one is the one the user wants, the onchange event of the second select is never fired, hence the third select is never populated.
ideas?
two ways you can do
1>
on second <select> create first option with value= "[choose something]" this way user will be forced to choose some thing from select2
2> When you populate the second select ,trigger its onchange event
How about putting a dummy value at the beginning on the select ,like a blank option. So that the user is forced to select another that has a value.
Insert a dummy item in the second select as the first item:
<option value="">-- select one --<option>
That way the user must fire the change event to select an item,
Autopopulate the third select box with the values it should have for the default of the second is one option. Otherwise as others have suggested a Please Choose option that forces onchange to fire.
If your changing the content via javascript, you can also trigger the change event explicitly.
I have a page that has multiple select lists and when ever one of the select list changes using jQuery's .change() function I change the text in a span next to the select list. When the page loads there is already some text in every span (the text different for each span). The problem is that when the page loads the .change() function loops through all of the select lists changing the text in every span. I don't want the text in the span to change until a user selects a different item in the list. I can't just check to see if there is text in the span because if a user does change the selected item it doesn't matter if there is any text or not, I just don't want to to replace the text when the page loads. So, how can I get the .change() function to stop firing when the page is loaded? The code:
JS/jQuery
$(document).ready(function() {
$("select").change(function () {
var txt = $(this).val();
$(this).next('span').text(txt);
}).trigger('change');
});
HTML (repeated many times)
<select name="animal[]">
<option value="dog" selected="selected">dog</option>
<option value="cat">cat</option>
<option value="bird">bird</option>
<option value="snake">snake</option>
</select>
<span class="out">text that shouldn't be replaced until user changes selected item</span>
Thanks for your help!
You just need to remove this call:
.trigger('change')
It's what's invoking the $("select").change(function () { ... }) handler that you just bound. The default behavior is to wait for the change event to occur...a .trigger('change') or .change() (no parameters) will simulate the change event, making that handler go to work.
The "change" is triggering because your code is telling it to! That call to .trigger("change") says, "run the 'change' event handler please". So, take that out.
Now, the thing is, the reason your code was written that way was probably to make sure that the settings of the <select> elements really reflects what the behavior is supposed to be when users manually make the same changes. For example, sometimes there are forms where part of the inputs are supposed to be disabled unless a <select> is set to a certain option. By triggering the "change" event on page load, the code could make sure that those rules are in force. If you just take out that trigger, things may not work right, is what I'm saying. That handler looks pretty simple, so maybe the problem is that this code was cut-and-pasted from somewhere else.