I' ve a button, so when user clicks it, it should alert range selected. If user didn't change the range selected (slider) default value 1 should be alerted.
Why is not alerting it?
Codepen:
https://codepen.io/ogonzales/pen/abNQXLg
Error: it should only alert 1 value:
JS:
$('#step_one_siguiente').on('click', function () {
let val = this.value;
alert($("#performance_options").prop("selected", true).text());
});
Here is a workaround that might be helpful.
let ranges = ['1080p','1440p','2k']
$('#step_one_siguiente').on('click', function () {
var index = parseInt($('input').val()) - 1
alert(ranges[index]);
});
I think it is because the way you use the syntax of the datalist is incorrect.
Values are not meant to be between the option tags but only in the value="" attribute.
However for this to work, the input value would need to match the list value, which is not compatible with a range control as the values you want are not a sequence.
https://www.w3schools.com/tags/tag_datalist.asp
Based on Ibrahim question, I was able to come up with:
Apparently I don't have to search for a selected range, as it only returns the value of the selected one.
<script>
$('#step_one_siguiente').on('click', function () {
alert($('[type="range"]').val());
});
</script>
Related
I am trying to determine the selected item in a selector and submit a form based on the selection. Below is my Javascript.
$("#runjob").click(function() {
var selectedJob = document.getElementById('batchjob_selector').value.trim();
if(selectedJob == "Open Batch") {
alert(selectedJob);
document.getElementById('openbatchform').submit();
}
});
I checked in the console and the line document.getElementById('batchjob_selector').value.trim(); changes value based on selection, but for some reason it is always doing what's inside the if statement even when the selection has changed, the alert displays the correct selection. I am not sure what the problem is, any help is appreciated.
is batchjob_selector a select? because if that the case value will no contains what you are expecting, to get selected option from a select use following code
var selector = document.getElementById('batchjob_selector');
var selectedJob = selector.options[selector.selectedIndex];
This is my first real attempt to write a JS function. I want to set the value of a text field depending on the selction of a pair of radio buttons.
<script type='text/javascript'>
function setInputValue(){
if(document.getElementById('choice_8_0').checked) {
document.getElementById('input_6_18').value = '1';
}else if(document.getElementById('choice_8_1').checked) {
document.getElementById('input_6_18').value = '0';
}}
</script>
Can anyone help me with where I went wrong? I am not even sure how to name the function really.
You could use:
document.getElementById('elementId').checked = true;
or
document.getElementById('elementId').checked = false;
To select a radiobutton, you can use the checked property of the radiobutton:
document.getElementById('input_6_18').checked = true/false;
EDIT: seems like you want to set the text of an input type text?
Than your code is correct, the property is value. So what is the problem?
I have multiple textboxes on my page, their ID starts with 'Text' and followed by a random string like this 'Textc0816e05-d7c0-4acc-b233-bef152781cac', How can I have the textbox' value selected when user click on it?
$('input[type=text][id^=Text]').on('click', function() {
console.log(this.value);
});
You can get the clicked textbox value with following code
$('input[type=text][id^=Text]').on('click',function(){
var value = $(this).val();
//do what ever you want with the values
});
You can check the Attributes start with selector doc.
I'm trying to build some kind of currency converter and I have two select menus with the list of currencies.
I want to create a button that when clicked, it will switch the selection between the "from" select menu and the "to" select menu.
how do I implement it using the select menus I already have?
I believe you'r looking for a swap behavior.
http://jsfiddle.net/brentmn/D55Dm/
$(function(){
var $sel1 = $('#currency1');
var $sel2 = $('#currency2');
$('input[type=button]').click(function(){
var val1 = $sel1.val();
var val2 = $sel2.val();
$sel2.val(val1);
$sel1.val(val2);
//jqueryui
//$sel2.val(val1).trigger('change');
//$sel1.val(val2).trigger('change');
});
});
Something like this?
$("#button").on("click", function() {
var from = $("#from").val();
var to = $("#to").val();
$("#from").val(to);
$("#to").val(from);
});
I'd really do it with less code than that, but have done it like that for readability.
Assuming I've understood you correctly, you want a button that will swap the values of two select elements. If that's right, try something along these lines:
$("#someButton").click(function() {
var elemTo = $("#to"),
elemFrom = $("#from"),
toVal = elemTo.val();
elemTo.val(elemFrom.val());
elemFrom.val(toVal);
});
It simply gets references to the two select elements (assumed here to be #to and #from), gets the value of one of them, replaces the value of that one with the value of the other, and then replaces the value of the second with the stored value from the first.
Note that this assumes both select elements have the same option values. If an option is present in one select but not the other, it would not work.
Here's a working example.
If you dbl click on one item in 'From' section , it will get selected be appended to the 'To' section.
$("#selectFrom").dblclick(function(){
$selectTo.append($selectFrom.children(":selected"));
});
Which all functionalities you want??
I am using jquery autocomplete combobox
and everything is ok. But I also want to set specific value through JavaScript like $("#value").val("somevalue") and it set to select element, but no changes in input element with autocomplete.
Of course, I can select this input and set value directly, but is it some other ways to do that? I try set bind to this.element like this.element.bind("change", function(){alert(1)}) but it was no effects. And I don't know why.
Edit
I found a workaround for this case. But I don't like it. I have added the following code to _create function for ui.combobox
this.element.bind("change", function() {
input.val( $(select).find("option:selected").text());
});
And when I need to change the value I can use $("#selector").val("specificvalue").trigger("change");
Is this demo what you are looking for?
The link sets the value of the jQuery UI autocomplete to Java. The focus is left on the input so that the normal keyboard events can be used to navigate the options.
Edit: How about adding another function to the combobox like this:
autocomplete : function(value) {
this.element.val(value);
this.input.val(value);
}
and calling it with the value you want to set:
$('#combobox').combobox('autocomplete', 'Java');
Updated demo
I cannot find any available existing function to do what you want, but this seems to work nicely for me. Hope it is closer to the behaviour you require.
I managed a quick and dirty way of setting the value. But, you do need to know both the value and the text of the item that you want to display on the dropdown.
var myValue = foo; // value that you want selected
var myText = bar; // text that you want to display
// You first need to set the value of the (hidden) select list
$('#myCombo').val(myValue);
// ...then you need to set the display text of the actual autocomplete box.
$('#myCombo').siblings('.ui-combobox').find('.ui-autocomplete-input').val(myText);
#andyb,
i think rewrite:
autocomplete: function (value) {
this.element.val(value);
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "";
this.input.val(value);
}
I really like what andyb did, but I needed it to do a little more around event handling to be able to handle triggering the a change event because "selected" doesn't handle when hitting enter or losing focus on the input (hitting tab or mouse click).
As such, using what andyb did as a base as well as the latest version of the jQuery Autocomplete script, I created the following solution: DEMO
Enter: Chooses the first item if menu is visible
Focus Lost: Partial match triggers not found message and clears entry (jQuery UI), but fully typed answer "selects" that value (not case sensative)
How Change method can be utlized:
$("#combobox").combobox({
selected: function (event, ui) {
$("#output").text("Selected Event >>> " + $("#combobox").val());
}
})
.change(function (e) {
$("#output").text("Change Event >>> " + $("#combobox").val());
});
Hopefully this helps others who need additional change event functionality to compensate for gaps that "selected" leaves open.
http://jsfiddle.net/nhJDd/
$(".document").ready(function(){
$("select option:eq(1)").val("someNewVal");
$("select option:eq(1)").text("Another Val");
$("select option:eq(1)").attr('selected', 'selected');
});
here is a working example and jquery, I am assuming you want to change the value of a select, change its text face and also have it selected at page load?
#
Attempt 2:
here is another fiddle: http://jsfiddle.net/HafLW/1/ , do you mean that you select an option, then you want to append that value to the autocomplete of a input area?
$(".document").ready(function(){
someString = "this,that";
$("input").autocomplete({source: someString.split(",")});
$("select").change(function(){
alert($(this).val()+" appended");
someString = someString+","+$(this).val();
$("input").autocomplete({source: someString.split(",")});
});
});