How can I determine the current ID of the input field type “submit” for use in a PHP else if conditional expression?

Question

I am still learning PHP, so bear with me. I am trying to create a sign up form that includes 2 DIVs. Once you click submit on the first div (personal info), it slides away and the second div (billing info) slides up using jQuery.

My problem is... I need some help figuring out how to determine if the submit function came from the first div or the second. If it's the first div, the slide happens. If it's the second div, the form is submitted.

HTML with Form

<div id="container">
        <!-- #first_step -->
        <div id="first_step">
            <h1>SIGN UP FOR 17 FIT CLUB</h1>
            <form class="signup" action="post/signup" method="post">
            <input type="hidden" name="step" value="user" />
            <div class="form">
                <input type="text" name="email" id="email_signup" value="" />
                <label for="email">Your email address. We send important administration notices to this address. </label>  

                <input type="text" name="confirmemail" id="cemail_signup" value="" />
                <label for="username">Please re-type your email to verify it is correct.</label>

                <input type="text" name="firstname" id="firstname_signup" value="" />
                <label for="firstname">Your First Name. </label>

                <input type="text" name="lastname" id="lastname_signup" value="" />
                <label for="lastname">Your Last Name. </label>

                <input type="text" name="username" id="username_signup" value="" />
                <label for="username">At least 6 characters. Uppercase letters, lowercase letters and numbers only.</label>

                <input type="password" name="password" id="password_signup" value="" />
                <label for="password">At least 6 characters. Use a mix of upper and lowercase for a strong password.</label>

                <input type="password" name="cpassword" id="cpassword_signup" value="" />
                <label for="cpassword">If your passwords aren’t equal, you won’t be able to continue with signup.</label>
            </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
            <input class="submit" type="submit" name="submit_first" id="submit_first" value="submit"/>
    </form>
        </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->


        <!-- #second_step -->
        <div id="second_step">
            <h1>SIGN UP FOR 17 FIT CLUB</h1>
            <form class="signup" action="post/signup" method="post">
            <input type="hidden" name="step" value="user" />
            <div class="form">
                <input type="text" name="nameoncard" id="nameoncard_signup" value="" />
                <label for="email">Enter the name on the credit or debit card used for billing. </label>  

                <select name="cardtype" id="cardtype_signup" >
                    <option name="visa">Visa</option>
                  <option name="mastercard">Mastercard</option>
                  <option name="amex">American Express</option>
                  <option name="discover">Discover</option>
                </select>
                <label for="cardtype">What type of card are you using?</label>

                <input type="text" name="cardnumber" id="cardnumber_signup" value="" />
                <label for="cardnumber">Enter the card number.</label>
                <div id="exp_date_signup">
                <select name="exp_month" id="exp_month_signup" >
                    <option name="01">01</option>
                  <option name="02">02</option>
                  <option name="03">03</option>
                  <option name="04">04</option>
                </select>
                <select name="exp_year" id="exp_year_signup" >
                    <option name="12">12</option>
                  <option name="13">13</option>
                  <option name="14">14</option>
                  <option name="15">15</option>
                </select>
                </div>
                <label for="exp_year">Enter the expiration date on the card.</label>

                <input type="text" name="CVV2" id="cvv2_signup" value="" />
                <label for="CVV2">Enter the 3 or 4 digit CVV2 number.</label>

                <select name="country" id="country_signup">
                  <option value=" " selected>(please select a country)</option>
                  <option value="AF">Afghanistan</option>
                  <option value="ZM">...More options...</option>
                  <option value="ZW">Zimbabwe</option>
                </select>
                <label for="country">Enter the country for your billing address.</label>

                <input type="text" name="billingaddress" id="billingaddress_signup" value="" />
                <label for="bilingaddress">Enter the street name and number for the credit or debit card billing address.</label>

                <input type="text" name="billingcity" id="billingcity_signup" value="" />
                <label for="billingcity">Enter the city for you billing address.</label>

                <select name="billingstate" id="billingstate_signup">
                  <option value="AL">Alabama</option>
                  <option value="AK">...More options...</option>
                  <option value="WY">Wyoming</option>
                </select>
                <label for="billingstate">Choose the state for your billing address.</label>

                <input type="text" name="billingpostalcode" id="billingpostalcode_signup" value="" />
                <label for="cpassword">Enter the postal code for your billing address.</label>

            </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
            <input class="send submit" type="submit" name="submit_second" id="submit_second" value="submit" />
            </form>
        </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->


</div>

Javascript (I put "???" in the area I assume I need help)

<script type="text/javascript">
   $(function(){
  $('form.signup').submit(function(event){
    event.preventDefault();
    uri = $(this).attr('action');
    data = $(this).queryString();       
    $.get(uri, data, function(response){
        if(response.status == 0){
            alert(response.message);    
        }
        else if(???){
            //show next step
      $('#first_step').slideUp();
      $('#second_step').slideDown();

        }
        else {
                           // redirect to internal home page
            window.location = '<?=PROTOCOL?>//<?=DOMAIN?>/home';
        }
    }, 'json');
});
$('form.signup input').focus(function(event){
    if(!$(this).hasClass('clicked')){
        $(this)
            .val('')
            .addClass('clicked');
    }
    });
      });
   </script>

Any help would be greatly appreciated! I am sure this has a simple solution, but I haven't been able to crack it. n00b!

UPDATE:

ANSWER LISTED BELOW

Answer 1

What I would recommend is to combine both of the forms into only one form; split up the two "forms" with div tags with two separate buttons and then have jquery like this

//First Button Click Handler
$.("form div#first input.submit").click(function(){
    $("div.first").slideUp('fast',function(){
        $("div.second").slideDown('fast');
    });
});

//Second Button Click Handler
$.("form div#second input.submit").click(function(){
    var data = $('form').serialize();
    var url = "whatever";
    $.get(url,data,function(response){
    //Handle Response


    });
});

The trick is to disable the form's normal submit triggers and then handle them directly using specific click handlers

Something like this in the html will stop your form submitting by default

<form onsubmit="return false;">
    <input type="password"/>
    <input type="submit"/>
</form>

Answer 2

Have a next button that calls the jQuery function and the submit button at the bottom of the billing info. Ex:

function(slide){
  $('#first_step').slideUp();
  $('#second_step').slideDown();
}

Answer 3

Here is the answer to my question. I figured it out with the assistance of a person in RL. Both submit inputs have their own value, "user" and "billing" respectively.

    <script type="text/javascript">
     $(function(){
      $('form.signup').submit(function(event){
        event.preventDefault();
        uri = $(this).attr('action');
        data = $(this).queryString();  
    step = $(this).find('input[name=step]').val(); // <--update
        if(response.status == 0){
        alert(response.message);    
        }
      else{                                                   // <--update
      if(step == 'user'){                                     // <--update
    //show next slide                                     // <--update
    $('#first_step').slideUp();                           // <--update  
    $('#second_step').slideDown();                        // <--update
      }                                                       // <--update 
     else if(step == 'billing'){                              // <--update
    //redirect to internal home page                      // <--update
    window.location = '<?=PROTOCOL?>//<?=DOMAIN?>/home';  // <--update
    }                                                         // <--update
       }                                                     
     }, 'json');
     });
     $('form.signup input').focus(function(event){
     if(!$(this).hasClass('clicked')){
     $(this)
        .val('')
        .addClass('clicked');
     }
     });
     });
     </script>