Отправить форму с помощью JS и AJAX

Question

У меня мало проблем с JS и AJAX, я не знаю этих языков. Я знаю php, и я применил для разработчика php позиции, теперь у меня есть некоторые задачи, которые нужно сделать, и я застрял в одном. Это простая задача, форма, отправка, обработка информации, сохранение в БД и отправка. Единственная проблема заключается в том, что я должен использовать AJAX для отправки формы, я сделал небольшое исследование, и как-то я написал этот код, но он не работает.

<div> 
     <form method="POST" action="add.php" id="form"> 
      <input type="email" name="email" id="email" value="Email"> 
      <textarea name="content" id ="content">Message</textarea> 
      <input type="submit" value="Submit" id="submit"> 
     </form> 
     <a href="send.php">Send messages from database</a> 
    </div> 
    <script> 
     $(document).ready(function() { 
      // When click on button store values from form fields into variables 
      $("form").submit(function(event) { 
       event.preventDefault(); 
       var email = $("#email").val(); 
       var content = $("#content").val(); 
       // Check if fields are empty 
       if (email=="" || content="") { 
        alert("Please fill all fields"); 
       } 
       // AJAX code to submit form 
       else { 
        $.ajax ({ 
         type: "POST", 
         url: ("#form").attr('action'); 
         data: { "email": email, "content": content}, 
         cache: false, 
         success: function() { 
          alert("Data successfully forwarded to add.php"); 
         } 
        }); 
       } 
       return false; 
      }); 
     }); 
    </script> 
</body> 

В форме я могу использовать кнопку ввода типа вместо представить (так что нет необходимости в preventDefault в JS) и JS я сделать это $ («# отправить»). Нажмите (функция .....

Я думаю, что я попробовал все комбинации, и когда форма занесена она идет с невыполнением не активируется не JS ...

РЕШИТЬ: проблема была в IF Постулаты, содержание = «» вместо содержимого == "", OMG, как я упускал из виду, что ...

Answer 1

Используйте serialize() метод (описанный ниже), вместо того, чтобы вручную получать значение каждого поля вашего формы для создания объекта JSON.

$('#form').submit(function() { 
     $.ajax({ 
      data: $(this).serialize(), 
      type: $(this).attr('method'), 
      url: $(this).attr('action'), 
      success: function() { 
       alert("Data successfully forwarded to add.php"); 
      } 
     }); 
     return false; 
    }); 

Answer 2

У вас есть синтаксическая ошибка в вызове ajax.

$.ajax ({ 
    type: "POST", 
    url: ("#form").attr('action'); // This is bad JSON 
    data: { "email": email, "content": content}, 
    cache: false, 
    success: function() { 
     alert("Data successfully forwarded to add.php"); 
    } 
}); 

Замените эту строку с:

url: $("#form").attr('action'), 

Answer 3

Чтобы ответить на ваши вопросы, да вы правы, вы можете использовать input типа button и вам не требуется организовывать зависит от представления формы , Вот как бы вы написать его без формы представляющих их:

<div> 
    <form method="POST" action="add.php" id="form"> 
     <input type="email" name="email" id="email" value="Email"> 
     <textarea name="content" id ="content">Message</textarea> 
     <input type="button" value="Submit" id="submit" onclick="SendAjax();"> 
    </form> 
    <a href="send.php">Send messages from database</a> 
</div> 
<script> 
    // When click on button store values from form fields into variables 
    function SendAjax() { 
     var email = $("#email").val(); 
     var content = $("#content").val(); 
     // Check if fields are empty 
     if (email=="" || content="") { 
      alert("Please fill all fields"); 
     } 
     // AJAX code to submit form 
     else { 
      $.ajax ({ 
       type: "POST", 
       url: "type your URL here"; 
       data: { "email": email, "content": content}, 
       cache: false, 
       success: function() { 
        alert("Data successfully forwarded to add.php"); 
       } 
      }); 
     } 
    } 
</script> 

Как вы можете видеть, я предпочитаю, чтобы указать URL в AJAX вместо того, чтобы принимать его от действия формы, которые я иногда он установлен на другую URL от AJAX. Тем не менее, если вы хотите взять URL из действия формы, а затем исправить эту строку в коде, чтобы быть:

url: $("#form").attr('action'),