代码之家  ›  专栏  ›  技术社区  ›  WebSon

如何在表单通过ajax验证并提交后禁用或隐藏提交按钮?

  •  0
  • WebSon  · 技术社区  · 6 年前

    需要一个脚本 disable hide 验证后提交按钮,100%表单提交人 ajax

    当前代码:

    <script>
        function AjaxFormRequest(result_id,formUkrposhta,url) {
            jQuery.ajax({
                url:url,
                type:"POST",
                dataType:"html",
                data:jQuery("#"+formUkrposhta).serialize(),
                beforeSend: function() {
                    $("#messegeUkrResult").html('<span class="wbsn-padding-0">Секунду пожалуйста ...</span>');
                    $("#send").prop('disabled', true); // disable button
                },
                success:function(response) {
                    $("#send").prop('disabled', false); // enable button
                    document.getElementById(result_id).innerHTML = response;
    
                },
                error: function(response) {
                    document.getElementById(result_id).innerHTML = '<p class="wbsn-font-futuranew wbsn-font-20 wbsn-text-deep-orange" style="text-sahdow:0 2px 1px #fff;">Возникла ошибка при заказе. Попробуйте еще раз.</p>';
                }
             });
    
             $(':input', '#formUkrposhta')
                .not(':button, :submit, :reset, :hidden')
                .val('')
                .removeAttr('checked')
                .removeAttr('selected');
        }
    </script>
    

    disabled success 发送。甚至更多。。。需要 submit 成功

    1 回复  |  直到 6 年前
        1
  •  1
  •   Twisty    6 年前

    您可能需要考虑以下代码:

    function AjaxFormRequest(result_id,formUkrposhta,url) {
      console.log("Ajax Form Request Triggered.");
      jQuery.ajax({
        url: url,
        type: "POST",
        dataType: "html",
        data: jQuery("#" + formUkrposhta).serialize(),
        beforeSend: function() {
          console.log("Before Send Triggered.");
          $("#messegeUkrResult").html('<span class="wbsn-padding-0">Секунду пожалуйста ...</span>');
          $("#send").prop('disabled', true); // disable button
        },
        success:function(response) {
          console.log("Success Triggered:", response);
          $("#send").prop('disabled', false).hide(); // enable button & Hide it
          $("#" + result_id).html(response);
        },
        error: function(response) {
          console.log("Error Triggered:", response);
          $("#" + result_id).html('<p class="wbsn-font-futuranew wbsn-font-20 wbsn-text-deep-orange" style="text-sahdow:0 2px 1px #fff;">Возникла ошибка при заказе. Попробуйте еще раз.</p>');
        }
      });
      $(':input', '#formUkrposhta')
        .not(':button, :submit, :reset, :hidden')
        .val('')
        .removeAttr('checked')
        .removeAttr('selected');
    }
    

    .hide() 到中的按钮 success .