Link to home
Start Free TrialLog in
Avatar of thibotus01
thibotus01Flag for France

asked on

Select specific ID using jQuery

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

Avatar of OmniUnlimited
OmniUnlimited
Flag of United States of America image

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!
Avatar of thibotus01

ASKER

Yes I was currently reading the FAQ. Now I understand the points sytem. 500 for this one!
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?
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?
Yep exactly. The last fieldset is my problem :) It won't appear when the person will be on page_4.
SOLUTION
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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();
  }
}
@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?
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??
@OmniUnlimited: No it is not what I want to do...

See my previous answer about the unique ID.
@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.
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.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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?

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
@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?
Can we do the +1 function to the anchor ID?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
@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);
}
@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.
@OmniUnlimited: where?

<a rel="ID.DYNAMIC.CHANGES.EACH.CLICK">....
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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"
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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?
yes
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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.
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!