Jquery passing an HTML element into a function

Question

I have an HTML form where I am going to copy values from a series of input fields to some spans/headings as the user populates the input fields. I am able to get this working using the following code:

$('#source').keyup(function(){
    if($("#source").val().length == 0){
       $("#destinationTitle").text('Sample Title');
    }else{
      $("#destinationTitle").text($("#source").val());
    }  
  });

In the above scenario the html is something like:

Sample Title

Basically, as the users fills out the source box, the text of the is changed to the value of the source input. If nothing is input in, or the user deletes the values typed into the box some default text is placed in the instead. Pretty straightforward. However, since I need to make this work for many different fields, it makes sense to turn this into a generic function and then bind that function to each 's onkeyup() event. But I am having some trouble with this. My implementation:

function doStuff(source,target,defaultValue) {

  if($(source).val().length == 0){
       $(target).text(defaultValue);
  }else{
      $(target).text($(source).val());
  }  

}

which is called as follows:

$('#source').keyup(function() {
            doStuff(this, '"#destinationTitle"', 'SampleTitle');
  });

What I can't figure out is how to pass the second parameter, the name of the destination html element into the function. I have no problem passing in the element I'm binding to via "this", but can't figure out the destination element syntax.

Any help would be appreciated - many thanks!

Nick Craver · Accepted Answer · 2010-03-15 20:40:53Z

5

Call it like this:

$('#source').keyup(function() {
        doStuff(this, '#destinationTitle', 'SampleTitle');
});

It's just a string :)

If the element is in relation to the other though, you can make it generic, for example if #destinationTitle is always in the next div, next table cell, etc...always in the same relative place, you can make this cleaner for all keybinds, if you post some sample markup I'll show you how.

answered Mar 15, 2010 at 20:40

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

4 Comments

christian Over a year ago

Hi Nick, Thats what I thought, and I've tried that :) - but how do I then reference it inside my function? When I do the following, it doesn't seem to work: function doStuff(source,target,defaultValue) { if($(source).val().length == 0){ $(target).text(defaultValue); }else{ $("'" + target + "'").text($(source).val()); } }

Anurag Over a year ago

why does else get special treatment? just use it normally else { $(target).text(..)

Nick Craver Over a year ago

@christian - Not sure what the syntax is on the else there, just use as Anurag has, no extra appends to the string.

christian Over a year ago

That was it - thanks Nick and Anurag - my else should have just read as above else {$(target.text(...)}

Nick Larsen · Accepted Answer · 2010-03-15 20:43:30Z

1

Get rid of the double quotes.

answered Mar 15, 2010 at 20:43

Nick Larsen

18.9k6 gold badges70 silver badges97 bronze badges

2 Comments

Anurag Over a year ago

aah my bad.. didn't see you were slow, lemme downvote you now!

christian Over a year ago

I continue to be amazed by the speedy responses of this community!

Collectives™ on Stack Overflow

Jquery passing an HTML element into a function

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related