Question

这是我的javascript代码：

＆＃13;

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});

}

＆＃13;

<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>

＆＃13;

所有这一切都应由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

问题可能是您没有在submitForm函数中正确使用javascript -

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函数的值发布。

防止双重提交的一种简单方法是从表单内部删除按钮，并使其具有类型=＆＃34;按钮＆＃34;属性：

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

我甚至可以将onlclick事件处理程序和ajax调用结合起来并删除内联js（注意我给表单命名为＆＃34; myForm＆＃34;并使用serialize（）方法）从表单中收集所有相关数据，而无需专门获取每个输入值： -

//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，因为它们是默认值）

尝试：

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

$ _POST没有从.post读取变量值

2 个答案: