Select specific ID using jQuery

thibotus01
thibotus01 used Ask the Experts™
on
Using jQuery, I would like to select the ID of the next hidden (display:none;) <fieldset> in my form?

<a href="#" id="toto" onclick="this.id=$(\'?????\');">test</a>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
If I could offer some constructive criticism, it appears that you are brand new to EE.  Welcome aboard!  Among the experts here are some of the most knowledgeable you will ever meet.  I am sure that many of them will be able to resolve your most toughest issues.  However, you should know that here, everyone basically volunteers their time.  We get no monetary recompense for our efforts.  The only thing we do get is points.  So, you kind of have to think of the points as money.  Every expert's time here is valuable.  Offering twenty points to spend time in resolving your problem is not even worth it.  You will probably see more reaction as you offer more and more points.  Since you are a Premium Service Member, you have unlimited points to spend.  Please do not be cheap with them.
Thank you!

Author

Commented:
Yes I was currently reading the FAQ. Now I understand the points sytem. 500 for this one!
OWASP Proactive Controls

Learn the most important control and control categories that every architect and developer should include in their projects.

Now to get to your problem, I need to know a little about the structure of your HTML.  Can you provide a url where we could see the page, or a copy of the HTML code?

Author

Commented:
Here the form:

<form id="commande_form" class="multipage">
<fieldset id="page_1" class="active" style="display: block;">
<fieldset id="page_2" style="display: none;">
<fieldset id="page_3" style="display: none;">
<fieldset id="page_4" style="display: none;">

Open in new window


When I click on the link (example):

<a href="#" id="page_1" onclick="">test</a>

Open in new window


I need to change the ID by the next one which is page_2 in fieldset tag with display none.
This could be done by a onclick event. But I don't know how...
OK, so you want the id to change to the next fieldset each time a person clicks on the link.  When the person arrives at the last fieldset, what do you want the link's action to be?

Author

Commented:
Yep exactly. The last fieldset is my problem :) It won't appear when the person will be on page_4.
Ids need to be unique across the DOM, so you cannot have Id of the anchor tag as page_1

but it looks like that you want to show the next fieldset at the click event of this anchor tag, so you can do

<form id="commande_form" class="multipage">
<fieldset id="page_1" class="active" style="display: block;">
<fieldset id="page_2" style="display: none;">
<fieldset id="page_3" style="display: none;">
<fieldset id="page_4" style="display: none;">

<a href="#" onclick="showNext()">test</a>

function showNext()
{
  var current = $("fieldset.active");
  $("fieldset").removeClass("active");
  current.next().addClass("active");
}
OK, we will get it to appear, but what do you want the link to do if you are on the last fieldset and the person clicks the link again?
when the last field is active then

<a href="#" onclick="showNext(this)">Next</a>
function showNext(thisObj)
{
  var current = $("fieldset.active");
  $("fieldset").removeClass("active");
  current.next().addClass("active");
  if ($("fieldset.active").index() == 3 )
  {
    //last page so remove anchor
    $(thisObj).remove();
  }
}

Author

Commented:
@gurvinder372: No I don't want to do that. I just want to put the fieldset ID in my <a id="ID">

@OmniUnlimited:You did not understand :) On the last fieldset the link won't be here in my script. It will be a submit button. So don't worry about the action on the last fieldset...
gurvinder372's code will work until you get to the last fieldset.  This is where I need to know, do you want it to start over again, or do you want the link to die?

Author

Commented:
About the unique ID in the DOM, we can change it in the anchor tag by "page1". not a problem...
@thibotus01: you just can't. In one page, you cannot have duplicate ids. If you have then your page is not valid
Perfect.  Then you have your solution.

See gurvinder372's original code:

<form id="commande_form" class="multipage">
<fieldset id="page_1" class="active" style="display: block;">
<fieldset id="page_2" style="display: none;">
<fieldset id="page_3" style="display: none;">
<fieldset id="page_4" style="display: none;">

<a href="#" onclick="showNext()">test</a>

function showNext()
{
  var current = $("fieldset.active");
  $("fieldset").removeClass("active");
  current.next().addClass("active");
}
<< About the unique ID in the DOM, we can change it in the anchor tag by "page1". not a problem...>>
but what is the point of putting this id in the anchor tag??

Author

Commented:
@OmniUnlimited: No it is not what I want to do...

See my previous answer about the unique ID.

Author

Commented:
@gurvinder372: I need unique ID in the anchor tag to call something. But this ID need to be changed each time we go to the next fieldset.
Its not required. You can move to next field without having all this complications.

Author

Commented:
How you can say it is not required as you don't know my entiere script? lol.

Here some explanations if you need:

I'm trying to validate a multi-page form.

So
$("page_1").click(function()
....
$("page_2").click(function()

Open in new window


each click on the ID which is the anchor will execute my function.
Hmm.  Again gurvinder372 is right.  You cannot have two elements on the same page with the same ID.  If you want access to the id through the link, why not use a rel attribute?  You could do it like so:

<a id="anchor" href="#" onclick="showNext()">test</a>

function showNext()
{
  var current = $("fieldset.active");
  var id = current.attr('id');
  $("#anchor").attr("rel", id);
  $("fieldset").removeClass("active");
  current.next().addClass("active");
}

Author

Commented:
But I don't want to show the next fieldset, this is not what I want to do...

Like I said before it's ok, we can put a new ID in the anchor tag.

If I copy my first question:

"select the ID of the next hidden (display:none;) <fieldset>"

we can change/create this ID (it is not a problem) to a unique one to put it in the anchor tag.
@thibotus01: what lol??

I am answering your question based on what you have mentioned in the question. I am not going to make assumption about what you have in your so called original script.

Now, looking at comment of yours, it seems that you want to have one button dedicated for validation of each form (fieldset). Don't you?

you can fetch the id of the next fieldset by

alert( $("fieldset.active").next().attr("id") );

Author

Commented:
@gurvinder372: I Do.

Otherwise it is possible to add +1 to the anchor ID? for each click.

<a id="pX" onclick="function.+1.to.X">
why don't you maintain an external counter which you will keep on incrementing?

Author

Commented:
Can we do the +1 function to the anchor ID?
You know that you can use click functions on rel attributes, right?

$("a[rel='page_1']").click(function()

$("a[rel='page_2']").click(function()

etc...

Author

Commented:
These seems to be good :

 var currentpage = $('fieldset.active').next().attr('id');
            $('<a href="#"  name="'+currentpage +'" onclick="return $(\''+id+'\').nextpage();">Next</a>').insertAfter(this);
				

Open in new window


But can we change the name value with the onclick? It need to pick the next fielset after clicking.

Author

Commented:
@OmniUnlimited: yes but the REL on the anchor must be generated dynamicaly.
Its not a good idea to change the Id of an element at run time. You may loose consistency in terms of unique ness of ids at some point.
But if you insist, then

<a id="pX_1" onclick="next(this)">

function next( thisObj )
{
  var id = $(thisObj).attr("id");
  var newId = "pX_" + (parseInt( id.substring(3) ) + 1 );
  $(thisObj).attr("id", newId);
}

Author

Commented:
@gurvinder372: and regarding my last message, it is maybe easie to execute the var value at each click.?

It works when I load the page but after clicking on the link it doesn't change the name value.
Sure, my code does that.

Author

Commented:
@OmniUnlimited: where?

<a rel="ID.DYNAMIC.CHANGES.EACH.CLICK">....
Here;

<a id="anchor" href="#" onclick="showNext()">test</a>

function showNext()
{
  var current = $("fieldset.active");
  var id = current.attr('id');
  $("#anchor").attr("rel", id);  // change rel on anchor
  $("fieldset").removeClass("active");
  current.next().addClass("active");
}

Author

Commented:
I'm trying like this :

function currentPage() {
return $('fieldset.active').next().attr('id'); 
}

Open in new window



Open in new window

<a href="#"  rel="'+currentPage()+'" onclick="currentPage(this.rel); return $(\''+id+'\').nextpage();">Next</a>

When I click I got "currentPage is not defined"
You have so many things wrong with this code, I don't know where to begin.

The code below will do exactly what you want it to do:

<a id="anchor" href="javascript:void(0)" onclick="showNext()" rel="Page_1">Next</a>

function showNext()
{
  var current = $("fieldset.active");
  var id = current.attr('id');
  $("#anchor").attr("rel", id);  // change rel on anchor
  $("fieldset").removeClass("active");
  current.next().addClass("active");
}

This code DOES NOT show the fieldsets.  It simply iterates through them one at a time moving the active class down to the next fieldset to keep track.

Try it.  I'm sure you will be happy with it.

Author

Commented:
Ok, I tried but this does what I don't want to. It shows the fieldset! I can assure. When it's validated, the second fieldset shows up.

My script already shows the next one & hide the previous one when the fieldset is valid.

My previous code works, I had to put it out the jQuery library.
this.rel=currentPage();

But the whole script doesn't do exactly as I expected. So i'm still looking into it.
Does the active class show the fieldset?

Author

Commented:
yes
Oh, sorry.  Didn't know that.  The code will still work.  We just need to assign a flag class like so:

<a id="anchor" href="javascript:void(0)" onclick="showNext()" rel="Page_1">Next</a>
<form id="commande_form" class="multipage">
<fieldset id="page_1" class="active flag" style="display: block;">
<fieldset id="page_2" style="display: none;">
<fieldset id="page_3" style="display: none;">
<fieldset id="page_4" style="display: none;">

function showNext()
{
  var current = $("fieldset.flag");
  var id = current.attr('id');
  $("#anchor").attr("rel", id);  // change rel on anchor
  $("fieldset").removeClass("flag");
  current.next().addClass("flag");
}

Oh, and by the way, if you find that you have a solution, please go to the comment that provided the solution and click on Accept Solution.  If there is more than one comment that was helpful, you can select multiple solutions.  Then you will need to assign us a grade.  Hopefully we have done really well with you and deserve an "A".
Only the ones you select will get any points.
If you select multiple solutions, the points will be split in accordance with how you split them.

Author

Commented:
When I click in  the first time on the link the REL doesn't change, still page_1. but the fieldset page_2 is showing and when I click for a second time, the REL change to page_2 but it should have changed in the first time.

Author

Commented:
But it is OK It works with my own solution, even you helped me good!

I just have other problems but I will create a new subject :) thanks
You bet.  We are here to help.  Thank you for the points!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial