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

Question

我对此有点麻烦，看不到我在做什么错。我有这个表格：

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

因此，当用户单击按钮时，它应该提交表单，然后让此PHP对表单进行操作（我知道sql不是准备好的语句，容易受到注入的影响，但这将在以后进行）：

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

但是，当我检查表时，没有任何信息插入数据库。请记住，这些代码都在同一文档中，因此为什么我没有在表单声明中使用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", 
        type: "POST",
        data: dataToSend,     
        cache: false,
        success: function(php_output)
        {
         $(".overallSummary").html(php_output);
           }    
    });
  });
});

这里的想法是在单击按钮时使用此ajax并调用ajax函数，但我不确定将ID作为变量放在“ userData”变量中以及将什么添加到“ dataToSend”变量中以使其工作用我的表格。

Answer 1

实际上，提交您的input 类型所需的表格submit不是button。

使用button标签也可以。

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

除非您有一些触发表单提交的JavaScript代码。

根据规范，还需要 action属性，但是即使没有该属性，大多数浏览器也会将action URL视为当前页面。

编辑：如果要提交表单数据而不重新加载页面，则必须使用ajax或将整个表单放在下方iframe。（请使用ajax代替）。

否则，单击input[type=button]不会真正做任何事情。

用户数据是表单中的实际数据，您可以使用以下方法捕获它：

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