根据选择选项的值更改输入的值

Question

When inserting data into my table, I need to insert the day of the week as well as the number of the day of the week so they can be displayed in chronological order. To remove any room for error, I want the number of the day of the week to be determined by a select option.

Example would be: If select option val for .day* = Mon, .daynum* = 1

Here is what I have so far:

HTML:

<select required class="form-control day<?php echo $i; ?>" name="day<?php echo $i; ?>" />

   <option  disabled value="">Day of the Week</option>
   <option value="Mon">Monday</option>
   <option value="Tue">Tuesday</option>
   <option value="Wed">Wednesday</option>
   <option value="Thu">Thursday</option>
   <option value="Fri">Friday</option>
   <option value="Sat">Saturday</option>
   <option value="Sun">Sunday</option>

</select>

<input required class="form-control daynum<?php echo $i; ?>" type="text" name="daynum<?php echo $i; ?>" />

jQ:

$(document).ready(function(){
$('.daynum1').val($('.day1 option:selected').val());

$('.day').on('change', function() {
    $('.daynum1').val($(this).find('option:selected').val());
});

});

Currently my code just gets the initial value of the first row pulled from the database and sets it to Monday.

The code I have calls all rows and lets me edit them all at once, which gives each input/select a class that is "dayx" where x is the unique id from the database.

Answer 1

Use this to get value from input

$(document).ready(function(){
  $('.daynum1').val();

  $('.day').on('change', function() {
    $('.daynum1').val();
  });

  });

Answer 2

Create an array with the day names, and use the index as the day number.

$(document).ready(function() {
    var days = ["", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    $('.day').on('change', function() {
        $('.daynum1').val(days.indexOf($(this).val()));
    }).trigger("change");
});

BTW, you don't need to use option:selected to get the value of a <select> . Calling .val() on the <select> itself works.