onsubmit not executing JavaScript function

Question

I am trying to call a function that isn't being recognised. I have a PHP block of code that adds the form to the HTML when the user is logged in:

<?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");
}
?>

I put my JavaScript below that HTML. According to W3Schools, the script has nothing to do with how it's executed. Additionally, I've tried countless times to execute the script when the script was on top, with no result either.

Also, I previously had the code in a separate script, but I've taken it out to see if that's the issue.

Here's the script with an example of the generated 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>

Whenever I execute the code, it simply says in the console:

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

What's going wrong?

It is likely an issue dealing with scope, i.e. using `const nbpost = function` vs `function nbpost`. There is a great [SO Answer](https://stackoverflow.com/a/33040926/5517065) explaining the scope issues, but I would try declaring your function as `function nbpost(element,name){}` and see what happens. — mtr.web, Mar 02 '18 at 18:15
I had previously tried function nbpost, so unfortunately that can't be the issue — RWN, Mar 02 '18 at 18:16

score 6 · Accepted Answer · answered Mar 02 '18 at 18:34

6

Change the name of the function nbpost so it does not match the textarea id='nbpost'

CodePen

answered Mar 02 '18 at 18:34

jmbmage

2,487
3
27
44

Never would have thought of that. Lifesaver. Thank you – RWN Mar 02 '18 at 18:36

score 1 · Answer 2 · answered Mar 02 '18 at 18:37

I would try and separate your content a little better, it can make it less confusing. Give this a try with jQuery enabled.

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

This needs to go at the bottom of your document. You can also put the JavaScript in a separate file and call it by filename of course.

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

see if this works for you.

Aha thanks. That's something I'm normally terrible with, keeping things neat. Another solution which I was completely blind to worked for me, just renaming the function. Thank you anyway, I ought to keep my code clean — RWN, Mar 02 '18 at 18:38
No worries, glad you found an answer that worked for you. I typically don't use inline JavaScript so I didn't even notice that the ID was the same as the function name. Glad it works now — Justin Duncan, Mar 06 '18 at 17:03

score 0 · Answer 3 · answered Mar 02 '18 at 18:16

0

You should declare your submit event as an entire function

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

answered Mar 02 '18 at 18:16

Stéphane Ammar

1,454
10
17

...and call it as well – Musa Mar 02 '18 at 18:30
Whole new issue now: returns a syntax error: `unexpected token (` – RWN Mar 02 '18 at 18:32

onsubmit not executing JavaScript function

3 Answers3