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的示例：

＆＃13;

<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>

＆＃13;

每当我执行代码时，它只是在控制台中说：

未捕获的TypeError：nbpost不是HTMLFormElement.onsubmit（index.php：54）中的函数

出了什么问题？

Answer 1

更改函数nbpost的名称，使其与textarea id='nbpost'

不匹配

CodePen

Answer 2

我会尝试将您的内容更好地分开，这样可以减少它的混乱。尝试启用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 3

您应该将提交事件声明为整个功能

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

onsubmit没有执行JavaScript函数

3 个答案: