Access select element value on form submit - javascript

Refactoring how a select element is written and trying to figure out how to access the value of a select drop-down on form submit.
Currently, the code looks like this:
<select onchange="myFunc(this.value)">Some Options</select>
Would like to do something like this:
<form onsubmit="myFunc("Send the value of the select element")">
<select>Some Options</select>
<input type="submit"/>
</form>
What's the best way to grab the value of the select element given that "this" has a new context?

Do you prefer a solution with pure JS or can you use JQuery?
<html>
<head>
<script type="text/javascript" src="jquery-1.8.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#myselect').change(function() {
console.log($(this).val());
});
});
</script>
<form id="myform">
<select id="myselect">
<option value="val1">opt1</option>
<option value="val2">opt2</option>
</select>
<input type="submit"/>
</form>
</body>
</html>
Here's the alternative with pure Javascript:
<html>
<head>
<script type="text/javascript" src="jquery-1.8.1.js"></script>
</head>
<body onload="domisready()">
<script type="text/javascript">
var domisready = function() {
document.getElementById('myselect').onchange = function() {
console.log(this.options[this.selectedIndex].value);
};
};
</script>
<form id="myform">
<select id="myselect">
<option value="val1">opt1</option>
<option value="val2">opt2</option>
</select>
<input type="submit"/>
</form>
</body>
</html>

assuming you have only one select in form and this refers to form context.Try this:
$(this).find('select').val();

Related

How to save chosen Jquery selected options at same page even stay at same place after refresh the pagea

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
</head>
<body>
<form method="POST" name="" action="">
<select class="chzn-select" multiple="true" name="time" style="width:300px;" id="rememberSelected">
<option value="00:30">00:30</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="02:30">02:30</option>
<option value="03:00">03:00</option>
<option value="30:30">03:00</option>
<option value="04:30">04:30</option>
<option value="05:00">04:30</option>
</select>
<button type="button">Save</button>
</form>
<script type="text/javascript">
$(function() {
$(".chzn-select").chosen();
});
</script>
<script>
$("#rememberSelected").val(localStorage.getItem("selected") || 1);
$("#rememberSelected").on("change", function() {
localStorage.setItem("selected", $(this).val());
});
</script>
</body>
</html>
how to save selected options at same place after click on the save button using chosen jquery even if I'm refresh the page selected option should stay at same place.
Store the selected option into localStorage and retrieve it upon page load.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
if(!!localStorage.getItem("selected")) {
$("#rememberSelected").val(localStorage.getItem("selected").split(",")).trigger("chosen:updated");
}
$("button").on("click", function() {
localStorage.setItem("selected", $("#rememberSelected").val());
});
You can save your state to localStorage
<script>
if (localStorage['select-state']) {
$( "select" ).val(JSON.parse(localStorage['select-state']));
}
$( "select" ).change(function() {
localStorage['select-state'] = JSON.stringify($(this).val());
});
</script>

Edit jquery editable select

I need a little help for this script. It is a jQuery Plugin that converts a select into an text field with suggestions. When I use it in a form it submits the text not the value.
How can I use get the value of options not the text?
Example:
<link rel="stylesheet" href="https:rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css">
<form action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/" method="get">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="submit" value="Submit" />
</form>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<script>
window.onload = function () {
$('#basic').editableSelect();
}
</script>
It should send "000" not "zero", and results in domian.com/page.php?data=000 not domian.com/page.php?data=zero.
UPDATE:
Another way in order to get the value you are looking for is:
$('#basic').siblings('.es-list').find('li.selected').data('value')
For the text instead you can use:
$('#basic').siblings('.es-list').find('li.selected').text()
Old answer:
The plugin jquery-editable-select exposes an event called "onSelect".
So you need to attach an event handler for this event and listen for the form submit:
$(function () {
var selectedEleValue = null;
$('#basic').editableSelect({
onSelect: function (element) {
selectedEleValue = element.val();
console.log('The val is: ' + element.val() + ' The text is: ' + element.text());
}
});
$('form[action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/"]').on('submit', function(e) {
if (selectedEleValue != null) {
$('#basic').val(selectedEleValue);
}
})
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">
<script src="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<form action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/" method="get">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="submit" value="Submit" />
</form>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<link href="./jquery-editable-select-master/dist/jquery-editable-select.min.css" rel="stylesheet">
<script src="./jquery-editable-select-master/dist/jquery-editable-select.min.js"></script>
<script type="text/javascript">
$(function () {
$('#basic').editableSelect();
});
function abc(){
var basic_text = document.getElementById('basic').value;
var basic_value = $('#basic').siblings('.es-list').find('li.selected').attr('value');
console.log(basic_text);
console.log(basic_value);
}
</script>
</head>
<body>
<form method="post" id="form_id" action="">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<button type="button" onclick="abc();">Submit</button>
</form>
</body>
</html>

Keep default value and pass it on

I have the following piece of code to grab the value of a drop down list. The problem I have is that due to the onchange event attribute the first value is not passed if a user does not select an option. Is there a way I can define when there is no change the first value is passed on?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo GetSelectOptionData</title>
<select name="mySelect" id="mySelect" onchange="getSelectedValue();">
<option value="aaaaaaaaa.xml">Text 1</option>
<option value="bbbbbbbbb.xml">Text 2</option>
</select>
<form action="test">
Value1: <input id="myField" type="text" value=""><br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function getSelectedValue() {
var value = document.getElementById('mySelect').value.split('.');
document.getElementById('myField').value = value[0];
}
</script>
</body>
</html>
Many thanks!
set the first option as selected default
<option selected="selected" ...
and call getSelectedValue() after everything is defined
<script type="text/javascript">
function getSelectedValue() {
var value = document.getElementById('mySelect').value.split('.');
document.getElementById('myField').value = value[0];
}
getSelectedValue()
</script>

Unable to add the value from dropdown list to end of url

I'm having trouble trying to add the value part of the dropdown list to the end of my url as each value is different for the dropdown list.
<!DOCTYPE html>
<html>
<head>
<title>Task 8</title>
</head>
<body>
<script type="text/javascript">
change(val) {
document.staff1.action="http://tl28serv/task7.php?staffID=" + val;
}
</script>
<form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">
<select id="staff1">
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
</body>
</html>
You are missing the function keyword. Also you need to call the function change() on onchange event. Do it like this:
<script type="text/javascript">
function change(th) { //Added function keyword
document.getElementById("StaffName").action="http://tl28serv/task7.php?staffID=" + th.value;
}
</script>
<form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">
<select id="staff1" onchange="change(this)"> <!--Called change() here-->
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
Demo. Check console.
If you want to handle changed uri on server side and do nothing with it on client side, you don't have to do anything. just send data to server.
If you use GET method, your id appears on uri string.
<!DOCTYPE html>
<html>
<head>
<title>Task 8</title>
</head>
<body>
<form id="StaffName" action="http://tl28serv/task7.php" method="get">
<select id="staffID">
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
</body>
first of all you are trying to set action on select box, that is not correct, you have to set action on form. I think this should work.
<!DOCTYPE html>
<html>
<head>
<title>Task 8</title>
</head>
<body>
<script type="text/javascript">
function change(val) {
document.StaffName.action="http://tl28serv/task7.php?staffID=" + val;
}
</script>
<form id="StaffName" action="http://tl28serv/task7.php?staffID=" method="post">
<select id="staff1" onSelect="change(this.value)">
<option value="12" >Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
</body>
</html>
You don't need JavaScript to achieve this.
Here is how you do it with HTML
Change your form method to GET, instead of POST.
Change form action to http://tl28serv/task7.php
Add name attribute to select, with value staffID
Of course, there exists a Javascript solution as well.
Here is how you achieve it:
<body>
<form id="StaffName" action="http://tl28serv/task7.php" method="post">
<select id="staff1">
<option value="12">Perce Trainor</option>
<option value="15">Chuck Norris</option>
<option value="23">Jane Zumba</option>
</select>
<br/>
<input type="submit" name="submit">
</form>
// move script
<script type="text/javascript">
var staff = document.getElementById('staff1');
// attach "change" EventListener to #staff1
staff.addEventListener('change', function() {
document.getElementById('StaffName').action="http://tl28serv/task7.php?staffID=" + this.value;
});
</script>
</body>

select box value on select shows in the textfield

i have been trying to make an script in php that allows me when i select any option on the select box then on selecting it its value gets displayed in the textfield. Kindly let me know how can i do that. I am a rookie so kindly bear my question if its stupid.
Kindly clcik on the followi8ng link for image help of my quesiton.
http://s18.postimage.org/d85l2m2nt/select_Box2.gif
If your elements are in a form, then put the following listener on the select element:
onchange="this.form.textareaName.value = this.value"
Where textareaName is the name of the textarea you want to set the value of.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slectboxid option').click(function(){
$('#textboxid').val($(this).val());
});
});
</script>
</head>
<body>
<form action="#" method="post">
<select name="select" id="slectboxid">
<option value="test">test</option>
<option value="test2">test2</option>
</select>
<input type="text" name="text" id="textboxid" />
</form>
</body>
</html>
use jquery,the above code snippet.it will help you.
Please Try this
<html>
<head>
<script type="text/javascript">
function assignText(obj) {
document.getElementById("textboxid").value = obj.options[obj.selectedIndex].value;
}
</script>
</head>
<body>
<form action="#" method="post">
<select name="select" id="slectboxid" onchange = 'assignText(this)'>
<option value="test">test</option>
<option value="test2">test2</option>
</select>
<input type="text" name="text" id="textboxid" />
</form>
</body>
</html>

Categories