以下是我的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 ;
您没有在事件上调用preventDefault
。这意味着表单被提交(使用GET并提交到它自己的URL,因为这些都是默认值)
试题:
<button onClick="submitForm(); return false;">
问题很可能是你没有正确使用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函数发布。
防止重复提交的一种简单方法是从表单中删除按钮,并使其具有type="button"属性:
<button onclick="submitForm()" type="button" class="btn btn-primary">Submit</button>
和我会走到目前为止,结合onlclick事件处理程序和ajax调用,并删除内联js(请注意,我给了表单的名称"myForm"和我使用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
});
});