当表单提交时添加css javascript

当我的表单被提交时，我想添加css到一个类，因为它需要很长时间，但没有任何改变！这里是我的形式当表单提交时添加css javascript

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

我想按钮被禁用过当提交的推移？

来源

2017-02-24 jolo

目前尚不清楚你想要做什么。你想要做一个AJAX请求？或者你真的想要一个表单提交，但想要在请求正在处理时禁用表单提交按钮？ –

将禁用的属性添加到提交处理程序上的按钮。 –

若要将任何样式添加到其他元素，请在提交处理程序时添加类，并在提交成功时将其删除。 –

-1

你真的需要考虑使用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'); 
    }); 
});

这应该工作。

来源

2017-02-24 12:01:10

试试这个。

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

来源

2017-02-24 12:09:52

不工作的类不改变和按钮仍然工作？ – jolo

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

来源

2017-02-24 12:10:31

无法改变？ – jolo

简单添加一个侦听到您的按钮，并更改类属性

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

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

你只需要你身上的一个ID按钮

来源

2017-02-24 13:11:08

当表单提交时添加css javascript

回答

相关问题