使用<；输入类型＝“；按钮“>； - Submitting a form using <input type ="button">

我有点麻烦，看不出我做错了什么。我有这个表格：

<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函数，但我不确定在变量"userData"中放入什么作为ID，在"dataToSend"变量中添加什么以使其与我的表单一起工作。

实际上，要提交表单，您的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);
        }    
    });
  });
});

有多种方法：

如果不想刷新页面，只需使用以下内容：

 var dataToSend = $('userDetails').serializeArray();

或者尝试使用以下代码与jquery一起提交表单：

$("userDetails").submit(function(){
  // do your stuff
  $.post(
    "post.php",
    // add all stuff for inserting data 
  );
});

以下链接将对您有很大帮助：

http://www.ryancoughlin.com/2008/11/04/use-jquery-to-submit-form/

在表单上添加操作并使用submit。

<form action="pass_data_here.php" method="post">
<input type="submit" value="Submit"/>

此外，为了简化调试，您可以在将字段保存到数据库之前先回显字段。这样，您就可以处理数据，而不必麻烦地转到数据库管理表。

编辑：既然你真的想要一个按钮，那么这个ajax可能是有用的

$('.submitDetails').click(function(e) {
            e.preventDefault();
              var dataString =  "";
              //this will get all the data of your form separated by &
              $("form input:text").each(function(index, element) {
                    dataString += $(this).attr("id")+"="+$(this).val()+"&";
                });
            dataString = '?' + dataString; //added the needed ?
            $.ajax({                
                url: "userDetailTest.php", 
                type: "POST",
                data: dataString,     
                cache: false,
                success: function(php_output)
                {
                 $(".overallSummary").html(php_output);
                   } 
                });
            });//end submitDetails

您基本上回答了自己的问题。你需要把操作放在指向处理表单的脚本的表单中。从这个开始，如果你决定以后使用AJAX，你可以随时修改代码来完成它。

您仍然需要一个操作。如果PHP在同一个页面上，您可以使用以下内容：

action="<?php echo $_SERVER['PHP_SELF']"

之前的三个答案需要结合起来给出一个答案，因为在一个可行的HTML表单中，实际上缺少了两件事：操作和提交：

<form action="mytarget.php" method="post"/>
....add input fields...
<input type="submit" value="Submit"/>
</form>

您可以使用<输入类型＝"；按钮">带有一些JavaScript 代码

只需遵循以下步骤：

1.添加eventlistener onclick=；functionName（'buttonId'，'formName'）"在输入标签中

2.在脚本中编写如下函数

function functionName(butVal, formVal)
{
document.getElementById(formVal).submit();
}

或者如果你想在PHP POST方法中访问它。。。按照以下步骤

1.添加eventlistener onclick=；functionName（'buttonId'，'formName'）"在输入标签中

2.在脚本中编写如下函数

function functionName(butVal, formVal)
{
document.getElementById(butVal).type="submit";
document.getElementById(formVal).submit();
}

在这里，我将输入类型按钮更改为提交。

因此，它可以在POST方法中被接收。

如果需要执行任何验证，仍然可以在更改js函数中的类型之前执行