Search code examples
javascripthtmljqueryalert

I am always getting the selected option text as first value in a select box. how to get the value on change from a HTML select box using Javascript

i tried all know options from stackoverflow, still getting the value as "--select---" the default / first option in the select box. my task is to get the selected option's text should be in the alert message. but it prints always , the first option' text,

here is my code :

<div class="form-group col-md-2">
  <label>Select DB Table to sync</label>
  <select name="dbTable" id="dbTable">
    <option value="100">--Select--</option>
    <option value="1001">TB_PAY_STATUSCODE_PRIORITY</option>
    <option value="1002">TB_PAYEE_ACCT_EXTRACT</option>

    <option value="1003">TB_PGP_PUBLICKEY</option>
    <option value="1005">TB_PAYMENT_STAGE2_CONFIG</option>
    <option value="1004">TB_PAYMENT_CONFIG</option>
    <option value="1000">Not Picked</option>
  </select>
</div>
<div class="form-group col-md-2">
  <input type="submit" value="DB Update" id="submit" onclick="testme();" style="margin-top: 13%;" />
</div>
</form>



<script type="text/javascript">
  var sel = document.getElementById('dbTable');
  var text = sel.options[sel.selectedIndex].text;
  var text1 = $("#dbTable :selected").text();
  var button = document.getElementById('submit');
  button.addEventListener('click', function(e) {
    //sel.options[1].selected = true;
    if ("createEvent" in document) {
      var evt = document.createEvent("HTMLEvents");
      evt.initEvent("change", false, true);

      sel.dispatchEvent(evt);
    } else {
      sel.fireEvent("onchange");
    }
    //sel.dispatchEvent(new CustomEvent('change') 

  });
  sel.addEventListener('change', function(e) {
    alert(text + text1);
  });

  $(document).on('submit', 'form', function testme() {
    var sel1 = document.getElementById('dbTable');
    var text = sel1.options[sel.selectedIndex].text;

    var dbTable = data;
    alert("inside testme()" + sel1 + text);
    $.ajax({
      type: 'get',
      url: "/SyncPage",
      data: JSON.stringify(dbTable),
      contentType: "application/json",
      success: function(data) {
        $('#cover-spin').hide();



        console.log(data);
        console.log("Data sync Loading...");
      },
      error: function(e) {
        console.log("ERROR: ", e);
        e.preventDefault();
      },

    });
    console.log(dbTable);
    alert(dbTable);


  });
</script>

And the alert i am getting is as follows

enter image description here

Solution

  • You need to change the 'change' event listener to:

    sel.addEventListener('change', function(e) {
  // get event target's value
  alert(e.target.value + ' - ' + e.target.selectedOptions[0].text);
});

    This is the Javascript version, alternatively with JQuery you can use change

    $('#dbTable').change(function() {
    alert($(this).val() + ' - ' + $(this).find("option:selected").text());
});


    var sel = document.getElementById('dbTable');
var text = sel.options[sel.selectedIndex].text;
var text1 = $("#dbTable :selected").text();
var button = document.getElementById('submit');
button.addEventListener('click', function(e) {
  //sel.options[1].selected = true;
  if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);

    sel.dispatchEvent(evt);
  } else {
    sel.fireEvent("onchange");
  }
  //sel.dispatchEvent(new CustomEvent('change') 

});

sel.addEventListener('change', function(e) {
  // get event target's value
  alert(e.target.value + ' - ' + e.target.selectedOptions[0].text);
});


$(document).on('submit', 'form', function testme() {
  var sel1 = document.getElementById('dbTable');
  var text = sel1.options[sel.selectedIndex].text;

  var dbTable = data;
  alert("inside testme()" + sel1 + text);
  $.ajax({
    type: 'get',
    url: "/SyncPage",
    data: JSON.stringify(dbTable),
    contentType: "application/json",
    success: function(data) {
      $('#cover-spin').hide();
      console.log(data);
      console.log("Data sync Loading...");
    },
    error: function(e) {
      console.log("ERROR: ", e);
      e.preventDefault();
    },

  });
  console.log(dbTable);
  alert(dbTable);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-2">
  <label>Select DB Table to sync</label>
  <select name="dbTable" id="dbTable">
    <option value="100">--Select--</option>
    <option value="1001">TB_PAY_STATUSCODE_PRIORITY</option>
    <option value="1002">TB_PAYEE_ACCT_EXTRACT</option>
    <option value="1003">TB_PGP_PUBLICKEY</option>
    <option value="1005">TB_PAYMENT_STAGE2_CONFIG</option>
    <option value="1004">TB_PAYMENT_CONFIG</option>
    <option value="1000">Not Picked</option>
  </select>
</div>
<div class="form-group col-md-2">
  <input type="submit" value="DB Update" id="submit" onclick="testme();" style="margin-top: 13%;" />
</div>
</form>