执行 onclick 事件时提交表单

Question

我有一个带有按钮的表单。当用户点击它时，会有一个用javascript函数编写的onclick事件。同时，我想将表单值记录到服务器上的文本文件中。这是由一段 php 代码完成的。这是我的困境：

如果类型设置为“按钮”，onclick 事件可以正常工作，但表单值不会被带到 php 代码中。如果类型设置为“提交”，则 php 代码运行良好但 onclick 事件被超越。

我的问题是：有没有简单的解决方案？谢谢。

更新：在这里感谢大家的热心帮助。到目前为止，我还没有找到解决方案。问题是一旦表单的提交功能进入，iframe 内容将不会加载。以下是关键代码。

/**** index.php:  ****/
<form id="form1" name= "form1" method="post" >
<center>
<table>
<tr>
<td><b><p id="zip_code">Enter Zip Code:</p></b></td>
<td><input id="zipcode" name="zipcode" placeholder="12345" type="text" /></td>
</tr>

</table>
</center>
<input value="Check Inventory" onclick="getwebURL()" type="button" /> 
</form>

/** the onclick event will update the iframe contents **/
<iframe id="myFrame2" src="" name="myFrame2" height="1026" width="100%"></iframe>
/** php code that will record user inputs with time stamp **/
<?php
ini_set("auto_detect_line_endings", true);
// Get the zip code they entered in the form
$zipcode = $_POST['zipcode'];
// We want the file to be a text file right?
$ex = "record.txt";
// Try to open a file named $file$ex (johndoe.txt for example)
// Because this file doesn't exist yet the server creates it
$write = fopen("$ex","a");
// Now open the file up again but this time save the email in it
$savestring = $zipcode . "," . date("c") . "," . "\n";
fwrite($write,$savestring);
// MAKE SURE you close the file!!!
fclose($write);
?>

/**** Javascript that has getwebURL() function ****/
function getwebURL()
{
     document.getElementById('myFrame2').src='http://www.example.com?zipCode='+document.getElementById('zipcode').value;
}

Update2：在阅读之后，似乎我最好的选择是将其保留为 TYPE "Button" 并在 onclick 事件中，使用 AJAX 调用 php 代码。任何人都有这样的例子，特别是如何传递参数。谢谢。

Update3：使用 AJAX 调用 php 代码并解决问题。谢谢大家的热心帮助。

Answer 1

尝试将类型设为button，然后在您的函数中添加代码打击

$('#myid').submit();

Answer 2

$('#button').click(function() {
 $('#formId').submit();
});

Answer 3

监听提交事件，而不是提交按钮上的点击事件。

$("#submitbutton").submit(function(){
  $.post("ajax/writestufftofile.php", data ...); // Send data to php script to write to file
});

类似上面的代码会监听提交事件，当它被触发时，它会向网络服务器发送一个 ajax 调用并仍然提交表单。

Answer 4

不要使用onclick 事件，而是使用表单的onsubmit 事件。

<form onsubmit="return my_js_function();">
    <!-- your form -->
</form>

在提交表单时触发onsubmit 事件。 在您的onsubmit 处理程序被执行后，该表单被提交。您的 JavaScript 代码将运行，您的表单将被发送。

通过在您的函数中返回false，您可以中止提交。如果您想提交表单，我建议返回true，以确保。

---

编辑

好的，所以你正在执行以下操作：

1. 用户输入邮政编码
2. 按钮被点击，所以你改变了 iframe 的 src
3. 表单已提交
4. 用 PHP 处理

提交表单时，需要刷新页面。 PHP 在服务器端运行，因此您需要一个新的 PHP 请求才能运行（除非您使用 AJAX，但这是另一回事）。再次加载页面时，您必须更改 iframe 的 URL。你根本不需要 JavaScript。

<form action="#" enctype="application/x-www-form-urlencoded" method="post">
    <input type="text" name="zipcode" placeholder="12345" value="<?php echo $_POST['zipcode']; ?>" />
    <input type="submit" name="submit" value="Go!" />
</form>

<?php
// Are we dealing with a POST request?
if($_SERVER['REQUEST_METHOD'] === 'POST') {
    $zip = $_POST['zipcode'];
    $file = 'record.txt';

    // There's no guarantee we can open this file
    if($handle = fopen($file, 'a')) {
        $str = $zip . ',' . date('c') . ',' . "\r\n";

        fwrite($handle, $str);
        fclose($handle);
    }

    // Looks like everything went well. It's time to display the iframe!
    $url = 'http://www.example.com?zipCode=' + $zip;
    echo '<iframe src="' . $url . '"></iframe>';
}
?>