HTML Form Reset from Client Side

Question

i am trying to reset my form after submit. but my form is based on external api. i added more field and my jquery code rewrite these field value in the textarea. in my form there are two textarea, one is hidden. how do i reset the extra field when form is submitted successfully?

here is my code:

HTML

<form name='contact-form-form'>

  <div class='contactform-field-container'>
    <div class='contactform-field contactform-field-name'>
      <label class='contactform-field-label' for='ContactForm1_contact-form-name'>Name <span class='contactform-required-label'>*</span></label>
      <input class='contact-form-name contactform-field-medium contact-style' id='ContactForm1_contact-form-name' name='name' placeholder='John Deo' size='30' type='text' value=''/>
    </div>

    <div class='contactform-field contactform-field-email'>
      <label class='contactform-field-label' for='ContactForm1_contact-form-email'>Email <span class='contactform-required-label'>*</span></label>
      <input class='contact-form-email contactform-field-medium contact-style' id='ContactForm1_contact-form-email' name='email' placeholder='example@mail.com' size='30' type='text' value=''/>
    </div>

    <div class='contactform-field contactform-field-text'>
      <label class='contactform-field-label' for='contactform-175-field_4'>Subject <span class='contactform-required-label'>*</span></label>
      <input class='contactform-field-medium contact-style' id='contactform-175-field_4' name='subject' placeholder='Main Subject Text' required='' size='30' type='text'/>
    </div>

    <div class='contactform-field contactform-field-text'>
      <label class='contactform-field-label' for='contactform-175-field_3'>Website</label>
      <input class='contactform-field-medium contact-style' id='contactform-175-field_3' name='url' placeholder='https://' required='' type='text'/>
    </div>

    <div class='contactform-field contactform-field-textarea full-field'>
      <label class='contactform-field-label' for='ContactForm1_contact-form-email-message'>Message <span class='contactform-required-label'>*</span></label>
      <textarea class='customform-message contact-style contactform-field-medium' name='customer service' placeholder='Message Text' required='' spellcheck='false'/>
      <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5' spellcheck='false'/>
    </div>
  </div>

  <div class='contactform-submit-container'>
    <input class='contact-form-button contact-form-button-submit contactform-submit' id='ContactForm1_contact-form-submit' type='button' value='Send Now'/>
  </div>

  <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'/>
  <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'/>

</form>

jquery

$(function () {
    var aggregateInput = function () {
        var value = ('Website Url: ') + jQuery('input[name="url"]').val() + ' \n  \n' +
            ('Subject: ') + jQuery('input[name="subject"] \n').val() + ' \n  \n' +
            ('Brief Message: ') + jQuery('textarea[name="customer service"] \n  \n').val().replace(/\n/g, '<br/>');
        jQuery('textarea[name="email-message"]').val(value);
    }
    jQuery('.contact-style').on('keyup', aggregateInput);
});
$(document).ready(function () {
    $('.contact-form-button-submit').attr('disabled', true);
    $('.customform-message').keyup(function () {
        if ($(this).val().length != 0) {
            $('.contact-form-button-submit').attr('disabled', false);
        } else {
            $('.contact-form-button-submit').attr('disabled', true);
        }
    })
});

check the live demo

Answer 1

You can try following code:

HTML:

<form name='contact-form-form'>

  <div class='contactform-field-container'>
    <div class='contactform-field contactform-field-name'>
      <label class='contactform-field-label' for='ContactForm1_contact-form-name'>Name <span class='contactform-required-label'>*</span></label>
      <input class='contact-form-name contactform-field-medium contact-style' id='ContactForm1_contact-form-name' name='name' placeholder='John Deo' size='30' type='text' value=''/>
    </div>

    <div class='contactform-field contactform-field-email'>
      <label class='contactform-field-label' for='ContactForm1_contact-form-email'>Email <span class='contactform-required-label'>*</span></label>
      <input class='contact-form-email contactform-field-medium contact-style' id='ContactForm1_contact-form-email' name='email' placeholder='example@mail.com' size='30' type='text' value=''/>
    </div>

    <div class='contactform-field contactform-field-text'>
      <label class='contactform-field-label' for='contactform-175-field_4'>Subject <span class='contactform-required-label'>*</span></label>
      <input class='contactform-field-medium contact-style' id='contactform-175-field_4' name='subject' placeholder='Main Subject Text' required='' size='30' type='text'/>
    </div>

    <div class='contactform-field contactform-field-text'>
      <label class='contactform-field-label' for='contactform-175-field_3'>Website</label>
      <input class='contactform-field-medium contact-style' id='contactform-175-field_3' name='url' placeholder='https://' required='' type='text'/>
    </div>

    <div class='contactform-field contactform-field-textarea full-field'>
      <label class='contactform-field-label' for='ContactForm1_contact-form-email-message'>Message <span class='contactform-required-label'>*</span></label>
      <textarea class='customform-message contact-style contactform-field-medium' name='customer service' placeholder='Message Text' required='' spellcheck='false'></textarea>
      <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5' spellcheck='false'></textarea>
    </div>
  </div>

  <div class='contactform-submit-container'>
    <input class='contact-form-button contact-form-button-submit contactform-submit' id='ContactForm1_contact-form-submit' type='submit' value='Send Now'/>
  </div>

  <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'/>
  <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'/>

</form>

JQuery:

$(function () {
    var aggregateInput = function () {
        var value = ('Website Url: ') + jQuery('input[name="url"]').val() + ' 
  
' +
            ('Subject: ') + jQuery('input[name="subject"] 
').val() + ' 
  
' +
            ('Brief Message: ') + jQuery('textarea[name="customer service"] 
  
').val().replace(/
/g, '<br/>');
        jQuery('textarea[name="email-message"]').val(value);
    }
    jQuery('.contact-style').on('keyup', aggregateInput);
});
$(document).ready(function () {
    $('.contact-form-button-submit').attr('disabled', true);
    $('.customform-message').keyup(function () {
        if ($(this).val().length != 0) {
            $('.contact-form-button-submit').attr('disabled', false);
        } else {
            $('.contact-form-button-submit').attr('disabled', true);
        }
    })
    //To reset form
    $(document).on("submit","form",function(e){
        $(this).trigger("reset");
    })
});