繁体   English   中英

在表单验证并由ajax提交后,如何禁用或隐藏“提交”按钮?

[英]How to disable or hide submit button after form validate and submited by ajax?

需要一个在验证后disablehide提交”按钮的脚本以及ajax提交的100%表单。

当前代码:

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

但是什么也没发生! 并且success发送后未disabled按钮。 甚至更多...在100% success发送后以及通过php脚本处理后,需要submit按钮隐藏(不在错误或其他情况下)...对不起,我的英语不好,非常感谢所有人。 让力量与您同在!

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

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添加到按钮。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM