Dropdown form with submit button - javascript

I have a dropdown with links in them, when I select the option it will go to the page, but I want to use a button instead but not sure how to change the javascript to make this happen:
<select name="form" onchange="location = this.options[this.selectedIndex].value;"class="form-control">
<option>Choose a Service</option>
<option value="http://www.google.com">Option 1</option>
<option value="http://www.google.com">Option 2</option>
<option value="http://www.google.com">Option 3</option>
<option value="http://www.google.com">Option 4</option>
<option value="http://www.google.com">Option 5</option>
</select>

Instead of putting location = this.options[this.selectedIndex].value in unChange, move it to a button onClick event:
<select id="dropdown" name="form" class="form-control">
<option>Choose a Service</option>
<option value="http://www.google.com">Option-1</option>
<option value="http://www.google.com">Option-2</option>
<option value="http://www.google.com">Option-3</option>
<option value="http://www.google.com">Option-4</option>
<option value="http://www.google.com">Option-5</option>
</select>
<input type="button" value="Go!" onClick='location = document.getElementById("dropdown").options[document.getElementById("dropdown").selectedIndex].value'>

<select id="dd" name="form">
<option>Choose a Service</option>
<option value="http://www.google.com">Option 1</option>
<option value="http://www.google.com">Option 2</option>
<option value="http://www.google.com">Option 3</option>
<option value="http://www.google.com">Option 4</option>
<option value="http://www.google.com">Option 5</option>
</select>
<button onClick="launchPage" >
<script>
var launchPage = function() {
var e = document.getElementById("dd");
var url = e.options[e.selectedIndex].value;
window.open(url);
};
</script>

Related

Remove select placeholder after selecting option

After selecting option from list hide placeholder (Select option). If after clicked on select box placeholder must be hidden.
<select class="name">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
You could do it like this:
$("select").change(function() {
$(this).find("option:first").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="name">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
you can set a js-handler, to remove the Option-noe (here the jQuery Version):
<select class="name" id="myselect">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
and the js
jQuery(function(){
jQuery ('#myselect').on('change', function(){
jQuery(this).find('[value=""]').remove();
})
});
https://jsfiddle.net/k08zj6r9/
if you wish, you can disable the node, instead of remove.
jQuery(this).find('[value=""]').attr('disabled','disabled');

HTML Options and Values Intechanging

I am currently trying to make a simple web application which logs to the console the values that are selected in an HTML drop-down menu. However, whenever I change my options in a different select, it ends up showing a value in the #player select. For example, if I chose Shot on Cage and clicked save, the console would show that the value to be b. If I am not explaining this thoroughly enough, please let me know, and I will try to re-explain my difficulties.
function myFunction() {
var a = document.getElementById("player").selectedIndex;
console.log(document.getElementsByTagName("option")[a].value);
var b = document.getElementById("what").selectedIndex;
console.log(document.getElementsByTagName("option")[b].value);
var c = document.getElementById("where").selectedIndex;
console.log(document.getElementsByTagName("option")[c].value);
var d = document.getElementById("when").selectedIndex;
console.log(document.getElementsByTagName("option")[d].value);
}
<select id="player">
<option value="b">B</option>
<option value="n">N</option>
<option value="a">A</option>
<option value="c">C</option>
<option value="m">M</option>
<option value="j">J</option>
<option value="ja">Ja</option>
</select>
<select id="what">
<option value="shoton">Shot on Cage</option>
<option value="shotoff">Shot off Cage</option>
<option value="goal">Goal</option>
<option value="assist">Assist</option>
<option value="block">Block</option>
<option value="steal">Steal</option>
<option value="turnover">Turnover</option>
<option value="drawn">Ejection Drawn</option>
<option value="ejected">Ejected</option>
</select>
<select id="where">
<option value="set">Set</option>
<option value="navy">Navy</option>
<option value="leftwing">1/2 side past 5</option>
<option value="rightwing">4/5 side past 5</option>
<option value="point">Point/3</option>
<option value="lefttwo">1/2 side 2 meter</option>
<option value="righttwo">4/5 side 2 meter</option>
<option value="1">6 on 5 1</option>
<option value="2">6 on 5 2</option>
<option value="3">6 on 5 3</option>
<option value="4">6 on 5 4</option>
<option value="5">6 on 5 5</option>
<option value="6">6 on 5 6</option>
</select>
<select id="when">
<option value="q1">Quarter 1</option>
<option value="q2">Quarter 2</option>
<option value="q3">Quarter 3</option>
<option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>
This will work for you.
.getElementsByTagName("option") will ruin your result as it will select all the <option> tags and it post the result as one.
So try this code it will work.
function myFunction() {
var a = document.getElementById("player");
console.log(a.options[a.selectedIndex].value);
var b = document.getElementById("what");
console.log(b.options[b.selectedIndex].value);
var c = document.getElementById("where");
console.log(c.options[c.selectedIndex].value);
var d = document.getElementById("when");
console.log(d.options[d.selectedIndex].value);
}
<select id="player">
<option value="b">B</option>
<option value="n">N</option>
<option value="a">A</option>
<option value="c">C</option>
<option value="m">M</option>
<option value="j">J</option>
<option value="ja">Ja</option>
</select>
<select id="what">
<option value="shoton">Shot on Cage</option>
<option value="shotoff">Shot off Cage</option>
<option value="goal">Goal</option>
<option value="assist">Assist</option>
<option value="block">Block</option>
<option value="steal">Steal</option>
<option value="turnover">Turnover</option>
<option value="drawn">Ejection Drawn</option>
<option value="ejected">Ejected</option>
</select>
<select id="where">
<option value="set">Set</option>
<option value="navy">Navy</option>
<option value="leftwing">1/2 side past 5</option>
<option value="rightwing">4/5 side past 5</option>
<option value="point">Point/3</option>
<option value="lefttwo">1/2 side 2 meter</option>
<option value="righttwo">4/5 side 2 meter</option>
<option value="1">6 on 5 1</option>
<option value="2">6 on 5 2</option>
<option value="3">6 on 5 3</option>
<option value="4">6 on 5 4</option>
<option value="5">6 on 5 5</option>
<option value="6">6 on 5 6</option>
</select>
<select id="when">
<option value="q1">Quarter 1</option>
<option value="q2">Quarter 2</option>
<option value="q3">Quarter 3</option>
<option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>
options[a.selectedIndex].value this simple will get you the value of the selected option value in the select and in javascript option in a property of select which we can combain with selectedIndex property and get you value.
Hope this was helpfull.
you have many options split into 4 selects ... document.getElementsByTagName will receive them ALL ... so using the selectedIndex is only valid for the fist select
you can use getElementsByTagName on any element - so, in this case you would use it on the select element
function myFunction() {
var a = document.getElementById("player");
console.log(a.getElementsByTagName("option")[a.selectedIndex].value);
var b = document.getElementById("what");
console.log(b.getElementsByTagName("option")[b.selectedIndex].value);
var c = document.getElementById("where");
console.log(c.getElementsByTagName("option")[c.selectedIndex].value);
var d = document.getElementById("when");
console.log(d.getElementsByTagName("option")[d.selectedIndex].value);
}
<select id="player">
<option value="b">B</option>
<option value="n">N</option>
<option value="a">A</option>
<option value="c">C</option>
<option value="m">M</option>
<option value="j">J</option>
<option value="ja">Ja</option>
</select>
<select id="what">
<option value="shoton">Shot on Cage</option>
<option value="shotoff">Shot off Cage</option>
<option value="goal">Goal</option>
<option value="assist">Assist</option>
<option value="block">Block</option>
<option value="steal">Steal</option>
<option value="turnover">Turnover</option>
<option value="drawn">Ejection Drawn</option>
<option value="ejected">Ejected</option>
</select>
<select id="where">
<option value="set">Set</option>
<option value="navy">Navy</option>
<option value="leftwing">1/2 side past 5</option>
<option value="rightwing">4/5 side past 5</option>
<option value="point">Point/3</option>
<option value="lefttwo">1/2 side 2 meter</option>
<option value="righttwo">4/5 side 2 meter</option>
<option value="1">6 on 5 1</option>
<option value="2">6 on 5 2</option>
<option value="3">6 on 5 3</option>
<option value="4">6 on 5 4</option>
<option value="5">6 on 5 5</option>
<option value="6">6 on 5 6</option>
</select>
<select id="when">
<option value="q1">Quarter 1</option>
<option value="q2">Quarter 2</option>
<option value="q3">Quarter 3</option>
<option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>
That being said, this still isn't the best solution - use #weBBer's code INSTEAD
because a <select> element has a property called options, which you can use the selectedIndex property to get the selected <option> - see the better answer for an example

Returning form results in a separate div tag

So I want to return a user's form results in a div so they can see what they have chosen underneath the form using JQuery but struggling to use the right code? Ive tried using the .html function and replaceWith. etc but nothing seems to be working?
Here's my html code:
<form id="myform">
<h4>Enter your booking slot here:</h4><br>
<select id="programmes">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
<option value="test5">Test 5</option>
</select><br><br>
<select id="time">
<option value="one">01:00</option>
<option value="two">02:00</option>
<option value="three">03:00</option>
<option value="four">04:00</option>
<option value="five">05:00</option>
<option value="six">06:00</option>
<option value="seven">07:00</option>
<option value="eight">08:00</option>
<option value="nine">09:00</option>
<option value="ten">10:00</option>
<option value="eleven">11:00</option>
<option value="twevle">12:00</option>
<option value="one-pm">13:00</option>
<option value="two-pm">14:00</option>
<option value="three-pm">15:00</option>
<option value="four-pm">16:00</option>
<option value="five-pm">17:00</option>
<option value="six-pm">18:00</option>
<option value="seven-pm">19:00</option>
<option value="eight-pm">20:00</option>
<option value="nine-pm">21:00</option>
<option value="ten-pm">22:00</option>
<option value="eleven-pm">23:00</option>
<option value="midnight">00:00</option>
</select><br><br>
<button type="submit" value="Submit Booking">
</form>
</div>
<div></div>
$('#select').on('change', function() {
$('#result').html( $(this).find('option:selected').text() )
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
<option value="test_1">Test 1</option>
<option value="test_2">Test 2</option>
<option value="test_3">Test 3</option>
<option value="test_4">Test 4</option>
<option value="test_5">Test 5</option>
</select>
<div id="result"></div>

How can I reset multiple dropdowns in jquery mobile with custom class at once

I have this code which resets all the dropdowns when dropdown1 changes.
<select id="name" >
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select id="name2" class="whatever">
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select id="name3" class="whatever">
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select id="name4" class="whatever">
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select id="name5" class="whatever">
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select id="name6" class="whatever">
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
I wanted to select the class and reset all of them at once but the only way to do it is with: $('select').val('').selectmenu('refresh');
But what if I want to specify a custom class name like in this case "whatever". How can I do it?
This is my jsfiddle
Working fiddle.
You have just to add it after select :
$('#name').change(function(){
$('select.whatever').val('').selectmenu('refresh');
});
Hope this helps.

jquery .html() not getting latest selected value

jquery .html() not getting latest selected value, code here
<div id="testDiv">
<select id="mySel">
<option value="1">opt 1</option>
<option selected value="2">opt 2</option>
<option value="3">opt 3</option>
<option value="4">opt 4</option>
</select>
</div>
and script
$(document).ready(function(){
$('#mySel').val('3');
var divContent = $('#testDiv').html();
alert(divContent);
});
getting an output like this
<select id="mySel">
<option value="1">opt 1</option>
<option selected value="2">opt 2</option>
<option value="3">opt 3</option>
<option value="4">opt 4</option>
</select>
'selected' not getting changed, i need output like this
<select id="mySel">
<option value="1">opt 1</option>
<option value="2">opt 2</option>
<option selected value="3">opt 3</option>
<option value="4">opt 4</option>
</select>
$(document).ready(function(){
$('#mySel').val('4');
$("#mySel").find('option').removeAttr("selected");
$("#mySel option[value='4']").attr("selected","selected");
var divContent = $('#testDiv').html();
alert(divContent);
});
Output:
<select id="mySel">
<option value="1">opt 1</option>
<option value="2">opt 2</option>
<option value="3">opt 3</option>
<option selected="selected" value="4">opt 4</option>
</select>
For your desired output you will need to add a script to move the selected attribute to the correct <option> when the user changes the value. By default the select list will not modify your markup based on the user's actions.

Categories

Resources