I have a script, which basically looks like this (the part I need help with):
<script>
var languageFrom = " from ";
var languageTo = " to ";
</script>
If I had a drop down menu that looked like this:
<select>
<option value="en">En</option>
<option value="fr">Fr</option>
</select>
When you select one of the drop down menus, it populates the from variable with the text from the option value. How can you accomplish this? Are there any tutorials on this?
You can bind a change event handler to the select element:
document.getElementById("yourSelect").onchange = function() {
languageFrom = this.value;
}
Note that this assumes an id of yourSelect on the select element, and also assumes that languageFrom is in the scope of the event handler function (probably global).
selectNode.addEventListener("change", function(evt) {
languageFrom=languageTo;
languageTo = evt.target.value;
},false);
Related
I am dynamically generating a select contol with jQuery on my page. The generated select is given below.
<select id="autoCompleteSelect" size="5" class="autoSelect">
<option value="firstVal">firstVal</option>
<option value="secondVal">secondVal</option>
</select>
Now i want to select the first item of this select control on my textbox keyup event. But i cannot do so. The keyup code is -
$('#searchInput').keyup(function (e) {
var a = $(".autoSelect").val();
var myDDL = $('.autoSelect');
myDDL[0].selectedIndex = 0;
});
however when i do not generate select dynamically and just put it on the page from the beginning. Everything works fine. What could be the solution for dynamically generated select.
$("#autoCompleteSelect").val($("#autoCompleteSelect option:first").val());
http://jsfiddle.net/oob1ybxp/
If working with dynamically generated content, it is best to use event delegation concept like below:
// document here can be replaced with closest parent which
// created/ existed without dynamic load
// provided context parameter to on function
$(document).on('keyup','#searchInput', function (e) {
var a = $(".autoSelect").val();
var myDDL = $('.autoSelect');
myDDL[0].selectedIndex = 0;
});
Read this .on() also.
Keep your code in the form something like
$('someStaticSelector').on('keyup', 'DynamicAddedSelector', function (e) {
var a = $(".autoSelect").val();
var myDDL = $('.autoSelect');
myDDL[0].selectedIndex = 0;
});
I would like to fill the "Acheter un billet" form of this site : http://www.leguichet.fr/
This is what I've done so far :
var casper = require('casper').create();
casper.start('http://www.leguichet.fr/', function() {
this.fill('form#search_tickets', {'departure':'1', 'arrival':'2'}, false);
this.click('input[value="Rechercher"]');
this.wait(1000, function() {
this.echo(this.getCurrentUrl());
});
});
casper.run(function(){
this.exit();
});
The documentation says that fill() uses the value attribute to match against but I would like to use the text inside the option tags. For instance they have :
<option value="Montpellier">Montpellier</option>
<option value="Montpellier">Béziers</option>
Thus if I want to select Béziers I have to write 'departure':'Montpellier'.
Is there a way to use the text inside the option tags?
The easiest way would be to retrieve the element value of the option that you want to select and use that value later. It may be the case that during the subsequent selection another option is selected, but the value will be the same, so it should not make a difference:
var x = require('casper').selectXPath;
casper.start('http://www.leguichet.fr/', function() {
var textToSelect = "Béziers";
var value = this.getElementAttribute(x("//form[#id='search_tickets']//select[#name='departure']/option[contains(text(), '" + text + "')]"), 'value');
this.fill('form#search_tickets', {'departure': value, 'arrival':'2'}, false);
this.click('input[value="Rechercher"]');
this.wait(1000, function() {
this.echo(this.getCurrentUrl())
});
});
You can easily select DOM nodes with XPath by testing their text content with the text() function. Do the same thing for arrival.
I want to have on my html-site an combobox like on the following img. I want to get the selected values and print in out. How can I create this comboBox?? I have tried the Google API Visualization CategoryFilter Control. But you can not customize the google control.
Thank you
I just mocked up a combo-box like you described: http://jsfiddle.net/twwGM/
Basically, you need to use JS to capture the onchange event of the select box, and then append its value to some target area with specific styling by generating an HTML string from your function. Keep styles out of the JS and instead style it through the use of a CSS class.
HTML Markup:
<form>
<select id="selector">
<option>Magic</option>
<option>Canaries</option>
<option>Unicorns</option>
</select>
</form>
<div id="target-area"></div>
JS Code
(function () {
document.getElementById("selector").addEventListener("change", function () {
var val = this.options[this.selectedIndex].value;
var genId = val + "-close";
if (!document.getElementById(genId)) {
var htmlstr = "<div class='pasted-option'>" + val + "<span id='" + genId + "'>x</span></div>";
var targetArea = document.getElementById("target-area");
targetArea.innerHTML += htmlstr;
var closeButton = document.getElementById(genId);
closeButton.addEventListener("click", function () {
var parent = this.parentNode;
parent.parentNode.removeChild(parent);
});
}
});
}(window));
As you can see within the code, we also generate an id for the span based on the item's name so that we can make a call to it later for removal from the list. It also gives us the ability to check and make certain the value doesn't already exist within the list.
I have a <select> drop down that I'm inserting into my HTML via jQuery. I don't have control over the HTML but I do have control over the JavaScript.
I'm trying to prop a value to an <input> element when you select an option. Basically, I have a <select> element with <option id="1"> and <option id="2"> onChange of this <select> element;
If you select option#1 it should prop the value dummy1 to input[name="Check_Config_PaymentGateway_CreditCards_Login1"] and the value dummy2 to input[name="Check_Config_PaymentGateway_CreditCards_Password"]
If you select option#2 it should prop the value dummy3 to input[name="Check_Config_PaymentGateway_CreditCards_Login1"] and the value dummy4 to input[name="Check_Config_PaymentGateway_CreditCards_Password"]
I've been working on this jsFiddle.
I'm pretty new at JavaScript in general, let alone jQuery. This is way to sophisticated for my skill... If you can help me, I'd really appreciate it.
Here you go: http://jsfiddle.net/VW9N6/6/
This binds to the change event of the <select> element to detect when its value changes, and then updates the value of the <input> elements.
Try something like below,
Edit: Cached input text boxes.
DEMO
var dummyValues = [['dummy1', 'dummy2'], ['dummy3', 'dummy4']];
var $loginInput = $('input[name=Check_Config_PaymentGateway_CreditCards_Login1]');
var $pwdInput = $('input[name=Check_Config_PaymentGateway_CreditCards_Password]');
$('#paymentDD').change(function () {
var selectedVal = parseInt($(this).val(), 10) - 1;
$loginInput.val(dummyValues [selectedVal][0]);
$pwdInput.val(dummyValues [selectedVal][1]);
});
Updated dummyValues var as you add move options to the drop down.
I'm a fan of caching elements whenever possible, so that's what I do. I also saw that you were using the latest jQuery (1.7.2) in your jsFiddle, so why not use the recommended .on() method and then call an immediate .change() to populate on load?
You could try something like this:
var $span = $('span#print_pagename'),
$login = $('input[name="Check_Config_PaymentGateway_CreditCards_Login1"]'),
$password = $('input[name="Check_Config_PaymentGateway_CreditCards_Password"]'),
$select = $('<select><option id="1">1</option><option id="2">2</option></select>');
$span.after($select);
$select.on('change', function() {
var $this = $(this);
if ($this.val() === '1') {
$login.val('dummy1');
$password.val('dummy2');
} else if ($this.val() === '2') {
$login.val('dummy3');
$password.val('dummy4');
}
}).change();
I have written a code for dropdown selected index changed event at client side using onchange event and create one JavaScript function.
Now, I want to retrieve selected values in this function. How can I get this value?
$("#DropDownlist:selected").val();
This will give you selected text.
$("#mydropdownid option:selected").text();
This will give you selected value
$('#mydropdownid').val();
HTML :
<select id="mySelect" class="myClass">
<option value='1'>One</option>
</select>
jQuery :
Now for getting selected value you can use the one of the following:
ONE :
var selected_value = $("#mySelect").val();
TWO :
var selected_value = $(".myClass").val();
THREE :
var dropdown = $("#mySelect option:selected");
var selected_value = dropdown.val();
The simplest, inside the event handler:
$('#elementID').change(function(event) {
event.target.value;
};
event is the event object sent to the handler, target is the object in the DOM from which the event generated, and value it's the DOM element current value. In the case of a select box this will work perfectly to get your selected value.
As you have tagged jQuery, I assume that's what you are using.
Simply use jQuery val()
var v = $("#yourSelectID").val();
alert("The value is: " + v);
You should also be able to use plain javascript:
var e = document.getElementById("yourSelectID");
var v = e.options[e.selectedIndex].value;
alert("The value is: " + v);