AJAX 양식 $ ('form') [0] .reset(); 에 값을 지우지 않고 제출하십시오. 내가 뭘 놓치고 있니?

Question

미리 도움을 주셔서 감사합니다. jQuery와 AJAX를 배우는 중이며 다음 코드에 대한 도움을 주시면 감사하겠습니다. 모든 유효성 검사 규칙이 작동하고 양식이 제출되고 페이지가 새로 고쳐지지 않습니다. 문제는 양식 값이 제출이 트리거 된 후에 기본값으로 재설정되거나 재설정되지 않는다는 것입니다. 생각?

**********

는 당신에게, 귀하의 의견 id="reset" 및/또는 name="reset"을 제공함으로써 HTML 마크 업 *************

 <div id="form"> 
      <h1 class="title">Contact Us</h1><!-- title ends --> 
      <p class="contactUs">Ask about our services and request a quote today!</p><!-- contactUs ends --> 

      <div id="success"><p>Your message was sent successfully. Thank you.</p></div> 

       <p id="required">* All fields required.</p> 

        <form name="form" id="contactMe" method="post" action="process.php" onSubmit="return validateForm()" enctype="multipart/form-data"> 
         <input class="txt" type="text" maxlength="50" size="50" required name="name" value="<?php echo $_GET['name'];?>" placeholder="Name" /> 
          <div id="nameError"><p>Your name is required.</p></div> 
         <input class="txt" type="text" maxlength="50" size="50" required name="email" value="<?php echo $_GET['email'];?>" placeholder="Email Address" /> 
          <div id="emailError"><p>A valid email address is required.</p></div> 
         <textarea name="message" rows="6" cols="40" required placeholder="Message"></textarea> 
          <div id="messageError"><p>A message is required.</p></div> 
         <input type="hidden" maxlength="80" size="50" id="complete" name="complete" placeholder="Please Keep This Field Empty" /> 
        <input type="submit" value="SUBMIT" name="submit" /> 
       <input type="reset" value="RESET" name="reset" /> 
     </form> 
     </div><!-- form ends --> 




//hide form submit success message by default. to be shown on successfull ajax submission only. 
$(document).ready(function() { 
    if ($('#success').is(':visible')){ 
     $(this).hide() 
     } 
}); 


//form validation 
function validateForm() { 

//name 
var a=document.forms["form"]["name"].value; 
if (a==null || a=="") 
    { 
     $('#nameError').fadeIn(250); 
    return false; 
    } 

//email address 
var c=document.forms["form"]["email"].value; 
var atpos=c.indexOf("@"); 
var dotpos=c.lastIndexOf("."); 
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=c.length) 
    { 
     $('#emailError').fadeIn(250); 
    return false; 
    } 

//message 
var e=document.forms["form"]["message"].value; 
if (e==null || e=="") 
    { 
     $('#messageError').fadeIn(250); 
    return false; 
    } 
}//javascript form validation ends 


//ajax submit and clear form on success 
$(function() { 


    $('form').on('submit', function (e) { 

     var myForm = validateForm();     

     if (myForm == false){ 
      e.preventDefault();//stop submission for safari if fields empty 
     } 
     else{ 

      $.ajax({ 
      type: 'post', 
      url: 'process.php', 
      data: $('form').serialize(), 
      success: function() { 
       $('#success').fadeIn(250); 
       if ($('#nameError, #emailError, #messageError').is(':visible')) { 
        $('#nameError, #emailError, #messageError').fadeOut(250); 
        } 
       $('form')[0].reset();//clear form after submit success 
      }//success ends 
      });//ajax ends 
     e.preventDefault();//prevent default page refresh 
     }//else ends 
     });//submit ends 

});//function ends 

//if reset button is clicked AND messages displayed, remove all form html messages 
$(document).ready(function() { 

    $('#form input[type="reset"]').click(function() { 
     if ($('#success, #nameError, #emailError, #messageError').is(':visible')) { 
      $('#success, #nameError, #emailError, #messageError').fadeOut(250); 
     } 
    }); 
    }); 

Answer 1

을 포함하도록 수정 됨 효과적으로 form.reset 양식을 덮어 쓰게되어 form.reset 재설정 버튼을 대상으로했기 때문입니다. 단순히 다른 ID 및 이름 값을 지정하십시오.

dom 노드의 속성 이름과 동일한 요소 name 또는 id 속성을 제공하지 마십시오.