How to save disable dropdown using post

Question

How can i save disabled dropdown in my database using POST. The reason why I need to used disable is to prevent user to change their selection.

When a user selects "Long neck (Emperador)", selection "pquantity will be disabled and input "pcs" will be shown

var pcs;

function checkOptions(select) {
  pcs = document.getElementById('pcs');
  if (select.options[select.selectedIndex].value == "Long neck (Emperador)") {
    pcs.style.display = 'block';
    document.getElementById('pquantity').disabled = true;

  } else if (select.options[select.selectedIndex].value == "Gin (Bilog)") {
    pcs.style.display = 'block';
    document.getElementById('pquantity').disabled = true;
  } else if (select.options[select.selectedIndex].value == "UFC Ketchup") {
    pcs.style.display = 'block';
    document.getElementById('pquantity').disabled = true;
  } else {
    document.getElementById('pquantity').disabled = false;
  }
}

<select onchange="checkOptions(this)" name="pname" id="pname" class="form-control">
  <option value="Aluminom Solid">Aluminum Solid</option>
  <option value="Long neck (Emperador)">Long neck (Emperador)</option>
  <option value="Gin (Bilog)">Gin (Bilog)</option>
  <option value="UFC Ketchup">UFC Ketchup</option>
  <option value="Bottle Caps">Bottle Caps</option>
  <option value="Scrap Aluminum">Scrap Aluminum</option>
  <option value="Scrap Iron">Scrap Iron</option>
  <option value="Steel">Steel</option>
</select>
<select name="pquantity" id="pquantity" class="form-control">
  <option value="">Please select quantity</option>
  <option value="50">50 kls</option>
  <option value="100">100 kls</option>
  <option value="150">150 kls</option>
  <option value="200">200 kls</option>
</select>
<input name="pcs" id="pcs" type="text" style="display: none" class="form-control" placeholder="Please indicate if how many pieces..." />

`disabled` form controls do not become part of the form submission data set. _“The reason why I need to used disable is to prevent user to change their selection.”_ - then you don’t want to send that value from the client in the first place. — CBroe, Jul 03 '20 at 08:39
@CBroe what i mean is that when user select long neck the dropdown kls will be disabled and then another textbox will be used for them to enter the amount like if how many pieces — Klint Masha, Jul 03 '20 at 08:51
You can replace the script you wrote with this `document.getElementById("pname").addEventListener("change", function() { const dis = ["Long neck (Emperador)", "Gin (Bilog)", "UFC Ketchup"].indexOf(this.value) !== -1; document.getElementById('pcs').style.display = dis ? "block" : "none"; document.getElementById('pquantity').disabled = dis; this.disabled = dis; })` - it is not a solution, just a suggestion - but how to enable again When quantity is blurred without entering a quantity? — mplungjan, Jul 03 '20 at 08:56
_“what i mean is that when user select long neck the dropdown kls will be disabled and then another textbox will be used for them to enter the amount like if how many pieces”_ - why does that require disabling of the select field? And what do I do, when I selected the wrong option unintentionally at first - am I trapped in your disabled select field now, and get no choice to correct my mistake? — CBroe, Jul 03 '20 at 08:56
@CBroe i tried to disabled it because when i click long neck in the choices then i tried to change it the input box for pieces will not going to hide. — Klint Masha, Jul 03 '20 at 09:02
@mplungjan i tried to used the code you wrote but it doesn't work. the scenario will be, if user select these fields"Long neck (Emperador)/Gin (Bilog)/UFC Ketchup" the dropdown KLS should be hidden and another textbow will be shown and that is textbox pcs, where user were going to indicate the pieces of the selected product "Long neck (Emperador)/Gin (Bilog)/UFC Ketchup" but if user doesn't select any of them the default selection will be the dropdown kls. — Klint Masha, Jul 03 '20 at 09:09
Then you should fix that original problem, rather than go for a “workaround” that just degrades the whole UI functionality to the point of being unusable. — CBroe, Jul 03 '20 at 09:09
@CBroe thats why i posted it here because i am trapped with this area, i dont know how to fixed it already — Klint Masha, Jul 03 '20 at 09:11
i already update the codes when lock neck was selected then i will changed it textbox should be hidden — Klint Masha, Jul 03 '20 at 09:17
@CBroe another problem i encountered how to add some design on this, am using the traditional way. ``` echo ""; } ``` — Klint Masha, Jul 03 '20 at 09:38
Not sure what you are asking, _“how to add some design on this”_? Do you mean the `alert` window? You can not customize those, these are native to the browser. If you want something that looks different, you will need to use a replacment that displays such notices using HTML instead. https://stackoverflow.com/questions/7853130/how-to-change-the-style-of-alert-box — CBroe, Jul 03 '20 at 10:29
Not sure what you are asking, _“how to add some design on this”_? Do you mean the `alert` window? You can not customize those, these are native to the browser. If you want something that looks different, you will need to use a replacment that displays such notices using HTML instead. https://stackoverflow.com/questions/7853130/how-to-change-the-style-of-alert-box — CBroe, Jul 03 '20 at 10:30
@KlintMasha I changed my comment to answer. If you liked the first answer given, then my code is simpler and does not change the DOM on using "block" vs "none" — mplungjan, Jul 03 '20 at 14:43

score 0 · Answer 1 · answered Jul 03 '20 at 09:21

if user select these fields"Long neck (Emperador)/Gin (Bilog)/UFC Ketchup" the dropdown KLS should be hidden and another textbow will be shown

So let’s do just that then …

To check whether the selected value was one of the three you are interested in, I am putting those three into an array here, and then use .includes() to the if the selected one was one of them. (Please note, Internet Explorer does not support .includes(). If you need to support that one as well, you can f.e. replace this with individual conditions, joined with ||.)

Depending on that, either the text input field gets shown and the other select hidden - or vice versa.

function checkOptions(select) {
  var pcs = document.getElementById('pcs'),
    pquantity = document.getElementById('pquantity');
  if (["Long neck (Emperador)", "Gin (Bilog)", "UFC Ketchup"].includes(select.value)) {
    pcs.style.display = 'block';
    pquantity.style.display = 'none';
  } else {
    pcs.style.display = 'none';
    pquantity.style.display = 'block';
  }
}

<select onchange="checkOptions(this)" name="pname" id="pname" class="form-control">
  <option value="Aluminom Solid">Aluminum Solid</option>
  <option value="Long neck (Emperador)">Long neck (Emperador)</option>
  <option value="Gin (Bilog)">Gin (Bilog)</option>
  <option value="UFC Ketchup">UFC Ketchup</option>
  <option value="Bottle Caps">Bottle Caps</option>
  <option value="Scrap Aluminum">Scrap Aluminum</option>
  <option value="Scrap Iron">Scrap Iron</option>
  <option value="Steel">Steel</option>
</select>
<select name="pquantity" id="pquantity" class="form-control">
  <option value="">Please select quantity</option>
  <option value="50">50 kls</option>
  <option value="100">100 kls</option>
  <option value="150">150 kls</option>
  <option value="200">200 kls</option>
</select>
<input name="pcs" id="pcs" type="text" style="display: none" class="form-control" placeholder="Please indicate if how many pieces..." />

alternative to includes is indexOf as I altready suggested 30 minutes before your post ;) — mplungjan, Jul 03 '20 at 14:45

mplungjan · Answer 2 · 2020-07-03T14:55:40.660

My code also works, is simpler, does not use inline event handling and does not change the layout by changing the pcs to block element

document.getElementById("pname").addEventListener("change", function() {
  const dis = ["Long neck (Emperador)", "Gin (Bilog)", "UFC Ketchup"].indexOf(this.value) !== -1;
  document.getElementById('pcs').style.display = dis ? "" : "none"; // not BLOCK
  document.getElementById('pquantity').disabled = dis;
})

<select name="pname" id="pname" class="form-control">
  <option value="Aluminom Solid">Aluminum Solid</option>
  <option value="Long neck (Emperador)">Long neck (Emperador)</option>
  <option value="Gin (Bilog)">Gin (Bilog)</option>
  <option value="UFC Ketchup">UFC Ketchup</option>
  <option value="Bottle Caps">Bottle Caps</option>
  <option value="Scrap Aluminum">Scrap Aluminum</option>
  <option value="Scrap Iron">Scrap Iron</option>
  <option value="Steel">Steel</option>
</select>
<select name="pquantity" id="pquantity" class="form-control">
  <option value="">Please select quantity</option>
  <option value="50">50 kls</option>
  <option value="100">100 kls</option>
  <option value="150">150 kls</option>
  <option value="200">200 kls</option>
</select>
<input name="pcs" id="pcs" type="text" style="display: none" class="form-control" placeholder="Please indicate if how many pieces..." />

How to save disable dropdown using post

2 Answers2