Ahmed Ahmed - 4 months ago 80
jQuery Question

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
.

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>