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/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css">
<form action="/" 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=".12.4.min.js"></script>
<script src=".min.js"></script>
<script>
window.onload = function () {
$('#basic').editableSelect();
}
</script>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./indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css">
<form action="http://stackoverflow./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./jquery-1.12.4.min.js"></script>
<script src="https://rawgithub./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./page.php?data=000 not domian./page.php?data=zero.
- Can you edit your post with your code (js, html) ? – Nordine Commented Jul 18, 2016 at 13:20
- How are you currently getting the value, the way that gives you zero? – Goose Commented Jul 18, 2016 at 13:36
- using <form method="get"> – Ahmed Commented Jul 18, 2016 at 13:40
- I need to edit "jquery-editable-select.min.js" file – Ahmed Commented Jul 18, 2016 at 13:41
- If you try to submit your form without your jQuery plugin, do you still have your error? – Nordine Commented Jul 18, 2016 at 13:46
2 Answers
Reset to default 1UPDATE:
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./questions/38437449/edit-jquery-editable-select/"]').on('submit', function(e) {
if (selectedEleValue != null) {
$('#basic').val(selectedEleValue);
}
})
});<script src="https://code.jquery./jquery-1.12.4.min.js"></script>
<link href="https://rawgit./indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">
<script src="https://rawgit./indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<form action="http://stackoverflow./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>