I am trying to create a JavaScript that chooses an option from a drop down, clicks that options and then clicks another button to add this option to cart, how would I create this in a JavaScript code?
Here's what I've tried:
browser.getelementbyid("id").invokemember("click");
Try using jQuery, it helps alot I find.
$('#YourElement').click()
It sounds like what you want to do is:
when something change in a drop down field
you want to trigger a click on another element
Because you want to listen to the change event here's a short example and an area to play with the code: https://jsfiddle.net/je5Lgne5/
$('#products').change(function() {
var selectedOption = $(this).val();
$('#cart').append($('<li />').html(selectedOption));
});
Related
I am using angular-ng-autocomplete library at many places in my project.
But i faced 1 issue recently.
I have 1 button besides the autocomplete textbox. Whenever i select any option i am using it to add in the object.
But, Whenever i type something which is not in the dropdown list. At that time i can't click on the button until i click it twice.
So the 1st click is loosing focus from the autocomplete textbox and 2nd click is actually clicking on that button.
Demo
Try to type anything which is not in the loaded list. Ex: Test
Than try to click on 'Add' button, You will observe that you need to click twice.
For quick fix, I tried to read the mouseleave event on this ng-autocomplete, But it's also not being triggered whenever we are typing something. We need to loose the focus to make mouseleave works. And it's also not a good solution eitherway!
Any help?
Try this,
onFocused(e) {
// do something
this.auto.close();
}
Refer this for more https://github.com/gmerabishvili/angular-ng-autocomplete/issues/50
I am trying to automate something here. The website on which I run the Javascript,
When I click on an <option> element inside <select>. The website changes the content of another <select> below it. This only happens when I manually select an option.
But when I select an option using Javascript like this: No content gets changed:
document.getElementById("Category").selectedIndex = 8;
Try
let options= document.querySelectorAll('select option')
You can access the innerHTML property of first option using options[0].innerHTML
Add onChange event to you select element using
document.querySelector('select').addEventListener('change',()=>{
alert('Changed')
})
Hope it helps
Edit - You might also want to check the current selected option and want to make changes accordingly. You can check the current selected option by
document.querySelector('select').value //Returns the value of selected option
Disclaimer: There is no reproducible example, so this is my best guess.
The website you are talking about probably captures the click events and uses that to alter the selects. For example,
$("select > option").click(function(){
//do something
...
});
When you change the selectedIndex, yes, you are selecting a new option, but you are not sending the click event, so the above function is not called. You will need to inspect their source/provide more details for more clarity.
I have open/close 'options' of 'select' on click anyone 'div' or 'button'.
How this done by javaScript or JQuery.
Thanks.
If what you're asking is how to cause a drop-down select to drop down programmatically (e.g., in response to a click somewhere else that triggers your code), you can't do that.
You can easily simulate a click on an element, but a click on a <select> won’t open up the dropdown.
$('div').bind('click', function() {
// code for open and close your select
});
Here the reference Can I open a dropdownlist using jQuery
If you want to manipulate a <select> control, you can try using its size property. If its size is > 1, it will display options. Something along the lines of:
[somediv].onclick = function(){
[someselect].size = 10;
}
Like T.J. Crowder rightfully remarked, this doesn't 'open' a dropdown, but it offers the possibility (using styling etc.) to simulate it.
I used a jquery combobox for autocompletion and I needed to clean its value.
I got into a solution which is like this: http://jsfiddle.net/BbWza/30/
The problem is that the code below clears all textboxes of all combos in the screen. I'd like to clear only ONE combo (let's say the first one, for example).
$('.ui-autocomplete-input').focus().val('');
Although there is only one clear link button, it doesn't matter which combo will be cleared as long as only one is.
The solution should work for N combos in the screen. E.g. Each button should empty its corresponding combo.
You can add ids to the generated fields by adding this line as the last line of _create():
input.attr( 'id', $(select).attr( 'id' )+'-input' );
Now you can select individual fields with the ids:
$('#combobox-input').focus().val('');
To clear just only one combo you must select it with it's id:
$('#combobox').focus().val('');
$('#combobox').autocomplete('close');
with your code you are selecting all comboboxes because you are using a class selector.
EDIT if you want to make two buttons (one for each combobox) you could do:
$('.clicky').click(function() {
var combo= $(this).prevAll('input:first');
combo.focus().val('');
combo.autocomplete('close');
return false;
});
fiddle here: http://jsfiddle.net/BbWza/39/
Your jsfiddle is a little ambiguous as to which combo box should be cleared - there are two combo boxes but only one clear link, so it's not obvious if the link is supposed to clear just one or both combo boxes.
I suspect in the real world that each combo box would have it's own clear link. Selecting the right text box for your clear link all depends on your html. One simple case would be where the clear link is the next sibling to your <select> element:
<select class="combo">
...
</select>
Clear
Then you could create the combos in one call by using class. Then create the clear click handlers all at once. The handler would use .prevAll(".ui-autocomplete-input") to find its associated textbox.
$("select.combo").combobox();
$("a.clearCombo").click(function () {
$(this).prevAll('.ui-autocomplete-input').first()
.focus()
.val('')
.autocomplete('close');
return false;
});
Working demo at jsfiddle
If your link is not a sibling of your combo box, that's ok. Either find its parent that is a sibling and use the above approach. Or, if that won't work, find the common parent of both the combo and the link. This only works if the common parent contains only one combo and one link:
<span class="comboContainer">
<span>
<select class="combo">
...
</select>
</span>
Clear
</span>
You use .closest(".comboContainer") and .find(".ui-autocomplete-input"):
$("select.combo").combobox();
$("a.clearCombo").click(function () {
$(this).closest(".comboContainer").find('.ui-autocomplete-input')
.focus()
.val('')
.autocomplete('close');
return false;
});
Working demo at jsfiddle
The nice thing about these techniques is that the link doesn't need to know the id of its associated combobox. We can just infer it from the html. This makes it very easy to move combos around and add new ones.
Two suggestions:
Add a clear method to your plugin. Your widget users shouldn't have to know its internal workings. In your example, you have to know that widget uses .autocomplete(). This also prevents you from changing your implementation later. Adding a "clear" method would simplify your click handler to just $(this).prevAll("select.combo").combobox("clear").
Give your widget the option to create the clear button itself. Users can always disable it and add their own clear button if they want.
Well, in the example the following would only clear the last combobox:
$('.ui-autocomplete-input').last().focus().val('');
This would clear the first one:
$('.ui-autocomplete-input').first().focus().val('');
You can clear it in event "close" of the autocomplete
$("#your-input").autocomplete({
source: items,
close: function (event, ui) {
$(this).val("");
}
});
How to give clear button for autocombobox please tell me
You can add ids to the generated fields by adding this line as the last line of _create():
input.attr( 'id', $(select).attr( 'id' )+'-input' );
Now you can select individual fields with the ids:
$('#combobox-input').focus().val('');
Is there a way in AJAX or JS to add further inputs upon a button click?
In short, yes you can add more inputs on a button click.
For example, in jQuery, you could have something like this where the buttonID is the id attribute for the button and the formID is the id attribute for your form:
$("buttonID").click(function() {
//add new inputs here, something like:
$("formID").append('<input type="text" id="newInput" name="newInput" />');
});
You can also have the additional inputs hidden to start off with and then 'un-hide' them on a click if you want.
Further inputs? Run any JavaScript you want when a user clicks a button by adding an event listener to the button that listens for a click.
Once a user clicks on the button, if you have an event listener, you can change what they had entered, you can do anything anything you want.
I am not certain what you mean by 'further inputs' though. If you are sending data then you can append whatever you want, I frequently append a timestamp to help prevent caching issues, for example.