If drop down menu value is set with javascript, the value does not exists for php. Php echo with $_POST (page reload) does retain selected value

Question

In short: need to keep javascript changed drop down box value after page reload (click on submit button).

Drop down menu

At first with php array create values

$options_main = array( 
   1=>'= Equals', 
      '≠ Does not Equal', 
      '> Is greater than', 
      '≥ Is greater than or equal to', 
      '< Is less than', 
      '≤ Is less than or equal', 
      '∋ Contains', 
      '∌ Does not contain', 
      ' '
  );

Then drop down boxes (php code)

<select name="date_day_selector[]" id="record_date_day'. $counter. '" onchange="blank()">';

foreach ( $options_main as $i1=>$opt1 ) : 
    echo '<option value="' .htmlspecialchars($i1) .'"' .
          ((htmlspecialchars($i1) == 
              htmlspecialchars($_POST['date_day_selector'][$counter]))? 'selected' : "") .    
           '>'.htmlspecialchars($opt1) .'</option>';
endforeach;

echo '</select>';

<select name="date_month_selector[]" id="record_date_month'. $counter. '">';

foreach ( $options_main as $i1=>$opt1 ) : 
    echo '<option value="' .htmlspecialchars($i1) .'"' .((htmlspecialchars($i1) == 
          htmlspecialchars($_POST['date_month_selector'][$counter]))? 'selected' : "") .
          '>'. htmlspecialchars($opt1) .'</option>';
    endforeach;

echo '</select>';

If manually select value and click submit button, page reloads and value is retained.

But need: if in id="record_date_day'. $counter. '" user choose certain values, then value of id="record_date_month'. $counter. '" becomes blank ' '

Javascript changes the value of id="record_date_day'. $counter. '"

function blank() {
<?php
$counter = 0;
$counter_maximum = 2;
while ($counter < $counter_maximum){
?>
if ( (document.getElementById('record_date_day<?php echo $counter;?>').selectedIndex == 2) || (document.getElementById('record_date_day<?php echo $counter;?>').selectedIndex == 3)  || (document.getElementById('record_date_day<?php echo $counter;?>').selectedIndex == 4) || (document.getElementById('record_date_day<?php echo $counter;?>').selectedIndex == 5) ) {
document.getElementById('record_date_month<?php echo $counter;?>').selectedIndex=9;
document.getElementById('record_date_year<?php echo $counter;?>').selectedIndex=9;
}
<?php
$counter++;
}
?>
}

And if javascript has changed the value of id="record_date_day'. $counter. '" the value is not retained after click on submit button.

Any ideas how to keep javascript changed value after page reload (click on submit button)?

Update 1

Conclusion that I have made is:

With php $_POST after page reload echo drop down menu value that was set before page reload.

If user manually set drop down menu value, then value exists.

If javascript changes value, the value does not exists. I tried to pass drop down menu value with ajax and php echo nothing (blank space). From my opinion that is why after page reload I see default value.

So question is if with javascript is possible to change drop down box value in some way that value exists for php.

If not then I try to use php like: if value is not set, echo necessary value (not default value)...

Answer 1

Lets reduce the complexity here and remove some unnecessary usage of htmlspecialchars(). You dont need to do htmlspecialchars on the index of your array, you created it and it only has integers in it.

I have not had time to test this but I think it should do what you want! Hopefully.

<select name="date_day_selector[]" id="record_date_day'. $counter. '" onchange="blank()">';

<?php
    foreach ( $options_main as $i1 => $opt1 ) : 
        $sel = $_POST['date_day_selector'][$counter] == $i1 ? 'selected="selected"' : '';
        echo '<option ' . $sel . ' value="' . $i1 .'">' . htmlspecialchars($opt1) . '</option>';
    endforeach;
?>

echo '</select>';

<select name="date_month_selector[]" id="record_date_month'. $counter. '">';

<?php
    foreach ( $options_main as $i1 => $opt1 ) : 
        $sel = $_POST['date_month_selector'][$counter] == $i1 ? 'selected="selected"' : '';
        echo '<option ' . $sel . ' value="' . $i1 .'">'. htmlspecialchars($opt1) . '</option>';
    endforeach;
?>

echo '</select>';