onsubmit 不执行 JavaScript 函数

Question

我正在尝试调用无法识别的函数。我有一个 PHP 代码块，可以在用户登录时将表单添加到 HTML：

<?php
if(isset($_SESSION['user'])) {
  $usr = $_SESSION['user'];
  echo("<form onsubmit=\"nbpost('#nbpost','$usr'); return false;\">\n");
  echo("<textarea id='nbpost' placeholder='Create a post...'></textarea>\n");
  echo("<button type='submit'>SUBMIT</button>\n");
  echo("</form>\n");
}
?>

我把我的 JavaScript 放在那个 HTML 下面。根据 W3Schools 的说法，该脚本与它的执行方式无关。另外，我试过无数次在脚本置顶时执行脚本，也没有结果。

另外，我之前将代码放在单独的脚本中，但我已经把它拿出来看看是否是问题所在。

这是带有生成 HTML 示例的脚本：

<form onsubmit="nbpost('#nbpost','$usr'); return false;">
  <textarea id='nbpost' placeholder='Create a post...'></textarea>
  <button type='submit'>SUBMIT</button>
</form>

<script type="text/javascript">

const nbpost = function(element, name) {

  alert("WORKING");
  name[0] = name[0].toUpperCase();
  const msg = $(element).val;
  console.log(name, msg);

  $.ajax({
    url: "http://rmpc/php/nbpost.php",
    method: "POST",
    data: {
      name: name,
      notice: msg
    }
  });
  
};

</script>

每当我执行代码时，它只会在控制台中显示：

Uncaught TypeError: nbpost is not a function at HTMLFormElement.onsubmit (index.php:54)

怎么了？

Answer 1

我会尝试更好地分离您的内容，这样可以减少混乱。在启用 jQuery 的情况下试一试。

<?php
      if(isset($_SESSION['user'])) {
          $usr = $_SESSION['user']; ?>
          <form id="form" method="post">
          <textarea id='nbpost' placeholder='Create a post...'></textarea>
          <input type="hidden" name="user" value="<?=$usr;?>">
          <button type='submit'>SUBMIT</button>
          </form>
          <?php
      }
?>

这需要放在文档的底部。你也可以把 JavaScript 放在一个单独的文件中，当然可以通过文件名来调用它。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$("#form").on("submit", function (e) {
  e.preventDefault();
  var name = $("input[name=user]").val().toUpperCase();
  var msg = $("#nbpost").val();
  console.log(name, msg);

  $.ajax({
    url: "http://rmpc/php/nbpost.php",
    method: "POST",
    data: {
      name: name,
      notice: msg
    }
  });
});

</script>

看看这是否适合你。

Answer 2

更改函数名称nbpost，使其与textarea id='nbpost'不匹配

CodePen

Answer 3

你应该将你的提交事件声明为一个完整的函数

onsubmit=\"function(){nbpost('#nbpost','$usr'); return false;}\"