passing jQuery IDs as parameters a JavaScript function

Question

Javascript

function changeInitial(init,alter)
{   
<!--alert(alter);-->

init.parent().hide();
alter.parent().show();
}

Html

<div class="form_item">
   <div class="form_label">
         <label>Account</label>
   </div>
   <span id="new_ac">
       <input type="text"/>
       <a id="create_ac" onclick ='changeInitial($("#create_ac, #select_ac"));'>
           Select Existing Account
       </a>
   </span>
   <span id="existing_ac">
       <select>
         <option>Select an account</option>
         <option>Customer</option>
         <option>Competitor</option>
         <option>Investor</option>
         <option>Partner</option>
         <option>Reseller</option>
         <option>Supplier</option>
       </select>
       <a id="select_ac">Create new Account</a>
    </span>
</div>

Firebug keeps telling me that "alter" is undefined. Please is there something I am missing? "init" is working fine.

Are you sure JavaScript can interpret your JQuery selection as two parameters in "changeInitial". It has two Parameters but you only send one. — Tobias
– Tobias, Commented Mar 30, 2011 at 11:09

Karl Nicoll · Accepted Answer · 2011-03-30 11:07:12Z

3

In your "changeInitial(...)" call in your HTML, change to this:

onclick='changeInitial($("#create_ac"), $("#select_ac"));'

The way you are doing it, you are only specifying a single parameter.

answered Mar 30, 2011 at 11:07

Karl Nicoll

16.5k3 gold badges53 silver badges65 bronze badges

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

5 Comments

Shoppyonline Over a year ago

Its suppose to be a toggle action though, so is there an proper way to reverse the action. i.e when #select_ac becomes visible.

Karl Nicoll Over a year ago

@Shoppyonline - Inside the changeInitial function, you could check to see which button is visible by using init.parent().is(":visible"), and if init is invisible, show init, and hide alter, and if init is visible, hide init and show alter

Shoppyonline Over a year ago

@Karl Nicoll - Thank you. Yes that makes a lot of sense but I just switched the IDs in the html and that worked too. Okay another question, how do I make the #select_ac's parent invisible on page load without having to specify $("#existing_ac").hide(); (ie #select_ac parent)

Karl Nicoll Over a year ago

@Shoppyonline - You could do this by using the JQuery $(document).ready(); function. For example: $(document).ready(function() { $("#select_ac").parent().hide(); });.

Shoppyonline Over a year ago

Yes @aSeptik gives a very good solution below. Using classes is a brilliant idea and I can also use the function for multiple element-pair instances. Thanx

Andy · Accepted Answer · 2011-03-30 11:06:33Z

2

should be:

onclick ='changeInitial($("#create_ac"),$("#select_ac"));'

otherwise it's just one jquery object.

answered Mar 30, 2011 at 11:06

Andy

30.2k9 gold badges43 silver badges59 bronze badges

2 Comments

Shoppyonline Over a year ago

Thank you Andy. Works fine. You missed a " after "#create_ac.

Shoppyonline Over a year ago

Its suppose to be a toggle action though, so is there an proper way to reverse the action. i.e when #select_ac becomes visible.

Alex · Accepted Answer · 2011-03-30 11:38:45Z

2

Why are you using onclick?

Use jquery instead:

$(document).ready(function() {
    $('#create_ac').click(function(){
        changeInitial($("#create_ac"), $('#select_ac'));
    });
});

   function changeInitial(init,alter)
{   
    <!--alert(alter);-->

    init.parent().hide();
    alter.parent().show();
}

check out my example here - http://jsfiddle.net/ajthomascouk/qqksd/

UPDATE

$(document).ready(function() {
    $('#create_ac').click(function(){
        changeInitial($("#create_ac"), $('#select_ac'));
    });
    $('#select_ac').click(function(){
        changeInitial($("#select_ac"), $('#create_ac'));
    });
});

Updated fiddle

UPDATE 2

$(document).ready(function() {
    $('a').click(function(){
        changeInitial($(this).attr('id'), $('#select_ac'));
    });
});

edited Mar 30, 2011 at 11:38

answered Mar 30, 2011 at 11:12

Alex

9,0612 gold badges29 silver badges44 bronze badges

2 Comments

Shoppyonline Over a year ago

I want to use this function for other elements. This the only way I thought about that allows me to select a particular ID and manipulate it. Its suppose to be a toggle action though, so you can help me figure out how to reverse the action. i.e when #select_ac becomes visible.

Shoppyonline Over a year ago

Yep! :) Thats it alright! But how do I make the IDs dynamic because multiple pair elements need to use this function.

Luca Filosofi · Accepted Answer · 2011-03-30 12:22:00Z

2

DEMO: http://jsbin.com/ehumu4/4 (Updated)

$(function(){
  $('span a').click(function(){ //work with pairs just like an accordion
    $(this).parent(':visible').hide().siblings().show();
  });
});

<!-- you should use classe's instead of id's -->
<span><a href="#" class="select_ac">Create new Account</a></span>
<span><a href="#" class="create_ac">Select Existing Account</a></span>

 .existing_ac {display:none } /* hidden at page load */

edited Mar 30, 2011 at 12:22

answered Mar 30, 2011 at 11:36

Luca Filosofi

31.2k9 gold badges72 silver badges77 bronze badges

7 Comments

Shoppyonline Over a year ago

@aSeptik Good solution. I need to use this function for any pair of elements. See conversation with @Karl Nicoll above.

Shoppyonline Over a year ago

Thanks @aSeptik. Using classes makes it a lot easier.

Luca Filosofi Over a year ago

@Shoppyonline: it is not just a matter of easier, but a standard to accomplish, you can't have duplicate id's in your page. id's must be unique; so, if you need to have many pairs, the way to go is using classes and also use just one function instead of multiple inline onlick events. hope this help.

Karl Nicoll Over a year ago

@Shoppyonline and @aSeptik. This is a good solution, I'd suggest changing the answer from mine to this. Do bear in mind though that setting the .existing_ac class to display:none; in CSS will not allow user's to "select existing account" if they have JavaScript disabled because the code to show the elements won't run, if that needs consideration. I'd recommend still hiding all hidden elements in JavaScript.

Shoppyonline Over a year ago

Excellent @aSeptik. @Karl Nicoll a very valid recommendation. Are there people in this world that still have JavaScript disabled??

|

Collectives™ on Stack Overflow

passing jQuery IDs as parameters a JavaScript function

Javascript

Html

4 Answers 4

5 Comments

2 Comments

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Javascript

Html

4 Answers 4

5 Comments

2 Comments

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related