how execute function onto different input tags?

Question

Javascript code

<script>                  
   function disableBtn() {          
       document.getElementsByTagName("INPUT")[1].removeAttribute("disabled");                       
   }                            
</script>

html code

<form>

    <p>
        <label for="uname">* User Name :</label>
        <br>
        <input type="text" name="txtuname" id="uname" onclick="disableBtn()" value="">
    </p>
    <div style="text-align:center">
        <p>
            <input name="username" type="submit" id="submit" value="Change Username" disabled="disable">
        </p>
    </div>
    <p>
        <label for="fullname">* Full Name :</label>
        <br>
        <input type="text" name="txtfullname" id="fullname" value="">
    </p>
    <div style="text-align:center">
        <p>
            <input name="fullname" type="submit" id="submit" value="Change Fullname" disabled="disable">
        </p>
    </div>
    <p>
        <label for="address">* Address :</label>
        <br>
        <input type="text" name="txtaddress" id="address" value="">
    </p>
    <div style="text-align:center">
        <p>
            <input name="address" type="submit" id="submit" value="Change Address" disabled="disable">
        </p>
    </div>
</form>

I want to add an onclick event in each input tag which executes the function disableBtn, but I want this code to work on any input I click. I do not want to have to give a number like this :

document.getElementsByTagName("INPUT")[1].removeAttribute("disabled");

for every input element.

I think I should use this but I don't know where to put it.

So this input should be come enabled after you click on the input element? — soktinpk
– soktinpk, Commented Sep 28, 2014 at 0:43
yes it should remove the desable property and it did that but i want it to be dyname and not to work only on the index i put in like [1] — user2270924
– user2270924, Commented Sep 28, 2014 at 0:46
hey guys are you trying to solve it or you don't understand my question ? — user2270924
– user2270924, Commented Sep 28, 2014 at 0:53

soktinpk · Accepted Answer · 2014-09-28 01:04:32Z

1

You want to loop over every input element and add an event? document.getElementsByTagName("input") returns an array, so you can use a loop to go over it.

JavaScript:

// This is a function which disables an input element
// Notice I used "this" instead of document.getElementsByTagName("input")[some number]
// "this" refers to the input element that was clicked
function disableBtn() {
  this.parentNode.nextElementSibling.querySelector('input[type="button"]').disabled = false;                       
}
// Get every single input element
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; ++i) {
  // Loop through the input elements, and add a "click" event
  var input = inputs[i];
  input.addEventListener("click", disableBtn, false);
}

edited Sep 28, 2014 at 1:04

answered Sep 28, 2014 at 0:55

soktinpk

3,8982 gold badges24 silver badges34 bronze badges

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

Comments

user1106925 · Accepted Answer · 2014-09-28 00:56:07Z

0

Code:

Change your function to this:

function disableBtn(el) {
    el.parentNode.nextElementSibling.querySelector("input").disabled = false;
}

And the handler to this:

onclick="disableBtn(this)"

DEMO: http://jsfiddle.net/dcg8gzqt/

Explanation:

So now the handler passes the current element that was clicked to the disableBtn function.

That function then...

takes the clicked element and traverses up to its .parentNode
moves ahead to the .nextElementSibling, which is the next div,
then searches inside that div using .querySelector() for the first input it finds.
sets the .disabled property of the input to false

answered Sep 28, 2014 at 0:56

community wiki

user1106925

3 Comments

user2270924 Over a year ago

thanks thats work fine . if you don't mind can you tell me how to make it remove the desable property only if i add or remove something from the input tag because this input i used them to display values from database

soktinpk Over a year ago

@user2270924 Please ask a different question if that is your goal.

user2270924 Over a year ago

i can't for now as they block me from asking questions for i day because sometimes i cannot illustrate my questions

Collectives™ on Stack Overflow

how execute function onto different input tags?

Javascript code

html code

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Javascript code

html code

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related