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

Posted 2023-02-22

【中文标题】使用 <input type ="button"> 提交表单

【英文标题】：Submitting a form using <input type ="button">

【发布时间】：2012-03-30 11:28:29

【问题描述】：

我在这方面遇到了一点麻烦，看不出我做错了什么。我有这个表格：

<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”变量中让它与我的表单一起使用。

【问题讨论】：

表单中没有操作属性

我已在我的问题中指定了这一点。

【参考方案1】：

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

【参考方案2】：

您仍然需要采取行动。如果 PHP 在同一页面上，您可以使用以下内容：

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

【参考方案3】：

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

【讨论】：

我需要使用“按钮”，因为我不想刷新页面。

那么使用 Ajax 是必需的，而不是一个选项。 （是的，iframe 仍然存在，我知道）。

谢谢，我想可能是这样。那你能告诉我如何使用ajax函数传递输入的数据吗？

【参考方案4】：

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

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

【讨论】：

感谢您的回复。但是我需要使用“按钮”..查看我的编辑。

好吧，你不是在问“为什么这个表单不提交”，而是“我如何使用 Ajax 提交它”。正如有人提到的那样 - 你需要整个表单的 ID - #userDetails 请参阅@Nathan 的回复 - 应该这样做。

【参考方案5】：

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

<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函数吗？

你可以试试我编辑的那个。请注意，我使用每个输入文本的“id”作为数据的名称。

另外，Tezzs 的回答在传递数据 json 字符串方面似乎更好

【参考方案6】：

有以下几种方式：

不想刷新页面就用下面的：

 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/

【讨论】：

兄弟，您忘记用引号将“userDetails”括起来并在代码示例中使用#。

【参考方案7】：

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

只需按照以下步骤操作：

1.在输入标签中添加事件监听器onclick="functionName('buttonId','formName')"

2.在Script中编写如下函数

function functionName(butVal, formVal)

document.getElementById(formVal).submit();

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

1.在输入标签中添加事件监听器onclick="functionName('buttonId','formName')"

2.在Script中编写如下函数

function functionName(butVal, formVal)

document.getElementById(butVal).type="submit";
document.getElementById(formVal).submit();

这里，我把输入类型按钮改成提交了。

所以，可以在POST方法中接收。

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