Adding css when form submitted javascript

Question

I want to add css to a class when my form is submitted because it take long time, but nothing change! here is my form

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

the div I want to change :

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

and my script :

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

I want the button to be disabled too when the submit goes on?

It's unclear what you're trying to do. Are you trying to do an AJAX request? Or do you actually want a form submission, but want to disable the form submit button as the request is getting processed? — Daniel T., Feb 24 '17 at 12:04
And to add any style to other element, add class when submit handler and remove it on submit success. — Pankaj Kumar Singh, Feb 24 '17 at 12:06
when i submit my form it take long time to submit cause there is many input , i want to disable the button for prevent user to send it again and display css — jolo, Feb 24 '17 at 12:08

score 0 · Answer 1 · answered Feb 24 '17 at 12:09

Try this.

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

not working class not change and button still work ? – jolo Feb 24 '17 at 12:22 — jolo, Feb 24 '17 at 12:22

score 0 · Answer 2 · edited May 23 '17 at 12:16

Reason 1. you will need e.preventDefault(), otherwise submit the form will refresh the whole page Reason 2. Since reason 1, You will need to use ajax to post the form data instead of using default form event, please refer to this question for how to set it up in your submit function 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>

score 0 · Answer 3 · answered Feb 24 '17 at 13:11

Simple add a listener to your button and change the class attribute

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

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

you only need a id in you button

Oke Tega · Answer 4 · 2017-02-24T12:12:54.100

You really need to consider using Ajax request as this will definitely solve your problem. As you have it

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

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

This should work.

Adding css when form submitted javascript

4 Answers4