使用<input type =“button">提交表单 [英] Submitting a form using <input type ="button">
问题描述
我在这方面遇到了一些麻烦，无法看出我做错了什么.我有这个表格:
<form name="userDetails" id="userDetails" method="post" ><input type="text" name="firstName" id="firstName" class="firstName" placeholder="first name"/><input type="text" name="lastName" id="lastName" class="lastName" placeholder="last name"/><input type="text" name="address" id="address" class="address" placeholder="第一行地址"/><input type="text" name="postcode" id="postcode" class="postcode" placeholder="Postcode"/><input type="text" name="email" id="email" class="email" placeholder="电子邮件"/><input type="text" name="phone" id="phone" class="phone" placeholder="Phone"/><input type="button" id="submitDetails" class="submitDetails" name="submitDetails" value="提交您的详细信息"/></表单>因此，当用户单击按钮时，它应该提交表单，然后让这个 PHP 对表单进行操作(我知道 sql 不是准备好的语句，容易受到注入，但这将在稍后完成):
<?php$fName = $_POST['firstName'];$lName = $_POST['lastName'];$address = $_POST['address'];$pc = $_POST['邮政编码'];$email = $_POST['email'];$phone = $_POST['phone'];$userSQL = "INSERT INTO user (forename, surname, address, postcode, email, phone) VALUES ('$fName', '$lName', '$address', '$pc', '$email', '$phone')";$result = mysql_query($userSQL) 或 die(mysql_error());?>然而，当我检查我的表时，没有信息插入到数据库中.请记住，这段代码都在同一个文档中，因此我没有在表单声明中使用 action="file.type".这是因为我不确定 ajax 在这里是否合适.
非常感谢任何帮助，谢谢.
编辑
我能做的是使用 ajax 和 jQuery 来监听按钮点击事件:
$(document).ready(function() {$(".submitDetails").click(function(e) {e.preventDefault();var userData = $("#?").val();var dataToSend = '?=' + eNameData;$.ajax({url: "userDetailTest.php",类型:POST"，数据:数据发送，缓存:假，成功:函数(php_output){$(".overallSummary").html(php_output);}});});});这里的想法是在单击按钮时使用此 ajax 并调用 ajax 函数，但我不确定在变量userData"中将什么作为 ID 以及在dataToSend"变量中添加什么使其与我的表单一起使用.
其实要提交表单你的input type 需要submit，而不是 button.
使用 button 标签也可以.
除非您有一些触发表单提交的 javascript 代码.
根据规范，action 属性也是必需的，但即使没有它，大多数浏览器也会假设 action URL 是当前页面.
编辑:如果您想在不重新加载页面的情况下提交表单数据，您必须使用 ajax，或者将整个表单放在 iframe 下.(请改用ajax).
否则点击 input[type=button] 将不会真正执行任何操作.
用户数据是表单中的实际数据，您可以使用以下方法捕获它:
$(document).ready(function() {$(".submitDetails").click(function(e) {e.preventDefault();//请参阅 Teez 的回答，我不知道这一点.var dataToSend = $("#userDetails").serializeArray();$.ajax({url: "userDetailTest.php",类型:POST"，数据:数据发送，缓存:假，成功:函数(php_output){$(".overallSummary").html(php_output);}});});});I'm having a little trouble with this and can't see what I'm doing wrong. I have this form:
<div class="user">
<form name="userDetails" id="userDetails" method="post" >
<input type="text" name="firstName" id="firstName" class="firstName" placeholder="first name " />
<input type="text" name="lastName" id="lastName" class="lastName" placeholder="last name " />
<input type="text" name="address" id="address" class="address" placeholder="First line of Address " />
<input type="text" name="postcode" id="postcode" class="postcode" placeholder="Postcode " />
<input type="text" name="email" id="email" class="email" placeholder="E-Mail " />
<input type="text" name="phone" id="phone" class="phone" placeholder="Phone " />
<input type="button" id="submitDetails" class="submitDetails" name="submitDetails" value="Submit Your Details" />
</form>
</div>
So when the user clicks the button it should submit the form then have this PHP to act upon the form (I know that the sql isn't a prepared statement and is vulnerable to injections but this will be done later):
<div class="overallSummary">
<?php
$fName = $_POST['firstName'];
$lName = $_POST['lastName'];
$address = $_POST['address'];
$pc = $_POST['postcode'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$userSQL = "INSERT INTO user (forename, surname, address, postcode, email, phone) VALUES ('$fName', '$lName', '$address', '$pc', '$email', '$phone')";
$result = mysql_query($userSQL) or die(mysql_error());
?>
</div>
However when I check my tables, no information is inserted into the database. Bearing in mind this code is all in the same document hence why I have not used action="file.type" within the form declaration. This is because I'm unsure whether ajax is appropriate here.
Any help is much appreciated, thank you.
EDIT
What I could do is use ajax with jQuery to listen for the button click event:
$(document).ready(function() {
$(".submitDetails").click(function(e) {
e.preventDefault();
var userData = $("#?").val();
var dataToSend = '?=' + eNameData;
$.ajax({
url: "userDetailTest.php",
type: "POST",
data: dataToSend,
cache: false,
success: function(php_output)
{
$(".overallSummary").html(php_output);
}
});
});
});
The idea here is to use this ajax for when the button is clicked and call the ajax function but i'm unsure what to put as the ID in the variable 'userData' and what to add in the 'dataToSend' variable to make it work with my form.
Actually to submit the form your input type needs to be submit, not button.
Using an button tag would also work.
<input type="submit" id="submitDetails" class="submitDetails" name="submitDetails" value="Submit Your Details" />
Unless you have some javascript code thats triggering the form submit.
The action attribute is also required as per the specification, but even without it, most browsers assume the action URL to be the current page.
Edit: If you want to submit the form data without reloading the page, you have to use either ajax, or put the entire form under an iframe. (Please, do it with ajax instead).
Otherwise clicking on the input[type=button] won't really do anything.
The user data is the actual data from your form, you could capture it using:
$(document).ready(function() {
$(".submitDetails").click(function(e) {
e.preventDefault();
// See Teez answer, I wasn't aware of this.
var dataToSend = $("#userDetails").serializeArray();
$.ajax({
url: "userDetailTest.php",
type: "POST",
data: dataToSend,
cache: false,
success: function(php_output)
{
$(".overallSummary").html(php_output);
}
});
});
});
这篇关于使用<input type =“button">提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
