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 explaining the scope issues, but I would try declaring your function as function nbpost(element,name){} and see what happens. — mtr.web
– mtr.web, Commented Mar 2, 2018 at 18:15
I had previously tried function nbpost, so unfortunately that can't be the issue — RWN
– RWN, Commented Mar 2, 2018 at 18:16

user3180309 · Accepted Answer · 2018-03-02 18:34:38Z

6

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

CodePen

answered Mar 2, 2018 at 18:34

user3180309

Sign up to request clarification or add additional context in comments.

1 Comment

RWN Over a year ago

Never would have thought of that. Lifesaver. Thank you

Justin Duncan · Accepted Answer · 2018-03-02 18:37:19Z

1

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.

answered Mar 2, 2018 at 18:37

Justin Duncan

1351 gold badge1 silver badge10 bronze badges

2 Comments

RWN Over a year ago

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

Justin Duncan Over a year ago

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

Stéphane Ammar · Accepted Answer · 2018-03-02 18:16:11Z

0

You should declare your submit event as an entire function

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

answered Mar 2, 2018 at 18:16

Stéphane Ammar

1,45410 silver badges17 bronze badges

2 Comments

Musa Over a year ago

...and call it as well

RWN Over a year ago

Whole new issue now: returns a syntax error: unexpected token (

Collectives™ on Stack Overflow

onsubmit not executing JavaScript function

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related