javascript - 带有提交按钮的表单内的 onClick 函数会导致错误

标签 javascript php html forms

当我在 frontend.php 的表单标记内使用带有 onClick 函数的 JavaScript 按钮时,会导致错误。我需要这个简单的应用程序来完成简单的工作,但它陷入了困境。

我为您提供两个链接。首先是在表单标签(frontend.php)中,它不起作用 - 添加按钮根本不添加更多文本区域!第二个链接没有表单标签,并且它有效,您可以尝试提交,这将使您进入 welldone.php 页面。

1.LINK - There is a problem

2.LINK - No form tag, no problem

HTML 表单

<form action="http://www.balkanex.info/dev/frontend.php" method="post">
    Title: <br/><input type="text" name="title"><br/><br/>
    The question is: <br/><input type="text" name="ask"><br/><br/>
<br/>
    <input type="submit" name="submit" value="PROCEED"><br/>
</form>

FRONTEND.PHP 文件

<script>
am = 1;
function more(index) {
        am++;
        var textarea = document.createElement("textarea");
        textarea.name = "answer" + am;
        var div = document.createElement("div");
        div.innerHTML = textarea.outerHTML;
        document.getElementById("inner1").appendChild(div);
}
</script>

<?php
echo '<form action="welldone.php" method="post">';
$content = "";
$title = $_POST['title'];
$question = $_POST['ask'];

if($_POST['ask'] != "") {
    $answer = '<textarea name="answer1"></textarea>';
    $more = '<button type="button" name="more" onClick="more();">Add more</button>';
    $content .= '1) '.$question.'<br/>'.$answer.'<br/><div id="inner1"></div>'.$more.'<br/><br/>';
}
echo $content;
echo'<br/><input type="submit" value="CALCULATE"></form>';
?>

结果 WELLDONE.PHP 文件

<?php
echo 'WOW, WELL DONE';
?>

最佳答案

问题是,当你使用more时,浏览器使用 <button name="more">而不是function more 。然后,你得到

TypeError: more is not a function

此行为仅存在于表单中,这就是为什么没有表单您的代码也能正常工作的原因。

您可以通过执行以下操作之一来修复它:

  • 更改函数名称
  • 更改按钮名称
  • 编写不显眼的 JavaScript,从 <script> 添加事件处理程序元素而不是内联 onclick属性。

无论如何,您的代码完全无效并且处于怪异模式。您应该验证它并修复错误。

关于javascript - 带有提交按钮的表单内的 onClick 函数会导致错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22519698/

相关文章:

javascript - 如何访问自定义 knockout 绑定(bind)内的变量

javascript - 通过 WebRTC 数据通道实现 WebService 是否可行且合理?

php - 使用完整的密码将用户从 Keycloak 迁移到 LDAP

php - 将 $_GET 方法保存到数据库中并更改它

css - <div> 定位显示 :table-cell

javascript - 如何在 block 显示中调整图像大小? (javascript 或 react )

javascript:监听服务器

php - 如何在共享主机(子域)上部署流明框架

javascript - 在当前选项卡中从 DOM 打开页面

html - CSS/HTML : How to achieve a structure like table without using table?