How to Enable dynamic textbox onclick using javascript?

Question

I have textboxes created with DB fields and a "E" for Edit link next to it. Initially the text fields are disabled. If the user wants to modify the value from DB they would click the link and the textbox next to it will be enable. The problem is that it is modifying the first text box of the same code number. This is probably because the id attribute on text field is the same and I would like to properly identified text but have failed. Here is my code

<input type="text" name="form_line[code]" size="10"
    value='<?php echo bucks($tmp['adj_amount']); ?>' disabled="true" id="editable"/>

<a id="myedit" title="Click to Edit Adjustment Value" href="#" onclick="edit_adj();return false;">E</a>

 <script type="text/javascript">
function edit_adj() {
        document.getElementById("editable").disabled = false;
}
</script>

An example of output is shown below and if I click on "E" the first textbox gets enabled :( enter image description here

Am I reading your question right that your page has duplicate ids? Duplicate ids in an HTML page is not supported. Each id should be unique. — richb01
– richb01, Commented Jun 5, 2014 at 2:02
But I have read that you cannot put id=id[x] so as it is created dynamically I do not know what to replace it with. — user2031297
– user2031297, Commented Jun 5, 2014 at 2:04
Onload they are disabled, but user should be able to click "E" and the correct textbox should be enable to modify value — user2031297
– user2031297, Commented Jun 5, 2014 at 2:07
It sounds to me like the php code that generates these edit fields is outputting in a loop or somehow creating more than 1 edit field. If this is true, I can suggest an answer for you. — richb01
– richb01, Commented Jun 5, 2014 at 2:10

richb01 · Accepted Answer · 2014-06-05 02:33:16Z

1

I think this will work for you:

<?php
for ($x=0; $x<=10; $x++) {
?>
<input type="text" name="somename" size="10"
    value='<?php echo "hello" ?>' disabled="true" id="editable<?php echo $x ?>"/>

<a id="myedit" title="Click to Edit Adjustment Value" href="#" onclick="edit_adj(<?php   echo $x ?>);return false;">Edit</a>
<br/>
<?php
}
?>

<script type="text/javascript">
    function edit_adj(id) {
    document.getElementById("editable"+id).disabled = false;
}
</script>

Hope this helps! Essentially, this is giving a unique id to each text field and passing the id into the javascript that enables the text field in question. I created a test page locally and it worked.

answered Jun 5, 2014 at 2:33

richb01

1,1272 gold badges13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2031297 Over a year ago

Thank you so much this did it!!! I didn't know you could do it like this and is very clever :)

richb01 Over a year ago

I'm glad it worked! Would you mind accepting it as the answer? :-)

Collectives™ on Stack Overflow

How to Enable dynamic textbox onclick using javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related