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

时间:2012-03-14 01:11:43

标签: php mysql forms 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不是一个准备好的语句,并且容易被注入,但这将在以后完成):< / p>

 <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'变量中添加什么使它适用于我的表格。

7 个答案:

答案 0 :(得分:4)

实际上要提交表单,input 类型需要submit,而不是button

使用button标记也可以。

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

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

根据规范,action属性也是 required ,但即使没有它,大多数浏览器都会将操作URL视为当前页面。

修改:如果您想在不重新加载页面的情况下提交表单数据, 可以使用ajax,也可以将整个表单放在{{1}下}。 (请用ajax代替)。

否则点击iframe将无法真正做任何事情。

用户数据是表单中的实际数据,您可以使用以下方式捕获它:

input[type=button]

答案 1 :(得分:1)

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

<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

答案 2 :(得分:1)

有很多方法:

如果不想刷新页面,请使用下面的内容:

 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/

答案 3 :(得分:0)

你基本上回答了自己的问题。您需要将操作放在指向处理表单的脚本的表单中。从那开始,如果您决定稍后使用AJAX,您可以随时修改代码来执行此操作。

答案 4 :(得分:0)

你还需要一个动作。如果PHP在同一页面上,您可以使用以下内容:

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

答案 5 :(得分:0)

之前的三个答案需要结合起来给出一个答案,因为您可以从可行的HTML表单,操作和提交中遗漏两件事:

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

答案 6 :(得分:0)

您可以使用和一些JavaScript代码来提交表单

只需执行以下步骤:

1。在输入代码中添加事件监听器onclick =“ functionName('buttonId','formName')”

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

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

或者如果您想以PHP POST方法访问它...请按照以下步骤操作

1。在输入代码中添加事件监听器onclick =“ functionName('buttonId','formName')”

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

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

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

因此,它可以通过POST方法接收。

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