检查选定的值并将输入字段更改为只读

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?

Answer 1

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"> 

Answer 2

It's a bit hard to tell but:

"edit_type['.$i.']"

will resolve to something like

"edit_type['.1.']"

whereas in your function you call you look for

'edit_type['+nr+']'

which becomes if nr == '.1.' :

'edit_type[.1.]'

Note the missing ticks. Also not you have a dot everywhere. Either add the ticks in your function, or drop them and the dot (which will resolve to an operator without the tics) entirely. This is adding ticks:

 function show_dim(selectVeld, nr) { if(document.getElementById("edit_type['"+nr+"']").value == 'rond') { document.getElementById("edit_maat_2['"+nr+"']").attr('readonly','readonly'); } } 

 <select class="form-control" id="edit_type['.1.']" name="edit_type" onclick="show_dim(this, '.1.')"> <option ';if($row_table_1['type'] == 'as') { 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'].'"> 

But I think you just want

"edit_type[$i]"

and in the function argument

$i

instead of '.$i.' . If you were actually showing the final HTML result then the problem is the same, with $i everywhere as a string instead of 1 .