Отправить форму, обнулить поля и вывести сообщение

130

25 декабря 2019, 08:10

Есть форма, но после отправки поля не очищаются, перепробовал кучу вариантов, памагити... )

var ajaxForm = function() { 
  $("#submit").click(function(e) { 
    e.stopPropagation(); 
    $("#submit").submit(function() { 
      $.ajax({ 
        type: "post", 
        url: "mail.php", 
        data: $("#submit").serialize(), 
        success: function(reset) { 
          if (reset) { 
            $('#form').html('Your form is submited, Thank You !'); 
            $('#form')[0].reset(); 
          } else { 
            $('#form').html('Your form is not submited'); 
          } 
        } 
      }); 
    }); 
  }); 
 
}; 
 
 
 
ajaxForm();

 .form {  
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    max-width: 700px; 
    margin: auto; 
    padding: 20px 20px 10px; 
    border-radius: 5px; 
    background: -o-linear-gradient(315deg,#24b5b0 0%,#7db9e8 100%); 
    background: linear-gradient(135deg,#24b5b0 0%,#7db9e8 100%); 
     
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form class="form" method="POST" id="form" enctype="multipart/form-data" action="mail.php"> 
  <label for="names">Наименование организации: 
                  <input type="text" name="user_name" id="names" placeholder="Введите наим. организации"> 
                </label> 
  <label for="address">Aдрес организации: 
                  <input type="text" name="user_address" id="address" placeholder="Введите адрес"> 
                </label> 
  <label for="email">Email*: 
                  <input type="email" name="user_email" id="email" placeholder="Введите email" required> 
                </label> 
  <label for="phone">Телефон*: 
                  <input type="phone" name="user_phone" id="phone" placeholder="Введите телефон" required> 
                </label> 
  <label for="file">Прикрепить файл: 
                  <input class="file" type="file" multiple="multiple" name="upload" id="file"> 
                </label> 
  <label for="massage">Ввести сообщение: 
                  <textarea class="massage" name="user_massage" placeholder="Cообщение" id="massage"></textarea> 
                </label> 
  <input class="submit" type="submit" name="submit" id="submit" value="Отправить">

Answer 1

.reset()

var ajaxForm = function() { 
  $("#submit").click(function(e) { 
    // ajax goes here 
    // success: function goes here 
    $('#form').trigger("reset"); 
     
    $('#some-msg-wrapper').css({ 
      'display': 'flex', 
      'justify-content': 'center', 
      'align-items': 'center' 
    }).show(); 
     
    // ajax end 
    return false; 
  }); 
   
  $('#some-msg-wrapper #close').click(function () { 
    $('#some-msg-wrapper').hide(); 
  }); 
 
}; 
ajaxForm();

.form {  
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    max-width: 700px; 
    margin: auto; 
    padding: 20px 20px 10px; 
    border-radius: 5px; 
    background: -o-linear-gradient(315deg,#24b5b0 0%,#7db9e8 100%); 
    background: linear-gradient(135deg,#24b5b0 0%,#7db9e8 100%); 
} 
#some-msg-wrapper{ 
display:none; 
position:fixed; 
width:50%; 
height:50%; 
background-color:rgba(0,0,0,0.5); 
} 
#some-msg-wrapper #close{ 
  position:absolute; 
  top: 0; 
  right: 0; 
  padding: 5px; 
  background-color: #fff; 
  cursor: pointer; 
} 
#some-msg{ 
  background-color: #fff; 
  width:100%; 
  text-align: center; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form class="form" method="POST" id="form" enctype="multipart/form-data" action="mail.php"> 
  <label for="names">Наименование организации: 
                  <input type="text" name="user_name" id="names" placeholder="Введите наим. организации"> 
                </label> 
  <label for="address">Aдрес организации: 
                  <input type="text" name="user_address" id="address" placeholder="Введите адрес"> 
                </label> 
  <label for="email">Email*: 
                  <input type="email" name="user_email" id="email" placeholder="Введите email" required> 
                </label> 
  <label for="phone">Телефон*: 
                  <input type="phone" name="user_phone" id="phone" placeholder="Введите телефон" required> 
                </label> 
  <label for="file">Прикрепить файл: 
                  <input class="file" type="file" multiple="multiple" name="upload" id="file"> 
                </label> 
  <label for="massage">Ввести сообщение: 
                  <textarea class="massage" name="user_massage" placeholder="Cообщение" id="massage"></textarea> 
                </label> 
  <input class="submit" type="submit" name="submit" id="submit" value="Отправить"> 
   
  <div id="some-msg-wrapper"> 
    <div id="close">X</div> 
    <div id="some-msg"> 
      <p>Some message here</p> 
    </div> 
  </div>

З.Ы. делать так $("#submit").submit(function() в теле $("#submit").click(function(e) нет необходимости, т.к. кнопка имеет type="submit"