我想从 html 表单中获取输入,并通过我的 JavaScript 将它们发送到 PHP。基本上我有一个非常简单的 html 表单,我想获取它的输入并使用 JavaScript 将它们发送到 PHP,因为我正在使用 AJAX。
问题是,每当我填写并提交表单时,它只会向我发送一封电子邮件,但没有表单中的值 - 正是我在 PHP 中已有的值。
HTML 代码
<!-- CONTACT FORM START -->
<form id="contact-form" class="fade-up" method="post" action="">
<div class="row">
<!--NAME FIELD-->
<div class="col-md-6">
<input type="text" id="cf-name" class="input__field cf-validate" name="name" placeholder="Name">
</div>
<!--EMAIL FIELD-->
<div class="col-md-6">
<input type="text" id="cf-email" class="input__field cf-validate" name="email" placeholder="Email">
</div>
<!--MESSAGE BOX-->
<div class="col-md-12">
<textarea id="cf-message" class="input__field cf-validate" rows="8" name="message" placeholder="Your Message"></textarea>
</div>
<div class="alert-container col-md-12"></div>
<!--SUBMIT BUTTON-->
<div class="col-md-12">
<button type="submit" id="cf-submit" name="subind" class="main-btn cursor-link">Send as an individual</button>
<button type="submit" id="cf-submit" name="subbiz" class="main-btn cursor-link">Send as a business</button>
</div>
</div>
</form>
<!-- CONTACT FORM END -->
Javascript 代码
$(document).ready(function() {
$('form').submit(function (event) {
event.preventDefault()
var name = document.getElementById('cf-name').value
var email = document.getElementById('cf-email').value
var msg = document.getElementById('cf-message').value
//make a post request by AJAX
$.post("mail.php",{name:name,email:email,msg:msg},function(data){
console.log(data)
})
})
})
PHP 代码
<?php
$name = $_POST['name'];echo $_POST['name'];
$email = $_POST['email'];echo $_POST['email'];
$message = $_POST['msg'];echo $_POST['msg'];
$subject = "Client Mail - Individual";
$to = "clients@growpile.com";
$headers = "From: ".$email;
$txt = "Name: ".$name." - Individual"."\n"."From: ".$email."\n\n".$message."\n\n".$ind;
mail($to, $subject, $txt, $headers);
?>
最佳答案
调整您的表单,使其没有关联的操作,这是为了防止表单在 Javascript 执行之前提交 POST 请求。
<!-- CONTACT FORM START -->
<form id="contact-form" class="fade-up">
<div class="row">
<!--NAME FIELD-->
<div class="col-md-6">
<input type="text" id="cf-name" class="input__field cf-validate" name="cf-name" placeholder="Name">
</div>
<!--EMAIL FIELD-->
<div class="col-md-6">
<input type="text" id="cf-email" class="input__field cf-validate" name="cf-email" placeholder="Email">
</div>
<!--MESSAGE BOX-->
<div class="col-md-12">
<textarea id="cf-message" class="input__field cf-validate" rows="8" name="ccf-message" placeholder="Your Message"></textarea>
</div>
<div class="alert-container col-md-12"></div>
<!--SUBMIT BUTTON-->
<div class="col-md-12">
<button type="submit" id="cf-submit" name="subind" class="main-btn cursor-link">Send as an individual</button>
<button type="submit" id="cf-submit" name="subbiz" class="main-btn cursor-link">Send as a business</button>
</div>
</div>
</form>
您可以使用 JQuery 的 val()
函数获取 HTML 字段的输入。
$(document).ready(function() {
$('form').submit(function (event) {
event.preventDefault()
var name = $("#cf-name").val();
var email = $("#cf-email").val();
var message = $("#cf-message").val();
// Make a post request by AJAX.
$.post("mail.php", {name: name, email: email, message: message}, function(data) {
console.log(data);
});
});
});
至于您的服务器端 POST 请求处理程序,您使用 filter_input 从 POST 请求中获取输入变量索引下的函数。
<?php
$name = filter_input(INPUT_POST, "name");
$email = filter_input(INPUT_POST, "email");
$message = filter_input(INPUT_POST, "message");
// Print the information from the form received.
echo "Name: " . $name . "\n";
echo "Email: " . $email . "\n";
echo "Message: " . $message;
$subject = "Client Mail - Individual";
$to = "clients@growpile.com";
$headers = "From: " . $email;
$txt = "Name: " . $name . " - Individual" . "\n" . "From: " . $email . "\n\n" . $message . "\n\n" . $ind;
mail($to, $subject, $txt, $headers);
?>
关于javascript - 通过 AJAX 将 HTML 转换为 PHP 表单输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66484182/