$ _POST не читает значения переменных из .post

Question

Вот мой javascript код:

function submitForm() { 
 
    var name = document.getElementsByName('name').value 
 
     ,email = document.getElementsByName('email').value 
 
     ,subject = document.getElementsByName('subject').value 
 
     ,body = document.getElementsByName('body').value; 
 
    
 
    $.post('php/sendForm.php', {name: name,email: email,subject: subject,body: body}); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="form-group inline-block" method="post" action="php/sendForm.php" > 
 
    <input type="text" class="form-control" name="name" placeholder="Name"></div> 
 
    <div class="form-group inline-block"> 
 
    <input type="email" class="form-control" name="email" aria-describedby="emailHelp" placeholder="Enter email"> 
 
    <small id="emailHelp" class="form-text text-muted">Send me an email!</small> 
 
    <input type="text" class="form-control" name="subject" aria-describedby="emailHelp" placeholder="Subject"> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label for="exampleTextarea">Message</label> 
 
    <textarea class="form-control" name="body" rows="3"> 
 
    </textarea> 
 
    </div> 
 
    <button onclick="submitForm()" type="submit" class="btn btn-primary">Submit           </button> 
 
</form>

Все это предназначено для чтения php/sendForm.php. Однако, я не могу читать данные имени, электронной почты, темы и тела в файле php. Вот php код:

$name = $_POST['name']; 
$email = $_POST['email']; 
$subject = $_POST['subject']; 
$body = $_POST['body']; 
// The message 
$message .= $email. $name. $body ; 

Answer 1

Проблема, скорее всего, что вы не используете JavaScript правильно в вашей SubmitForm функции -

getElementsByName возвращает массив типа коллекцию элементов - так вы необходимо указать, какой из них вы выбираете. Обратите внимание, что я добавил [0] к каждому из названных элементов.

function submitForm() { 
    var name = document.getElementsByName('name')[0].value 
     ,email = document.getElementsByName('email')[0].value 
     ,subject = document.getElementsByName('subject')[0].value 
     ,body = document.getElementsByName('body')[0].value; 

    $.post('php/sendForm.php', {name: name,email: email,subject: subject,body: body}); 
} 

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

Один просто способ предотвратить двойное представление, чтобы удалить кнопку из внутри формы и он имеет тип = «кнопка» атрибут:

<button onclick="submitForm()" type="button" class="btn btn-primary">Submit</button> 

, и я бы так далеко, чтобы объединить onlclick обработчик события и ajax и удалите inline js (обратите внимание, что я дал форму имя «myForm» и использую метод serialize() для сбора всех данных relvant из формы без особого значения каждого входа: -

//html 
    <button id="submitFormButton" type="button" class="btn btn-primary">Submit</button> 

//js 
$('#submitFormButton').click(function(){ 
    var formData = $('[name=myForm]').serialize(); 
    var URL = 'php/sendForm.php'; 
     $.post(URL, formData,function(data) { 
     //function to perfrom on the returned data 
     }); 
}); 

Answer 2

Вы не назовете preventDefault на мероприятии. Это означает, что форма отправлена ​​(с использованием GET и к своему собственному URL, поскольку они являются значением по умолчанию)

Try:

<button onClick="submitForm(); return false;">