Question

我想在提交表单时将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');
});

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

Answer 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...');
});

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

Answer 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按钮

Answer 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');
    });
});

这应该有用。

在表单提交javascript时添加css

4 个答案: