2015-01-15 2 views
-2

заблаговременно за любую помощь. Я просто изучаю jQuery и AJAX и буду благодарен за помощь в следующем коде. Все правила валидации работают, форма отправляется и страница не обновляется. Проблема заключается в том, что значения формы не очищаются/не восстанавливаются до значения по умолчанию после срабатывания отправки. Мысли?

********** EDITED включить 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); 
     } 
    }); 
    }); 
+0

У вас есть элементы с 'id =" reset "или' name = "reset" '? Сколько тэгов 'form' находится на странице? –

+0

Да @KevinB У меня есть имя = "reset" в разметке. Я отредактировал свой пост и включил всю разметку формы над js. – Michael

+0

Измените его с помощью сброса на другое. –

ответ

0

Давая ввод id="reset" и/или name="reset", вам эффективно перезаписал метод формы form.reset, потому что таким образом вы сделали form.reset целевой кнопкой сброса. Просто дайте ему другое значение id и name.

Никогда не указывайте имена элементов или идентификаторы, которые равны имени свойства узла dom.

+0

Это сделало, спасибо! Проголосовал бы за это, но мой представитель в настоящее время слишком низок. – Michael

Смежные вопросы