Question

请使用此代码向我指出正确的方向。

当我的表单被提交时，会显示一条消息，但提交按钮仍然存在。

我想在表单成功提交并显示成功消息后删除/隐藏提交按钮。

我已经四处寻找堆栈溢出的答案，但到目前为止我所尝试的一切都没有用。

我确定我需要添加这样的内容：

$('#sky-form button[type="submit"]').hide();

但是我想也许代码中已经存在阻止这种情况发生的事情。

以下是我的表单中的提交和消息部分：

    <button type="submit" button class="border-button">NEXT</button>
    <div class="message">
    <i class="fa fa-check"></i>
    <p>Thanks for your order!<br>We'll contact you very soon.</p>
    </form>

这是ajax：

submitHandler: function(form)
{
$(form).ajaxSubmit(
{
beforeSend: function()
{
$('#sky-form button[type="submit"]').addClass('button-uploading').attr('disabled', true);},
uploadProgress: function(event, position, total, percentComplete)
{
$("#sky-form .progress").text(percentComplete + '%');
},
success: function()
{
$("#sky-form").addClass('submited');
$('#sky-form button[type="submit"]').removeClass('button-uploading').attr('disabled', false);
}
});
},

非常感谢任何可以提供帮助的人。

完整代码：

<form action="demo-order-process.php" method="post" enctype="multipart/form-data" id="sky-form" class="sky-form">

            <fieldset>                  
                <div class="row">

                    <div class="col-md-4" align="left">
                        <label class="input">
                            <input type="text" name="home_address" placeholder="Home Address">
                            <b class="tooltip tooltip-bottom-left">Enter your home address</b>
                        </label>
                    </div>

                    <div class="col-md-4" align="left">
                        <label class="input">
                            <input type="text" name="biz_address" placeholder="Biz Address">
                            <b class="tooltip tooltip-bottom-left">Enter your biz address</b>
                        </label>
                    </div>

                </div><!-- END OF ROW DIV -->

            </fieldset>


 <!-- FORM ONE DATA   -->                      
 <input type="hidden" name="name"
 value="<?php echo $_POST['name']; ?>">

 <input type="hidden" name="email"
 value="<?php echo $_POST['email']; ?>">
 <!-- END OF FORM TWO DATA --> 


 <!-- FORM TWO DATA   -->                      
 <input type="hidden" name="mobile"
 value="<?php echo $_POST['mobile']; ?>">

 <input type="hidden" name="home"
 value="<?php echo $_POST['home']; ?>">
 <!-- END OF FORM TWO DATA --> 


            <div class="row">   
            <div class="col-md-4" align="left">
                <button type="submit" button class="border-button">NEXT</button>
            </div>  
            </div><!-- END OF ROW DIV -->

            <div class="message">
                <i class="fa fa-check"></i>
                <p>Thanks for your order!<br>We'll contact you very soon.</p>
            </div>
            </form>

  </div>
  <!-- START OF JS VALIDATION -->
  <script type="text/javascript">
        $(function()
        {

            $("#sky-form").validate(
            {                   

                rules:
                {
                    home_address:
                    {
                        required: true
                    },
                    biz_address:
                    {
                        required: true

                },


                messages:
                {
                    home_address:
                    {
                        required: 'Please enter your home address'
                    },
                    biz_address:
                    {
                        required: 'Please enter your business address'
                    },

                },

                // Ajax form submition
                submitHandler: function(form)
                {
                    $(form).ajaxSubmit(
                    {
                        beforeSend: function()
                        {
                            $('#sky-form button[type="submit"]').addClass('button-uploading').attr('disabled', true);
                        },
                    uploadProgress: function(event, position, total, percentComplete)
                    {
                        $("#sky-form .progress").text(percentComplete + '%');
                    },
                        success: function()
                        {
                            $("#sky-form").addClass('submited');
                            $('#sky-form button[type="submit"]').removeClass('button-uploading').attr('disabled', false);
                        }
                    });
                },  


                errorPlacement: function(error, element)
                {
                    error.insertAfter(element.parent());
                }
            });
        });         
    </script>

 <!-- END OF JS VALIDATION -->

JQuery Librarys： `

    <!-- fort forms -->
    <script src="../form/jquery.min.js"></script>
    <script src="../form/jquery-ui.min.js"></script>
    <script src="../form/jquery.form.min.js"></script>
    <script src="../form/jquery.validate.min.js"></script>  

    <!-- for page finctions -->
    <!-- PROBLEM FILE = <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>-->


    <script type="text/javascript" src="../js/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/jquery.mb.YTPlayer.min.js"></script>
    <script type="text/javascript" src="../js/jquery.flexslider-min.js"></script>
    <script type="text/javascript" src="../js/perfect-scrollbar.js"></script>

    <script type="text/javascript" src="../js/plugins.js"></script>
    <script type="text/javascript" src="../js/main.js"></script>`

Answer 1

我刚试过这段代码，似乎正在运作。如果它不起作用，请检查您在控制台中获得的错误。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script> 

<form action="demo-order-process.php" method="post" enctype="multipart/form-data" id="sky-form" class="sky-form">

  <fieldset>                  
  <div class="row">

  <div class="col-md-4" align="left">
  <label class="input">
      <input type="text" name="home_address" placeholder="Home Address">
      <b class="tooltip tooltip-bottom-left">Enter your home address</b>
  </label>
  </div>

  <div class="col-md-4" align="left">
  <label class="input">
      <input type="text" name="biz_address" placeholder="Biz Address">
      <b class="tooltip tooltip-bottom-left">Enter your biz address</b>
  </label>
  </div>

  </div><!-- END OF ROW DIV -->

  </fieldset>


  <!-- FORM ONE DATA   -->                      
  <input type="hidden" name="name" value="<?php echo $_POST['name']; ?>">

  <input type="hidden" name="email" value="<?php echo $_POST['email']; ?>">
  <!-- END OF FORM TWO DATA --> 


  <!-- FORM TWO DATA   -->                      
  <input type="hidden" name="mobile"  value="<?php echo $_POST['mobile']; ?>">

  <input type="hidden" name="home" value="<?php echo $_POST['home']; ?>">
  <!-- END OF FORM TWO DATA --> 


  <div class="row">   
  <div class="col-md-4" align="left">
  <button type="submit" button class="border-button">NEXT</button>
  </div>  
  </div><!-- END OF ROW DIV -->

  <div class="message">
  <i class="fa fa-check"></i>
  <p>Thanks for your order!<br>We'll contact you very soon.</p>
  </div>
</form>

<!-- START OF JS VALIDATION -->
<script type="text/javascript">
$(function()
{
  $("#sky-form").validate({ 
      rules:
      {
    home_address:
    {
    required: true
    },
    biz_address:
    {
    required: true
    }
      },
      messages:
      {
      home_address:
      {
      required: 'Please enter your home address'
      },
      biz_address:
      {
      required: 'Please enter your business address'
      },      
      },  
      // Ajax form submition
      submitHandler: function(form)  {
      $(form).ajaxSubmit(
      {
        beforeSend: function()
        {
          $('#sky-form button[type="submit"]').addClass('button-uploading').attr('disabled', true);
        },
        uploadProgress: function(event, position, total, percentComplete)
        {
          $("#sky-form .progress").text(percentComplete + '%');
        },
        success: function()
        {
          $("#sky-form").addClass('submited');
          $('#sky-form button[type="submit"]').removeClass('button-uploading').attr('disabled', false);
          $('#sky-form button[type="submit"]').hide();
        }
      });
      },
      errorPlacement: function(error, element)
      {
    error.insertAfter(element.parent());
      }
  });
});         
</script>
<!-- END OF JS VALIDATION -->

隐藏成功消息上的提交按钮

1 个答案: