$_Post for Disabled Select

$_POST for disabled select

This is how the disabled attribute works. When a form control is disabled, the value will be ignored when the form is submitted and the key will not be present in $_POST (or $_GET).

If you want the value to be present in the submitted data, but you don't want the user to be able to change the value on the page (which I imagine is what you are trying to acheive) use readonly="readonly" instead of disabled="disabled".

EDIT

The <select> element does not have a readonly attribute. The above information still stands as it will work for <input>s and <textarea>s.

The solution to your problem here would be to disable the select and use a hidden input to send the value back to the server - e.g.

When the select is enabled:

<select class="txtbx1" name="country">
  <!-- options here -->
</select>

...and when it is disabled:

<select class="txtbx1" name="country_disabled" disabled="disabled">
  <!-- options here, with appropriate value having `selected="selected"` -->
</select>
<input type="hidden" name="country" value="value_of_field" />

How to ensure a select form field is submitted when it is disabled?

<select disabled="disabled">
    ....
</select>
<input type="hidden" name="select_name" value="selected value" />

Where select_name is the name that you would normally give the <select>.

Another option.

<select name="myselect" disabled="disabled">
    <option value="myselectedvalue" selected="selected">My Value</option>
    ....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />

Now with this one, I have noticed that depending on what webserver you are using, you may have to put the hidden input either before, or after the <select>.

If my memory serves me correctly, with IIS, you put it before, with Apache you put it after. As always, testing is key.

Post a disabled select field PHP

No, that's what disabling the field does: Prevents the value from being posted back to the server. If you're disabling the field, you should know its value as it can't be changed. You shouldn't need the value to be posted back.

If the value is changing based on some other input, you should capture that input server-side and use it to calculate the value that would have been posted back, the same way you calculated which value to select client-side. Relying on the client-side calculated value to be accurate is a serious security flaw.

Your options are to somehow enable the field before the form is posted, or add a hidden field.

send html select option disabled attribute with POST and enabled select option attribute with onclick in input form

You can do it like this.

For example

<script>

function processForm(e) {
    if (e.preventDefault) e.preventDefault();

    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = "my-disabled-check-input";
    input.value = document.getElementById('table B').disabled;
    this.appendChild(input);

    this.submit();
}

var form = document.getElementById('my-form');
if (form.attachEvent) {
    form.attachEvent("submit", processForm);
} else {
    form.addEventListener("submit", processForm);
}
</script>

You could also just add another onclick function as well without the same event listener and then submit the form with form.submit();

Then in your PHP file just treat it as a normal POST variable.
You would want to look at $_POST['my-disabled-check-input']; if we are doing it like I setup.

In your form html you can set the POST URL. This URL can be the page that displays the form and also receive the POST variables. If you are unfamiliar with these terms then have a look at https://www.w3schools.com/html/html_forms.asp

But basically you can set an "action" which is just the URL to the php file.

So taken directly from W3schools a form looks like this.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

If wanted to have a PHP file that displayed the form and took $_POST variables we can do something like this.

<?php
if($_POST) {
 echo "Post Variables sent";
 var_dump($_POST);
} else {
 echo "Where I will put my form HTML and JS.";
}
?>

Your PHP can also be used like this to make writing HTML easier.

<?php if($_POST): ?>
    Your name is <?=$_POST['fname']?> <?=$_POST['lname']?>.
<?php else: ?>
    <form action="/action_page.php">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="John"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Doe"><br><br>
      <input type="submit" value="Submit">
    </form>
<?php endif; ?>

This <?=$_POST['fname']?> is equivalent to <?php echo $_POST['fname']; ?> but just a little shorter and I like using it that way in my HTML views.

This script doesn't take into consideration any user input parsing so keep that in mind. You may also want to look into HTML 5 form validation to make sure the input is only information you expect and also PHP filtering of user input.

Retaining values of drop down that are disabled after submit

If a dropdown is disabled, the value isn't sent to the server. You can add a hidden input with the same name and value.

<input type="hidden" name="boost_app" value="<?php echo $_POST['boost_app'];?>">
<select name = 'boost_app' id = 'boost_app' onchange = 'runboost()' disabled>
<?php echo "<option value = '". $boost_app . "'>" . $boost_app .  "</option>"; ?>
<option <?php if($_POST['boost_app'] == 'Yes'){?> selected="true" <?php }; ?> value = "Yes">Yes</option>
<option <?php if($_POST['boost_app'] == 'No') {?> selected="true" <?php }; ?> value = "No">No</option>
</select>

Form post not including the select input

You are seeing this behaviour because you have made option disabled and disabled value do not get submitted to server . i.e :

  for (var i = 1; i < op.length; i++) {
        if (arr_selectedDrinkIds.includes(op[i].value)) {
          op[i].disabled = true;
        } else {
          op[i].disabled = false;
        }
      }

Now, to fix this you can add below script to your jquery code :

$("form").on("submit", function(e) {
    $("select option").prop("disabled", false) //this will remove disable from options
})

Above code will get called when user clicked on submit button and then inside this you can remove disabled attribute from your select-box options to make them submit as well .

Quick Demo :

$(document).ready(function() {
  var arr_drinks = ["C", "K", "A"]
  var arr_drinkIds = [1, 2, 3]
  var arr_initSelectedDrinkId = [1, 3]
  var arr_selectedDrinkIds = [1, 3]
  var options = [{
    "text": "",
    "value": "",
    "selected": false
  }];
  for (var i = 0; i < arr_drinks.length; i++) {
    if (arr_drinkIds[i] == arr_initSelectedDrinkId) {
      var selectTrueFalse = true;
    } else {
      var selectTrueFalse = false;
    }
    options.push({
      "text": arr_drinks[i],
      "value": arr_drinkIds[i],
      "selected": selectTrueFalse,
    });
    //othert cods..
  }

  var numberOfBoxes = document.getElementsByClassName("rec_mode").length;
  var selectBox = document.getElementsByClassName('rec_mode');

  for (var j = 0; j < numberOfBoxes; j++) {
    for (var i = 0, l = options.length; i < l; i++) {
      var option = options[i];
      if (j == 0) {
        selectBox[j].options.add(new Option(option.text, option.value, false, option.selected));
      } else {
        selectBox[j].options.add(new Option(option.text, option.value));
      }
    }

    var op = document.getElementsByClassName("rec_mode")[j].getElementsByTagName("option");
    op[0].disabled = true;
    // start with i = 1 because 0 must remain disabled always.
    for (var i = 1; i < op.length; i++) {
      if (arr_selectedDrinkIds.includes(op[i].value)) {
        op[i].disabled = true;
      } else {
        op[i].disabled = false;
      }
    }
  }

  $('.rec_mode').find('option:selected').attr("selected", "selected");
  $('.rec_mode').find('option:not(:selected)').removeAttr('selected');

  $('.rec_mode').on('change', function() {
    arr_selectedDrinkIds = []
    for (var j = 0; j < numberOfBoxes; j++) {
      arr_selectedDrinkIds.push(selectBox[j].value);
    }
    for (var j = 0; j < numberOfBoxes; j++) {
      var op = document.getElementsByClassName("rec_mode")[j].getElementsByTagName("option");
      // start with i = 1 because 0 (empty option) must remain disabled always.
      for (var i = 1; i < op.length; i++) {
        if (arr_selectedDrinkIds.includes(op[i].value)) {
          op[i].disabled = true;
        } else {
          op[i].disabled = false;
        }
      }
    }
  });

  $('.rec_mode').change(function() {
    var nameSelection = $(this).attr("name");
    var nameSelectionArr = nameSelection.split(/([0-9]+)/)
    var i = nameSelectionArr[1];
    var selectedDrinkId = $(this).find('option:selected').attr("value");
    //some codes
    $(this).find('option:selected').attr("selected", "selected");
    $(this).find('option:not(:selected)').removeAttr('selected');
  });

  var aantalDrinks = 0;
  $('#NewDrinkType').click(function() {
    aantalDrinks = aantalDrinks + 1;
    $(".hiddenDiv" + aantalDrinks).parent().show();
    if (aantalDrinks >= arr_drinks.length - 1) {
      $("#NewDrinkType").hide();
    }
  });

  $('.increaseWithOne').click(function() {
    $(this).parent().find('input').val(parseInt($(this).parent().find('input').val()) + 1);
  });

  $('.decreaseWithOne').click(function() {
    if ($(this).parent().find('input').val() > 0) {
      $(this).parent().find('input').val(parseInt($(this).parent().find('input').val()) - 1);
    }
  });
  $("form").on("submit", function(e) {
    console.log("BEFORE --" + $(this).serialize())
    $("select option").prop("disabled", false)
    console.log("AFTER --" + $(this).serialize())

    e.preventDefault() //remove this line when ,,submitting 
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form action="submitted.php" method="post">

  <div class="drinkInvoer">
    <table class="TeacherPaysTable">
      <tr>
        <td class="TeacherPaysCount">
          <div>
            <div class="decreaseWithOne">
              -
            </div>
            <input readonly="readonly" name="aantalDrinks0" type="number" value=1 class="numberOfDrinks" min="0" max="999">
            <div class="increaseWithOne">
              +
            </div>
          </div>
        </td>
        <td class="TeacherPaysDrink">
          <select id="select0" name="select0" class="rec_mode"></select>
        </td>
        <td class="TeacherPaysImage"><img id="ImgLogo0" src="drinkLogo/noDrink.png" class="logoImg"></td>
      </tr>
    </table>
    <div class="hiddenDiv0"></div>
  </div>
  <div class="drinkInvoer">
    <table class="TeacherPaysTable">
      <tr>
        <td class="TeacherPaysCount">
          <div>
            <div class="decreaseWithOne">
              -
            </div>
            <input readonly="readonly" name="aantalDrinks1" type="number" value=1 class="numberOfDrinks" min="0" max="999">
            <div class="increaseWithOne">
              +
            </div>
          </div>
        </td>
        <td class="TeacherPaysDrink">
          <select id="select1" name="select1" class="rec_mode"></select>
        </td>
        <td class="TeacherPaysImage"><img id="ImgLogo1" src="drinkLogo/noDrink.png" class="logoImg"></td>
      </tr>
    </table>
    <div class="hiddenDiv1"></div>
  </div>

  <br><br>
  <table class="TeacherPaysTable">
    <tr>
      <td class="TeacherPaysCount">
        <div id="NewDrinkType">+ Meer drinken</div>
      </td>
      <td class="TeacherPaysDrink">
      </td>
      <td class="TeacherPaysImage">
        <input type="submit" name="submit" value="Bevestigen" class="bevesetigDrankjes"></td>
    </tr>
  </table>
  <input type="hidden" id="teacherId" name="teacherId" value="'. $_POST['teacherId'] .'">

</form>

Disable option after submitting

You put else on 'selected', if it's not selected then disabled. Also you have to check first if session is set.

<select name="hoogte"><?
foreach ($hoogte_array as $hoogtekey => $valuehoogte) 
    {
    ?><option value="<?= $hoogtekey;?>" <?php if(isset($_SESSION['laatstehoogte'])) { echo ($hoogtekey==$_SESSION['laatstehoogte']) ? "selected" : 'disabled'; } ?>><?= $valuehoogte;?></option><?
    }

---

Related Topics