php - 条件式の場合、PHPで使用する入力フィールドタイプ「submit」の現在のIDを確認するにはどうすればよいですか？

Question

私はまだPHPを学んでいるので、我慢してください。2つのDIVを含むサインアップフォームを作成しようとしています。最初のdiv（個人情報）で[送信]をクリックすると、スライドして離れ、2番目のdiv（請求情報）がjQueryを使用して上にスライドします。

私の問題は...送信関数が最初のdivから来たのか2番目のdivから来たのかを判断する方法を理解するのに助けが必要です。それが最初のdivの場合、スライドが発生します。2番目のdivの場合、フォームが送信されます。

フォーム付きのHTML

<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（助けが必要だと思う領域に「???」を入れます）

<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>

どんな助けでも大歓迎です！これには簡単な解決策があると確信していますが、私はそれを解読することができませんでした。n00b！

アップデート：

以下に記載されている回答

Answer 1

私がお勧めするのは、両方のフォームを1つのフォームに結合することです。2つの「フォーム」を2つの別々のボタンを持つdivタグで分割し、次のようにjqueryを作成します

//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


    });
});

秘訣は、フォームの通常の送信トリガーを無効にしてから、特定のクリックハンドラーを使用してそれらを直接処理することです。

htmlにこのようなものがあると、デフォルトでフォームの送信が停止します

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

Answer 2

jQuery関数を呼び出す[次へ]ボタンと、請求情報の下部にある[送信]ボタンがあります。元：

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

Answer 3

これが私の質問に対する答えです。私はRLの人の助けを借りてそれを理解しました。両方の送信入力には、それぞれ「ユーザー」と「請求」という独自の値があります。

    <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>