Question

Must be really dumb today – sorry in advance; anyhow have this unordered list

<ul>
<li><div class="openuserform" >Info</div> <div class="userform"></div></li>
<li><div class="openuserform" >Appearence</div> <div class="userform"></div></li>
<li><div class="openuserform" >Pages</div> <div class="userform"></div></li>
<li><div class="openuserform" >Services</div> <div class="userform"></div></li>
<li><div class="openuserform" >Community</div> <div class="userform"></div></li>
</ul>

which on click <div class="openuserform" > I want to load a separate form e.g.

$('.openusersform').live('click',(function(){ 
$('.userform').load('form page.php'); 
});

OK I can get the forms to load in the right div using

$(this).next('.userform').show();
$('.userform').load('form page.php');

but it’s very ugly (I think) and I can only every get the first form to process properly.

It is laid out like (ul, li etc.) this so I can have each loaded form aligned under the relevant li.

But I think there has to be a better way as I do not seem to get any if(){} statements working to process the forms i.e. if(form1){ $.ajax etc } if (form2) {more ajax}

Suggestions please – thanks.

Answer 1

I think you want to load it into the adjacent div, so, like this?

$('.openuserform').live('click', function(){
    // http://api.jquery.com/siblings/
    $(this).siblings('.userform').load('form-page.php'); 
});

This is assuming this markup:

<ul>
<li><div class="openuserform" >Info</div> <div class="userform"></div></li>
<li><div class="openuserform" >Appearence</div> <div class="userform"></div></li>
<li><div class="openuserform" >Pages</div> <div class="userform"></div></li>
<li><div class="openuserform" >Services</div> <div class="userform"></div></li>
<li><div class="openuserform" >Community</div> <div class="userform"></div></li>
</ul>