从客户端重置HTML表单

我试图在提交后重置我的表单。但我的形式是基于外部api。我添加了更多的字段和我的jquery代码重写这些字段值在文本区。在我的表单中有两个文本区域，一个是隐藏的。当表单成功提交时，我如何重置额外的字段?

这是我的代码:

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

查看现场演示

您可以尝试以下代码:

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() + ' 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); } }) //To reset form $(document).on("submit","form",function(e){ $(this).trigger("reset"); }) });

相关内容

最新更新

热门标签：