2

I am a beginner & self interested web coder.

I have been testing, asking, retesting, trying, reading up on different functionality solutions in javaScript to an online form which will consist of a multitude of <textarea>'s once I am done.

I am fairly ok, with the current state of functions, which are based upon several js events. Example code would be (written funny so it is easier to read in the forum, actual code is one line obviously):

<textarea
    data-id="0"
    class="classOne classTwo"
    id="dataInput_0"
    name="xInput_row_1"
        onFocus="functionOne();"
        onBlur="functionTwo();"
        onKeyUp="functionThree();">
</textarea>

I built and tested all the functions to work specifically on the id="dataInput_0" using getElementById. Example:

var d = document.getElementById("dataInput_0");

So my question is how to I make the functions trigger for other "dataInput" id's?

In other words:

var d = document.getElementById('whichever dataInput that is active/focused');

Thanks!

David Thomas
  • 249,100
  • 51
  • 377
  • 410
brian-welch
  • 441
  • 1
  • 7
  • 19

2 Answers2

2

The simplest way to work with your current code would be to do this:

onFocus="functionOne(this);"

...and then define your function:

function functionOne(el) {
   // el is the element in question, used e.g.:
   alert(el.name);
}

Within the onFocus=... the browser sets this to the element in question, so you can then pass it as a parameter to your function. Your function then just uses it directly rather than having to go via getElementById().

But since you mentioned jQuery, you could remove the inline onFocus and other onXYZ handlers from your html and just do it all in your JS as follows:

$("textarea").focus(function() {
   // here this is the element in question, e.g.:
   alert(this.value);
});

That defines a focus handler for all textareas on the page - to narrow it down to just textareas with class "classOne" do $("textarea.classOne"). Within the function this refers to the focused element. You could use the .blur() and keyup() methods to assign handlers for the other events shown in your code.

nnnnnn
  • 147,572
  • 30
  • 200
  • 241
  • The jQuery solution is working perfectly for the onFocus and onBlur functions, Thanks @nnnnnn! I believe with a little time, I can work that onKeyUp function to work as well. Thanks again, and for a patient response. Thanks also to @Andre & others! – brian-welch Apr 21 '13 at 05:42
0

My suggestion is to use attribute selector $('input[id^="dataInput_"]') for this and use the jQuery's .on() handler this way:

$('input[id^="dataInput_"]').on({
    focus: function{
       functionOne($(this));
    },
    blur:  function(){
       functionTwo($(this));
    },
    keyup: function(){
       functionThree($(this));
    }
});

and the functions:

functionOne(obj){
   console.log(obj.val());
}
functionTwo(obj){
   console.log(obj.val());
}
functionThree(obj){
   console.log(obj.val());
}
Jai
  • 74,255
  • 12
  • 74
  • 103
  • You might want to double-check the syntax in your `on` statement: it's _calling_ those functions, not assigning them as handlers. – nnnnnn Apr 21 '13 at 05:26
  • @nnnnnn & Jai - I have more questions related to this question, and I would like to give more example code. Is it best to just start a new question or edit the original question? – brian-welch Apr 21 '13 at 06:25
  • @Thewannabe-wishhecould - Unless the additional questions are very closely related to the original problem I'd probably start a new question. (But that's just me.) – nnnnnn Apr 21 '13 at 06:55