how to pass multiple jquery objects to a js function?

Question

Actually, I have more than 8-inputs w/ 8 different id's in HTML & i wanted to pass the jquery objects to a onlblur event function so I don't need to create 8-repetitive functions & only make 1 script function. I've been trying really hard for hours in searching Stack overflow but couldn't find the answer to my questions or perhaps I am just new to jquery. Hope you can help me & thanks in advance...

   function fill(t,xx,zz) {
    $(xx).val(t);
    setTimeout("$(zz).hide();", 200);
}

 <input  type="text" id="inputString" size="50" value="" onkeyup="lookup(this.value);" onblur="fill(this.value,'#inputString','#suggestions');" />  
 <div class="suggestionsBox" id="suggestions" style="display: none;">

To give you a better understanding of the code, this it the original one that really works & is only good for 1-input html tag. I'm planning to use only ONE function on 8-input html tags.

  <script type="text/javascript" src="jquery-1.2.1.pack.js"></script>

function lookup(xString) {
    if(xString.length == 0) {
        // Hide the suggestion box.
        $('#suggestions').hide();
    } else {
        $.post("db_rpc.php", {queryString: ""+xString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });
    }
} // lookup

function fill(t) {
    $('#inputString').val(t);
    setTimeout("$('#suggestions').hide();", 200);
}

i think you're looking for the arguments array. developer.mozilla.org/en-US/docs/JavaScript/Reference/… — Tetaxa
– Tetaxa, Commented Dec 19, 2012 at 9:40
$(xx).val(t); - this part do nothing. What do you want to do? Something like html5 placeholder option? — Pavel K
– Pavel K, Commented Dec 19, 2012 at 9:53
that part in the function selects the dropdown list suggestion box using jquery-1.2.1.pack.js & hides it after choosing the list. This function is only good ok if i use only 1 input html tag. — Ray Macz
– Ray Macz, Commented Dec 19, 2012 at 10:20

Aesthete · Accepted Answer · 2012-12-19 09:45:17Z

2

Make all your elements share the same class.

<div id="idOne" class="toBlur" />
<div id="idTwo" class="toBlur" />
<div id="idThree" class="toBlur" />

Tell jQuery that you want to apply the same function to each item with the class when the blur event is fired.

$(".toBlur").blur(function() {
  // Do whatever.
});

Also, if you're going to use jQuery (it's in your question tags), you shouldn't assign your callbacks in the HTML like you have.

answered Dec 19, 2012 at 9:45

Aesthete

18.9k6 gold badges38 silver badges46 bronze badges

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

1 Comment

Ray Macz Over a year ago

if i use this, it also changes the value of others 8-inputs $('.stringclass').val(t); on the dropdown list suggestion box. anyways thanks =)

adeneo · Accepted Answer · 2012-12-19 09:46:35Z

0

You do that with event handlers and classes:

<input  type="text" class="inputString" />  
<div class="suggestionsBox" id="suggestions" style="display: none;">

JS

$('.inputString').on({
    keyup: function() {
        lookup(this.value);
    },
    blur: function() {
        var self = this;
        setTimeout(function() {
            $(self).next('.suggestionsBox').hide()
        },200);
    } 
});

answered Dec 19, 2012 at 9:46

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

Pavel K Over a year ago

Why dont you use jQuery(self).next('.suggestionsBox').delay(200).fadeOut(0); instead setTimeout?

Ray Macz · Accepted Answer · 2012-12-20 01:15:10Z

i made it work used using 1set of function for 8-input tags by passing arguments to both functions. I placed a switch statement to determine the input tag id as seen on function fill. I also added another POST variable on function lookup. Below is my modified code:

 function lookup(inputString,nn) {
    if(inputString.length == 0) {
        // Hide the suggestion box.
        $('#suggestions').hide();
    } else 
    {
        $.post("db_rpc.php", {queryString: ""+inputString+"",nns: ""+nn+""}, function(data) 
        { //nns added a new post variable nns for php mysqli
            if(data.length >0) {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });
    }
}; // lookup

function fill(xx,n) {
switch(n) {
  case 1:
   $('#namedetails').val(xx); // input id
   break;
  case 2:
   $('#catdetails').val(xx);
   break;
}   
setTimeout("$('#suggestions').hide();", 200);
};     


<td class="absy"><input name="namedetails" type="text" id="namedetails" size="50" value="" onkeyup="lookup(this.value,1);" onblur="fill(this.value,1);"/>
        <div class="suggestionsBox" id="suggestions" style="display: none;">
            <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
            <div class="suggestionList" id="autoSuggestionsList">
                &nbsp;
            </div>
        </div>

I just wanna thank everyone who made the effort of answering my question... Still I learned things from your suggestions. Maybe my question was a bit vague to you guys, probably because im still new to jquery & just cameback coding after a longbreak. thanks again...

Collectives™ on Stack Overflow

how to pass multiple jquery objects to a js function?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related