How to enable/disable input field in a table row in javascript without affecting other row(s)

Question

I have a form with a dropdown menu followed by a text input field. The input box is disabled by default. Selecting a specified option ("OTHER") from the menu should enable the text field.

Note: The user can add multiple row(s) if he clicks on the icon(+). The other row(s) will not be affected when a certain row selects "OTHER". Only the row(s) having the option "OTHER" will be enable.

<tr id="dataRow">
    <td>+</td>
    <td>-</td>                                           
    <td>
        <select onChange="checkOption(this);">
         <option value="A">Option A</option>
         <option value="B">Option B</option>
         <option value="C">Option C</option>
         <option value="OTHER">Other</option>  
        </select>
    </td>                            
    <td><input id="inputTextBox"></td>  
</tr>

JAVASCRIPT:

function checkOption(obj) {
        var input = document.getElementById("inputTextBox");
        input.disabled = obj.value != "OTHER";
}

Sample:

First Row: Selects OTHER (inputTextBox is enabled)
User add another Row: Selects Option A (inputTextBox is disabled)
User add another Row: Selects OTHER (inputTextBox is enabled)

The HTML is something like this when multiple row(s) is generated. Sharing the same ids, options..

<tr id="dataRow">
        <td>+</td>
        <td>-</td>                                           
        <td>
            <select onChange="checkOption(this);">
             <option value="A">Option A</option>
             <option value="B">Option B</option>
             <option value="C">Option C</option>
             <option value="OTHER">Other</option>  
            </select>
        </td>                            
        <td><input id="inputTextBox"></td>  
    </tr>
<tr id="dataRow">
        <td>+</td>
        <td>-</td>                                           
        <td>
            <select onChange="checkOption(this);">
             <option value="A">Option A</option>
             <option value="B">Option B</option>
             <option value="C">Option C</option>
             <option value="OTHER">Other</option>  
            </select>
        </td>                            
        <td><input id="inputTextBox"></td>  
    </tr>
<tr id="dataRow">
        <td>+</td>
        <td>-</td>                                           
        <td>
            <select onChange="checkOption(this);">
             <option value="A">Option A</option>
             <option value="B">Option B</option>
             <option value="C">Option C</option>
             <option value="OTHER">Other</option>  
            </select>
        </td>                            
        <td><input id="inputTextBox"></td>  
    </tr>

What have you tried so far and can you explain what specific problem you have? — NewToJS
– NewToJS, Commented May 19, 2015 at 8:30
where is locateFrom element. also can show an example of <select> tag values. — sachin.ph
– sachin.ph, Commented May 19, 2015 at 8:35
why do you use the word dynamically in the title? The word has nothing to do with the question — vsync
– vsync, Commented May 19, 2015 at 8:38
@user3864004 so if the client selects other you want to disable the input element right? Is that it? — NewToJS
– NewToJS, Commented May 19, 2015 at 8:56

NewToJS · Accepted Answer · 2015-05-19 10:04:27Z

1

If you want to check the selected value and disable the input if the client selects other this will work.

function checkOption(obj) {
    var input = document.getElementById("inputTextBox");
    if(obj.value=='OTHER'){
        input.disabled=true;
    }else{
        input.disabled=false;
    }
}

<select onChange="checkOption(this);">
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
<option value="OTHER">Other</option>  
</select>
<br>     
<input id="inputTextBox">

Or

a new option with the value of other is created and appears at the top of the select. You can give your select an ID and call this function and it will check the selected option after the dynamic option has been added.

function checkOption() {
    var input = document.getElementById("inputTextBox");
    var Index = document.getElementById("Options").selectedIndex;
    if(document.getElementById("Options")[Index].value=='OTHER'){
        input.disabled=true;
    }else{
        input.disabled=false;
    }
}

<select id="Options" onChange="checkOption();">

Using selectedIndex

document.getElementById("Options")[0] => A - Option A

document.getElementById("Options")[1] => B - Option B

document.getElementById("Options")[2] => C - Option C

document.getElementById("Options")[3] => OTHER - Other

If you have any questions please leave a comment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!

edited May 19, 2015 at 10:04

answered May 19, 2015 at 9:08

NewToJS

2,7723 gold badges17 silver badges22 bronze badges

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

15 Comments

Ti J Over a year ago

Yes. But take into consideration that the row(s) are incremental, the client may add multiple rows by clicking and icon(+). and the input element has the same id. My worry is when the 1st row input is disabled, when the user selects Option A in the 3rd row, the 1st row might be enabled or all the input field for every row might be enabled also.

NewToJS Over a year ago

@user3864004 ID's should be unique and you have edited your question after i posted this answer.

Ti J Over a year ago

user clicks (+) to add rows, not to add options to the select.

NewToJS Over a year ago

@user3864004 well the problem you have is multiple elements using the same id. ID's should be unique, hence being used to identify a specific element. This wasn't in your original question. If you keep changing the question each time a person submits an answer you'll find people won't bother to help you anymore.

Ti J Over a year ago

apologies for changing the question. I just want that the content is clearly enough to understand so I updated it and provide examples.

|

Szymon Toda · Accepted Answer · 2015-05-19 08:34:32Z

0

Is jQuery an option?

If yes use on()

According to docs it binds event even to not yet existing elements.

answered May 19, 2015 at 8:34

Szymon Toda

4,52613 gold badges45 silver badges62 bronze badges

1 Comment

Ti J Over a year ago

I'm afraid not. Simply use a javascript.

K.I · Accepted Answer · 2015-05-19 09:01:31Z

0

I am not sure I understand what exactly you are trying to achieve but if its just enabling/disabling the text field something like this in your checkOption function should do the job:

function checkOption(obj) {
  if (obj.value == "OTHER"){
    if( document.getElementById("inputTextBox") != null)
      {
        document.getElementById("inputTextBox").disabled = false;
      } 
  }
  if (obj.value != "OTHER")
  {
    if( document.getElementById("inputTextBox") != null)
      {
        document.getElementById("inputTextBox").disabled = true;
      } 
  }

edited May 19, 2015 at 9:01

answered May 19, 2015 at 8:38

K.I

5861 gold badge7 silver badges20 bronze badges

4 Comments

Ti J Over a year ago

I will try this out. But what if I have added a new row with a value not equal to "OTHER", will the first inputTextBox enabled?

K.I Over a year ago

CheckOption function is called only when new dropdown option is selected so other rows unless they call that same function should not effect the text field.

Ti J Over a year ago

other rows call the same function because the user has the option to add multiple row. And the row(s) have same set of ids, same set of select options. Just a copy of the 1st row

K.I Over a year ago

I personally think having elements with same id's on one page is bad practice so I would develop my code to avoid that situation.

Collectives™ on Stack Overflow

How to enable/disable input field in a table row in javascript without affecting other row(s)

3 Answers 3

15 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

15 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related