0

我还在学习 PHP，所以请耐心等待。我正在尝试创建一个包含 2 个 DIV 的注册表单。在第一个 div（个人信息）上单击提交后，它会滑开，而第二个 div（计费信息）会使用 jQuery 向上滑动。

我的问题是......我需要一些帮助来确定如何确定提交函数来自第一个 div 还是第二个。如果它是第一个 div，则发生幻灯片。如果是第二个 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！

更新：

下面列出的答案

4

3 回答 3

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>
于 2012-05-02T23:06:50.177 回答
1

在账单信息的底部有一个调用 jQuery 函数的下一步按钮和提交按钮。前任：

function(slide){
  $('#first_step').slideUp();
  $('#second_step').slideDown();
}
于 2012-05-02T22:31:20.207 回答
0

这是我的问题的答案。我在 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>
于 2012-05-31T17:09:36.420 回答