jquery ajax form with slide in effect of new div

[reco21]

Hi.

I'm making a form with some fields. Once the form is submitted it updates the page with a new div containing the data entered without refreshing. Im using jquery form plugin. What I'd like to achieve is the new div(.record) to .slideDown.

I guess I need to somehow specify the exact div by giving it an id or number. I'm not sure and why im here.

At the moment when i submit all of the divs(.record) are hidden with .hide, then they all slide down with .slide. Best i can understand is to hide the last div then slide down. But again.. I don't know how to specify to only slide down the last div added and not the current .record divs on the page.

Here is what i have.

$(document).ready(function() {
    $('#myForm').ajaxForm({
      beforeSubmit: function() {
       $('.record').hide();},
      target: '#showdata',
      success: function() {
        $('.record').slideDown('slow');
      }
    });
  });

my form

<form id="myForm" action="data.php" method="post">
   
      <div>
        <label>Name*:</label>
        <input type="input" name="name" maxlength="20" />
      
        <label>age*:</label>
        <input type="input" name="age" />
      
        <input type="submit" value="Submit" />
      </div>
  
  </form>

my data action page

<div id="showdata">
  <div class="record">Name:john Age:22</div>
  <div class="record">Name:mike Age:23</div>
  <div class="record">Name:jason Age:24</div>
<div>

This works well when it's the first div added and no other (.record divs) on the page. but when there is currently record divs on the page they all hide and all slide.

Any help please and thanks.

[ckchaudhary]

If all u want to do is to show(slidedown) only the last div then instead of

$('.record').slideDown('slow');

you'll have to use

$('.record:last').slideDown('slow');

[ddymacek]

I would add an id to each record div
and put a hidden field on the page containing the last id. and increment as each user is added and you can keep track of what record div you are controlling.

[reco21]

Excellent. In my case its record:first but this was my fix. Thanks, ckchaudhary.

id is a good method too. I'll be adding that in order to delete.

Anyhow, thanks very much everyone.