I need to set up a simple list box that shows a result on the same page after the button is pressed. For example, the code below shows a list of the 7 days with times for each day. Right now when the button is pressed, I get a pop up saying "The page at "**.com" says: 7-9".
How can I have the result simply display "7-9" below the button, without a pop-up?
<script>
function displayResult()
{
var x=document.getElementById("mySelect").selectedIndex;
alert(document.getElementsByTagName("option")[x].value);
}
</script>
</head>
<body>
<form>
Select a day:
<select id="mySelect">
<option value="8-8">Monday</option>
<option value="7-9">Tuesday</option>
<option value="7-9">Wednesday</option>
<option value="7-9">Thursday</option>
<option value="7-10">Friday</option>
<option value="10-10">Saturday</option>
<option value="10-5">Sunday</option>
</select>
</form>
<button type="button" onclick="displayResult()">Display result</button>
http://jsfiddle.net/78NKt/
Try this way using insertBefore and function.call to have the context inside the function set as that of the element itself. And additionally you can just get the value of select using element.value (much shorter):
function displayResult() {
var x = document.getElementById("mySelect");
this.parentNode.insertBefore(document.createTextNode(x.value), this.nextSibling);
}
and
<button type="button" onclick="displayResult.call(this)">Display result</button>
Demo
Related
I have a search and filter form (see top of page over the posts grid) here:
https://ba2018.wpengine.com/sf-test-side
The second field of the form named "Boligtype" is a dropdown allowing multiple choices.
I want to create a button elsewhere on the same page (outside of the search and filter form) - which on click activates the "Villa" option in the above-mentioned dropdown.
I am new to js so have tried some different options myself, but pretty sure they have been pretty long shots. All I know is I need an "onClick" event, from researching articles here and on Google. But I am still new to js, so don't know where to take it from here really:
<button onclick="myFunction()">Villas</button>
<script>
function myFunction() {
}
</script>
You can find the element and trigger the click event (or whatever event you are listening to).
function myFunction() {
const select = document.querySelector('#mySelect'); // Find element
select.click(); // Click element
// If you are not listening to click or need a different event
const event = new Event('customEvent');
select.dispatchEvent(event);
}
With your particular page it seems you are listening on the label
document.querySelector('.sf-field-post-meta-filter_boligtype > label').dispatchEvent(new Event('click'))
Here is a simple example that shows how you can make first option in the drop down selected with button click:
<!Doctype html>
<html>
<head>
<script>
function buttonClick(){
document.getElementById("first").selected = true;
}
</script>
</head>
<body>
<select id="stateSelect" name="stateSelect">
<option value="none" id="first">first option</option>
<option value="AL">second option</option>
<option value="AK">third option</option>
</select>
<button type="button" onclick="buttonClick();" id="button"> click me!</button>
</body>
</html>
we add an event listener to the button using onclick="" attribute so the function buttonClick(); will be called and activate the first select option therefor you can make this for whatever option you need.
If this solves your problem I will explain this.
function myfunction(value) {
console.log(value);
switch (value) {
case "hotel": alert("hotel");
// $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').attr('hidden', true);
break;
case "villa":
alert("villa");
// $('#mybutton').removeClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').removeAttr('hidden');
break;
case "test": alert("test");
// $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').attr('hidden', true);
break;
default: alert("nulll");
// $('#mybutton').addClass("d-none"); //you can add this if you are using bootstrap
$('#mybutton').attr('hidden', true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1" onchange="myfunction(this.value)">
<option value="hotel">hotel</option>
<option value="villa">villa</option>
<option value="test">test</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<button id="mybutton" class="btn btn-primary" hidden>Click the Villa option</button>
I am using laravel, and trying to integrate some jquery, which I am not very good at.
I have a multiple select box with potentially lots of options, based on database values.
<div class="toolselect">
<select multiple>
<option value="1">Tool 1</option>
<option value="2">Tool 2</option>
<option value="3">Tool 3</option>
</select>
</div>
The user can select tools directly from the select box, but this can be a huge list and therefore I am also displaying a search field below the select box to
search the database of tools so the user can see more info about the tool, and then decide if he wants to include it.
Currently the user has to first search, then find the entry in the select box and select it.
I want a faster solution with a button next to the info about the tool, that automatically adds selected="selected" to the correct option in the select box above.
I tried
<input type="button" value="Mer" onclick="addselect('{{$tool->id}}')"/>
<script type="text/javascript">
addselect = function (id){
$("div.toolselect select").val(id);
}
But that erased all the other other selected fields.
Any ideas would be appreciated.
Try using jQuery's prop function:
<input type="button" value="Mer" onclick="addselect('{{$tool->id}}')"/>
<script type="text/javascript">
addselect = function (id){
$('.toolselect select option[value="'+ id +'"]').prop('selected');
}
</script>
For a multi-select, the value is an array of all the selected items. You're just setting the value to a single item, which is treated as an array of one element, so all the other selections get discarded.
So you should get the old value, add the new ID to it, and then set that as the new value.
function addselect(id) {
$('.toolselect select').val(function(i, oldval) {
oldval = oldval || []; // oldval = null when nothing is selected
oldval.push(id);
return oldval;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="toolselect">
<select multiple>
<option value="1">Tool 1</option>
<option value="2">Tool 2</option>
<option value="3">Tool 3</option>
</select>
</div>
<input type="button" value="Select 1" onclick="addselect('1')"/>
<input type="button" value="Select 2" onclick="addselect('2')"/>
<input type="button" value="Select 3" onclick="addselect('3')"/>
Instead of using this :
addselect = function (id){
$("div.toolselect select").val(id);
}
Try this :
addselect = function(id) {
var temp = [];
var arr = $('select').val();
for(i=0;i<arr.length;i++){
temp.push(arr[i]);
}
temp.push(id);
$("div.toolselect select").val(temp);
}
This way your previous selection is preserved, and the new selection is appended to the previous selection.
Hope this helps.
I've got a dropdown setup going on in which the user enters an input value, chooses a calculation to perform on that number from a dropdown, then a function displays the result.
What I would like is to add more 'values' to the dropdown, so when an option is selected from the list, it can also, say, display some text stored in the list, or some other information. Right now I can return the selected option's value (.value) and use the option's name (.text) to perform functions, but is there any more data I can add to each selection to be used later?
<html>
<head>
<script language="JavaScript">
function myfunction(form)
{
var i = parseFloat(form.Input.value, 10);
var e = document.getElementById("calculationList");
var strUser = e.options[e.selectedIndex].value;
form.Output.value = strUser*i;
}
</script>
</head>
<body>
<form>
Input Number:
<INPUT NAME="Input" SIZE=15>
Make a selection:
<select id="calculationList" onchange="myfunction(form)">
<option></option>
<option value="2">Double It</option>
<option value="3">Triple It</option>
<option value="10">Multiply It By ten</option>
</select>
Output Number:
<INPUT NAME="Output" SIZE=15>
</FORM>
</body>
</html>
Basically you may attach data attribute to your options like that:
<select id="calculationList">
<option></option>
<option value="2" data-aaa="10">Double It</option>
<option value="3" data-aaa="20">Triple It</option>
<option value="10" data-aaa="30">Multiply It By ten</option>
</select>
And later get the content of the attribute:
var dropdown = document.getElementById("calculationList");
dropdown.addEventListener("change", function() {
console.log(dropdown.options[dropdown.selectedIndex].getAttribute("data-aaa"));
});
jsfiddle -> http://jsfiddle.net/pzKrr/
Edit:
If you want to implement my solution remove onchange="myfunction(form)" from the select tag. After that add the following code just after that myfunction
window.onload = function() {
var dropdown = document.getElementById("calculationList");
dropdown.addEventListener("change", function() {
console.log(dropdown.options[dropdown.selectedIndex].getAttribute("data-aaa"));
});
};
I have the below javascript function to go to the selected box value url.
function go(x) {
alert(x);
location = x.value;
}
I cannot use getElementById
There may be more than 1 select box as the user differs
I wrote a php to print all the selectbox inside a form and div
<div class="styled-select">
<form name="menu">
<select id=Admission onchange=go(this)>
<option value=/admission>Add Existing Students</option>
</select>
<select id=Student onchange=go(this)>
<option value=www.bing.com>Student Details</option>
</select>
</form>
</div>
All suggestions are welcome.
You don't access the value of the element properly. Use this instead:
function go(x) {
location = x.options[x.selectedIndex].value;
}
You also won't get an onchange event for a <select> with only a single option ever.
Suposse user hits SPACE in a text -field. I want to check the value in the select -box. I use input.addEventListener('keydown', function(e)... to track the SPACE-hitting-point but how can I get the value of the select block <select id='topic'><option value="hello"></option> ...</section>?
How can you stdout the value of the selected index? Cannot understand why not below.
var el = document.getElementById("topic");
var topicValue = el.options[el.selectedIndex].value;
// PROBLEM: Won't do anything (despite inside <script> -tags)
window.alert(topicValue);
where the topic is the select <select id="topic"[^>]*>[^<]*</select>.
There any many events you can look at.
This has a list of them all
http://www.w3schools.com/tags/tag_select.asp
onkeydown and onmousedown will alert you prior to the onchange (user pressing enter) event
The events work in the select, not to options but just conditional to the script.
<html>
<body>
<script>
function alertMe(option){
if(option == "saab"){
window.alert("you clicked saab in selec!");
document.getElementById("txt").value='saab!';
}
}
</script>
<select onChange="alertMe(this.value);">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="m"> Mercedes</option>
<option>Audi</option>
</select>
<input type="text" id="txt" value="change me"></input>
</body>
</html>
[Answers to the updated]
You can access the select with document.getElementById('topic').options.selectedIndex or mySelect.options[selectedIndex].value (does not work with me). And apparently you could create a form to which you could refer by document.forms['topic'].elements[id] but not sure about this one. More.
#Kosh that is irritating! Just do a dictionary = {0:"topic", 1:"hello",...,n:"topic_{n}"} and then use the getElementById('topic').selectedId as a key and forget the values. Not solved but rounded.
[Update] I think I solved it, just el.value, no selectedIndex needed:
<html>
<body>
<script>
function printSelectValue()
{
var el = document.getElementById("selectOne");
alert(el.value);
}
</script>
<select id="selectOne" onChange="printSelectValue()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="m"> Mercedes</option>
</select>
</body>
</html>