Trying to get value from select form with JQuery

Question

What I am trying to do is get the selected value from the measurement form to pass using MeasurementID: $('#measurement').find(":selected").val() instead of using php, but it does not seem to work. I have also tried $('select[name=measurement]').val() and $('#measurement option:selected').val()

  <div>

            <?php
            require 'getMeasurementTypesByUser.php';
            $option1 = isset($_GET['user']) ? $_GET['user'] : false;
            if ($option1) {
                $res = getMeasurementTypesByUser($_GET['user']);

                echo '<form method="post" action=""><select id="measurement" name="measurement" onchange="this.form.submit();">';
                echo '<option value="">Select Measurement</option>';
                foreach ($res as $row) {
                    if ($row['MeasurementID'] != 1 && $row['MeasurementID'] != 2) {
                        echo '<option value="' . $row['MeasurementID'] . '">' . $row['MeasurementName'] . '</option>';
                    }else if($row['MeasurementID']== 1 ){
                        echo '<option value="1">Pressure</option>';
                    }
                }
                echo '</select></form>';
                $UserID = htmlentities($_GET['user'], ENT_QUOTES, "UTF-8");
            }
            $option = isset($_POST['measurement']) ? $_POST['measurement'] : false;
            if ($option) {
                $MeasurementID = htmlentities($_POST['measurement'], ENT_QUOTES, "UTF-8");
                if($MeasurementID==1){
                    $MeasurementID2=2;
                }
            }
            echo '<form method="get" action=""><select id="user" name="user" onchange="this.form.submit();">';
            echo '<option value="">Select User ID</option><option value="1">1</option><option value="2">2</option></select></form>';
            ?>

        </div>
        <!-- javascript -->
        <script src="libs/jquery-3.2.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $.ajax({
                    url: "/Kostas/measurementData.php",
                    type: "POST",
                    data: {UserID: <?php echo json_encode($UserID); ?>, MeasurementID: $('#measurement').find(":selected").val()}, //here
                    success: function (data) {
                        console.log(data);
//goes on

Answer 1

here's how I'd do it:

html:

<select data-user="<?php echo json_encode($UserID); ?>" id="mySelect">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

js:

<script>
    $(document).ready(function()
    {
        $('.mySubmitBtn').on('click', function()
        {
            var selected = $('#mySelect').val(),
                userId   = $('#mySelect').data('user');

            $.ajax({
                data:    {value: selected, user: userId},
                url:     'myScript.php',
                type:    'post',
                success: function(res) {console.log(res)},
                error:   function(res) {console.log(res)}
            })
        })
    });
</script>

what this does is, assign user id to the select as a data value. This means we can use .data to retrive data elements - syntax is: .data('attribute') - so that would get data-attribute.

it then gets selected value on click, the issue with doing ajax straight away, is that it is getting the selected value, but on document load, not on any update. That's why it shows the old value.

It then passes it all to a script to do whatever with.

NOTE: THIS CODE IS NOT LIKE FOR LIKE FOR YOURS SO DON'T JUST COPY AND PASTE ;)

update 1

An example (js) more tailored for OP

<script>
    $(document).ready(function()
    {
        $('#mySelect').on('change', function()
        {
            var selected = $(this).find('option:selected').val(),
                userId   = $(this).data('user');

            $.ajax({
                data:    {value: selected, user: userId},
                url:     'myScript.php',
                type:    'post',
                success: function(res) {console.log(res)},
                error:   function(res) {console.log(res)}
            })
        })
    });
</script>

Answer 2

Try this one:

$('#measurement').val()

The .val() on the select element itself is enough in recent jquery versions.

Source: http://api.jquery.com/val/

Demo:

function displayVals() {
  var singleValues = $( "#single" ).val();
  var multipleValues = $( "#multiple" ).val() || [];
  
  // When using jQuery 3:
  // var multipleValues = $( "#multiple" ).val();
  $( "p" ).html( "<b>Single:</b> " + singleValues +
    " <b>Multiple:</b> " + multipleValues.join( ", " ) );
}
 
$( "select" ).change( displayVals );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
 
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>

<p></p>

Answer 3

You may try below

you have to add the setTimeout .

<select id="user" name="user" onchange="fun_submit(this)" ></select>

fun_submit(obj){
   setTimeout(function(){obj.form.submit();},500);

}

Then you can use below method for get the value of selected option.

var value = $('select#measurement option:selected').val();

Answer 4

<select name="options" id="options">
    <option value="one">Option 1</option>
    <option value="two">Option 2</option>
</select>

Js code to get the value of the selected option.

$('#options').val();