表单提交javascript时添加css答案

【问题标题】：Adding css when form submitted javascript表单提交javascript时添加css
【发布时间】：2017-07-15 06:05:03
【问题描述】：

我想在我的表单提交时将css添加到一个类中，因为它需要很长时间，但没有任何改变！这是我的表格

<form method="post" class="std" enctype="multipart/form-data">
    <button type="submit" name="submitAddProduct" class="btn btn-default button button-medium">
        <span>Garder<i class="icon-chevron-right right"></i></span>
    </button>
</form>

div我要改：

<div id="circlecontainer"></div>

还有我的脚本：

$('form.std').submit(function(e){
    $( "#circlecontainer" ).removeClass('whatever').addClass('whatever');
});

我希望在提交继续时也禁用该按钮？

【问题讨论】：

不清楚您要做什么。您是否正在尝试执行 AJAX 请求？还是您确实想要提交表单，但希望在处理请求时禁用表单提交按钮？
在提交处理程序的按钮上添加禁用属性。
如果要为其他元素添加任何样式，请在提交处理程序时添加类并在提交成功时将其删除。
当我提交表单时需要很长时间才能提交因为有很多输入，我想禁用按钮以防止用户再次发送并显示 css

标签： javascript jquery html css forms

【解决方案1】：

试试这个。

<form id="myForm" method="post" class="std" enctype="multipart/form-data">
    <button type="submit" id="submitBtn" name="submitAddProduct" class="btn btn-default button button-medium">
        <span>Garder<i class="icon-chevron-right right"></i></span>
    </button>
</form>


$('#myForm').submit(function(e){
    $("#circlecontainer").addClass('whatever');
    $("#submitBtn").prop('disabled', true).html('Please Wait...');
});

【讨论】：

非工人阶级没有改变，按钮仍然有效？

【解决方案2】：

原因1.你需要e.preventDefault()，否则提交表单会刷新整个页面原因 2. 由于原因 1，您需要使用 ajax 来发布表单数据，而不是使用默认的表单事件，请参阅此问题了解如何在您的提交功能中设置它jQuery AJAX submit form

<script type="text/javascript">
    $( "#circlecontainer" ).removeClass('whatever')
    var frm = $('.std');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: //'your post url',
            data: frm.serialize(),
            success: function (data) {
               $("#circlecontainer").addClass('whatever');
            }
        });

        ev.preventDefault();
    });
</script>

【讨论】：

【解决方案3】：

简单地为您的按钮添加一个监听器并更改类属性

 var   divClassChanger=function()
     {
        var div=document.getElementByID("circlecontainer");
        div.setAttribute("class", "someotherclass");
        document.getElementById("yourBtnId").disabled = true;
      };

    document.getElementById("yourBtnId").addEventListener("click",divClassChanger);

按钮中只需要一个 id

【讨论】：

【解决方案4】：

您确实需要考虑使用Ajax request，因为这肯定会解决您的问题。如你所愿

 <form method="post" class="std" enctype="multipart/form-data">

        <button type="submit" name="submitAddProduct" class="btn btn-default button button-medium">

            <span>Garder<i class="icon-chevron-right right"></i></span>

        </button>



</form>

AJAX 请求脚本

$('form').on("submit", function(e) {
    e.preventDefault();

    var $form = $(this), url = $form.attr('action');//url could be your PHP script

    var posting = $.post(url, {$('yourinputs').val()});

    posting.done(function(data){
        $('.circlecontainer').removeClass('yourclass');
    });
});

这应该可行。

【讨论】：