使用<input type =“button">提交表单

Submitting a form using lt;input type =quot;buttonquot;gt;(使用lt;input type =“buttongt;提交表单)

问题描述

我在这方面遇到了一些麻烦，无法看出我做错了什么.我有这个表格:

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

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

<input type="submit" id="submitDetails" class="submitDetails" name="submitDetails" value="Submit Your Details" />

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