clear form values after submission ajax

drupal 8 reset form after ajax submit
jquery reset input value to default
jquery form reset event
reset modal form jquery
jquery reset form
clear form after submit php
jquery clear textbox value after submit
clear form data

I am using the following script for validate my contact form.

//submission scripts
  $('.contactForm').submit( function(){
        //statements to validate the form   
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        var email = document.getElementById('e-mail');
        if (!filter.test(email.value)) {
            $('.email-missing').show();
        } else {$('.email-missing').hide();}
        if (document.cform.name.value == "") {
            $('.name-missing').show();
        } else {$('.name-missing').hide();} 

        if (document.cform.phone.value == "") {
            $('.phone-missing').show();
        } 
        else if(isNaN(document.cform.phone.value)){
        $('.phone-missing').show();
        }
        else {$('.phone-missing').hide();}  

        if (document.cform.message.value == "") {
            $('.message-missing').show();
        } else {$('.message-missing').hide();}  

        if ((document.cform.name.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "") || isNaN(document.cform.phone.value)){
            return false;
        } 

        if ((document.cform.name.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {
            //hide the form
            //$('.contactForm').hide();

            //show the loading bar
            $('.loader').append($('.bar'));
            $('.bar').css({display:'block'});

        /*document.cform.name.value = '';
        document.cform.e-mail.value = '';
        document.cform.phone.value = '';
        document.cform.message.value = '';*/

            //send the ajax request
            $.post('mail.php',{name:$('#name').val(),
                              email:$('#e-mail').val(),
                              phone:$('#phone').val(),
                              message:$('#message').val()},

            //return the data
            function(data){

              //hide the graphic
              $('.bar').css({display:'none'});
              $('.loader').append(data);

            });

            //waits 2000, then closes the form and fades out
            //setTimeout('$("#backgroundPopup").fadeOut("slow"); $("#contactForm").slideUp("slow")', 2000);

            //stay on the page
            return false;


        } 
  });

This is my form

<form action="mail.php" class="contactForm" id="cform" name="cform" method="post">
  <input id="name" type="text" value="" name="name" />
  <br />
  <span class="name-missing">Please enter your name</span>
  <input id="e-mail" type="text" value="" name="email" />
  <br />
  <span class="email-missing">Please enter a valid e-mail</span>
  <input id="phone" type="text" value="" name="phone" />
  <br />
  <span class="phone-missing">Please enter a valid phone number</span>
  <textarea id="message" rows="" cols="" name="message"></textarea>
  <br />
  <span class="message-missing">Please enter message</span>
  <input class="submit" type="submit" name="submit" value="Submit Form" />
</form>

I need to clear the form field values after submitting successfully. How can i do this?


$("#cform")[0].reset();

or in plain javascript:

document.getElementById("cform").reset();

jQuery Reset Form Fields, According to Mozilla's dev center any control holding the name or id "reset" will mask the form. reset() function. I had a reset button on the form also and it's name was "reset". Changing the name of the button to "clear" solved the problem. Form fields should be cleared after submission. Form source code: <?php namespace Drupal\mymodule\Form; use Drupal\Core\Entity\ContentEntityForm; use Drupal\Core\Form\FormStateInterface; /** * Form controller for the add/edit entity forms.


You can do this inside your $.post calls success callback like this

$.post('mail.php',{name:$('#name').val(),
                              email:$('#e-mail').val(),
                              phone:$('#phone').val(),
                              message:$('#message').val()},

            //return the data
            function(data){

              //hide the graphic
              $('.bar').css({display:'none'});
              $('.loader').append(data);

              //clear fields
              $('input[type="text"],textarea').val('');

            });

How To Clear AJAX Form After Submit, Reset or clear the form data when form is submitted by AJAX using jQuery. When a form is submitted through submit button click the form data is subsequently cleared or reset . But when we submit a form by AJAX then we have to clear the form data by picking every element and setting the value as blank. There are no form values after a successful submission in a normal situation, so I'm a little baffled about what you mean. But a standard technique, used by the core search module, for example, for form submission just to redirect to a GET url and then build the page using the arguments while building the page.


use this:

$('form.contactForm input[type="text"],texatrea, select').val('');

or if you have a reference to the form with this:

$('input[type="text"],texatrea, select', this).val('');

:input === <input> + <select>s + <textarea>s

Reset or clear the form data when form is submitted by AJAX using , Reset form values after successful ajax submission. Active. Project: Drupal core. Version: 7.x-dev. Component: ajax system. Priority: Normal. the form submitting via ajax is the hard part to clear your values just run through each input field and set the value to nothing here is how its done in jQuery: $(#containDiv input).val(''); that wont do select drop downs but you get the idea-aPeg


$('.contactForm').submit(function(){
    var that = this;

    //...more form stuff...

    $.post('mail.php',{...params...},function(data){

        //...more success stuff...

        that.reset();
    });
});

Reset form values after successful ajax submission [#1350700 , The reset() method resets the values of all elements in a form (same as clicking the Reset button). Tip: Use the submit() method to submit the form. I am not sure about the #para line executing and the text remaining on the page as the form is submitted twice: by default form submission and ajax. Therefore I expect that the html in #para would appear for a short moment and disappear.


Simply

$('#cform')[0].reset();

HTML DOM Form reset() Method, How do you clear form data after submit in Ajax? Clear JSF form input values after submitting. Ask Question Asked 8 years, 9 months ago. Active 3 years, 2 months ago. Viewed 48k times jQuery AJAX submit form. 1.


How to clear the form filled data after submitting the form in HTML , by picking every element and setting the value as blank. The button itself resets the form but, the type-1 and type-2, the reset button should be inside the form and type-3 can be either out or in. But a reset button is a far better choice. (type-1)


How to reset or clear a form using JavaScript?, My question is about clearing what I've typed into my input field. How do I clear what's typed in there before I clicked submit? Thanks, Sam. Reply. If you want to show data after deleting some data so first you will need to delete data and then get the remaining data using MySQL query, you will need to perform this all using AJAX, i have created an example here to submit form without refresh page using ajax and jQuery, i think you should try to learn more example how to use ajax to get the


How do I clear my input field after an AJAX call?, The values are the validated input, for setting the default values, the form system respects the original user input, which you can change with the method above. Clear (Reset) Form fields (data) after form submit (PostBack) in ASP.Net. When the Submit Button is clicked, first the record is inserted into the database and then using ClientScript RegisterStartupScript function, the success message is displayed in JavaScript alert message box.