Check value selected and change input-field to read-only

Question

When the option rond is selected in the select-list edit_type below I need input-field edit_maat_2 to be changed to readonly but nothing is happening.

This is my code:

<select class="form-control" id="edit_type['.$i.']" name="edit_type" onclick="show_dim(this, '.$i.')">
<option ';if($row_table_1['type'] == 'rond') { echo 'selected="selected"';} echo 'value="as">Staf rond</option>
<option ';if($row_table_1['type'] == 'buis') { echo 'selected="selected"';} echo 'value="buis">Buis</option>
</select>

<input type="number" class="form-control" id="edit_maat_2['.$i.']" name="edit_maat_2" value="'.$row_table_1['maat_2'].'">

<script type="text/javascript">
function show_dim(selectVeld, nr)
{
    if(document.getElementById('edit_type['+nr+']').value == 'rond') {
        document.getElementById('edit_maat_2['+nr+']').attr('readonly','readonly'); }
}
</script>

$i is generated and is function ok.

When I check this is console mode I see this error: Uncaught ReferenceError: e is not defined I am not using the variable e any wehere(?)

Any suggestions?

Please click <> and create a minimal reproducible example with PURE HTML and JS only. No need for PHP — mplungjan
– mplungjan, Commented Aug 30, 2018 at 8:38
or document.getElementById('edit_maat_2['+nr+']').readOnly = true; — Leo
– Leo, Commented Aug 30, 2018 at 8:42
Try to watch this,maybe it will help you jsfiddle.net/Micio/32uqjh84/4 — Leo
– Leo, Commented Aug 30, 2018 at 8:48

mplungjan · Accepted Answer · 2018-08-30 08:59:53Z

Several issue, many typos.

You have values "as" and "buis" - nowhere "rond"
.attr is jQuery, not DOM

This is likely what you want

function setAccess() {
  var id = this.id.replace("edit_type", "edit_maat_2"),
    field = document.getElementById(id);
  if (this.value == "as") {
    field.setAttribute('readonly', 'readonly');
  } else {
    field.removeAttribute('readonly');
  }

}

window.addEventListener("load", function() {
  document.querySelectorAll("[id^=edit_type]").forEach(function(sel) {
    sel.addEventListener("change", setAccess);
    // Initialise the fields in case of PHP setting the selected attribute
    if ("createEvent" in document) {
      var evt = document.createEvent("HTMLEvents");
      evt.initEvent("change", false, true);
      sel.dispatchEvent(evt);
    } else {
      sel.fireEvent("onchange");
    }
  });
})

<select class="form-control" id="edit_type[1]" name="edit_type">
  <option value="as">Staf rond</option>
  <option value="buis">Buis</option>
</select>

1 <input type="number" class="form-control" id="edit_maat_2[1]" name="edit_maat_2" value="1">

<select class="form-control" id="edit_type[2]" name="edit_type">
  <option value="as">Staf rond</option>
  <option value="buis">Buis</option>
</select>

2 <input type="number" class="form-control" id="edit_maat_2[2]" name="edit_maat_2" value="2">

Collectives™ on Stack Overflow

Check value selected and change input-field to read-only

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related