Form input fields is cleared including submit value also

Question

I working with form validations I want to clear fields after submitting form its working fine but <input type="submit" value="submit">is also being clear but i want only input fields should be cleared. i tried with reset(); also but without adding reset().In my code fields is cleared Here what I'm doing wrong. Can anyone suggest me how I solve this problem?

Before submitting form

After submit form

var Validator = function(formObject) {
    this.form = $(formObject);
   var Elements = {
        text: {
            reg: /^[a-zA-Z]{2,20}$/,
            require : true,
            error: "Not a valid name.",
        },

        email: {
            reg: /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i,
            error: "Not a valid e-mail address.",
        },
        phone: {
            reg: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/,
            error: "Not a valid number.",
        },

        message: {
            reg: /^(?!\s*$).+/,
            error: "Message field cannot be empty.",
        },
        gender: {
          error: "gender is required",
        },
        selectOption: {
          error: "this field is required",
          required: true
      }
    };

    var handleError = function(element, message) {
        element.addClass('input-error');
        var $err_msg = element.parent('div');
        $err_msg.find('.error').remove();

        var error = $('<div class="error"></div>').text(message);
        error.appendTo($err_msg);
        console.log(element);


      element.on('keypress change', function() {
            $(error).fadeOut(1000, function() {
            console.log(element);
            element.removeClass('input-error');
            });
        });

    };

    this.validate = function() {
      var errorCount = 0;

      this.form.find("select").each(function(index, field){
         var type = $(field).data("validation");
            var validation = Elements[type];
          if($(field).val() == "") {
            errorCount++;                       
            handleError($(field), validation.error);
          }
      });

        this.form.find("input, textarea").each(function(index, field){
            var type = $(field).data("validation");
            var validation = Elements[type];
            if(validation !== undefined) {            
             var re = new RegExp(validation.reg);                
             if (validation){                   
                 if (!re.test($(field).val())){ 
                    errorCount++;                       
                    handleError($(field), validation.error);                    
                }
             }
         }
        })


    var radioList = $('input:radio');
    var radioNameList = new Array();
    var radioUniqueNameList = new Array();
    var notCompleted = 0;
    for(var i=0; i< radioList.length; i++){
      radioNameList.push(radioList[i].name);
    }
    radioUniqueNameList = jQuery.unique( radioNameList );
    console.log(radioUniqueNameList);
    for(var i=0; i< radioUniqueNameList.length; i++){
        var field = $('#' + radioUniqueNameList[i]);
        var type = field.data("validation");
           var validation = Elements[type];
        if($('input[name='+type+']:checked', '#test').val() == undefined) {
            errorCount++;   
            handleError($(field), validation.error);
        }
    }

    return errorCount == 0;
    };
};

$(function(){

    $('form#test').on('submit', function (e) {
      var NoErrors =  new Validator(this).validate();
     if(NoErrors == true) {
         $.ajax({
             url: this.action,
             type: this.method,
             data: $(this).serialize(),
             success: function() {
                 // AJAX request finished, handle the results and error msg
                $('.success_msg').fadeIn().delay(3000).fadeOut();         
                $('input , textarea').val('').removeClass('error');

             }
         });

     }
        return false;
    })

Answer 1

Edit: Judging by your edited question, providing visuals, and looking at your code, you could have targeted your button(s) by mistake. In your code, you are resetting every input element. Some CSS frameworks use the <input> element with a certain type, and or, class to create the button.

---

An easy way to clear input fields with jQuery is simply to set the value to an empty string. Examples:

Reset, targeting id

$("input#someField").val("");

Reset, targeting name

$("input[name=someName]").val("");

Reset, targeting class

$(".someClass").val("");

By targeting specific elements, you make sure that what you wish to be reset, becomes reset, and nothing else.

Examples with checkboxes:

Resetting checkbox, targeting id

$("#idOfCheckbox").attr('checked', false);

Resetting checkbox, targeting name

$("checkbox[name=nameOfCheckbox]").attr('checked', false);

Resetting checkbox, targeting class

$(".classOfCheckbox").attr('checked', false);

The same logic follows through with most elements.

Answer 2

Try something like this based on your form input elements:

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

Credit & References : Clearing my form inputs after submission

Answer 3

You can put a class on input submit and then use

  $("input:not(.uniqueClass) , textArea")