Hướng dẫn javascript not finding function

So i have this in index.php:

        <script type='text/javascript' src='images/submit.js'></script>

inside that file i have:

    $(document).ready(function() {
        function sendEmail() {
            console.log("function send email run");
                var url = "sendemail.php";

                $.ajax({
                   type: "POST",
                   url: url,
                   data: $("#emailform").serialize(),
                   success: function(data)
                   {
                       //alert(data);
                       document.getElementById("resultmsg").innerHTML = data;//$("#resultmsg").html(data);
                   }
                 });

            return false;
            }
});

and I am trying to call it from(also index.php):

<form name="emailform" action="" onsubmit="return sendEmail();" method="post">

but i get this error:

TypeError: sendEmail is not a function

asked Feb 25, 2016 at 10:16

8

Is you Javascript file named submit.js and located in the images forder? You don't need to declare sendEmail function in the ready function because it won't be available out of the scope of the anonymous function passed to the ready function. Only functions that are depending on a HTML elements are needed to be called in the ready function or to be included after the html code.

answered Feb 25, 2016 at 10:23

GardaxGardax

3701 silver badge14 bronze badges

You have to write sendEmail() function outside $(document).ready(function()

With current code it is available only inside the $(document).ready(function() function

answered Feb 25, 2016 at 10:24

NijeeshNijeesh

8327 silver badges11 bronze badges

1

Declare sendEmail as global varibale by declaring it this way:

$(document).ready(function() {
    sendEmail = function () {
        console.log("function send email run");
        var url = "sendemail.php";

        $.ajax({
            type: "POST",
            url: url,
            data: $("#emailform").serialize(),
            success: function(data)
               {
                   //alert(data);
                   document.getElementById("resultmsg").innerHTML = data;//$("#resultmsg").html(data);
               }
        });

        return false;
    }
});

Or place sendEmail out of document.ready function:

function sendEmail() {
    console.log("function send email run");
    var url = "sendemail.php";

    $.ajax({
        type: "POST",
        url: url,
        data: $("#emailform").serialize(),
        success: function(data)
           {
               //alert(data);
               document.getElementById("resultmsg").innerHTML = data;//$("#resultmsg").html(data);
            }
    });

    return false;
}

answered Feb 25, 2016 at 10:37

Mehran TorkiMehran Torki

9571 gold badge8 silver badges36 bronze badges

There are several problems with your source that stopped Javascript from running:

Nội dung chính

• Why is my JavaScript not working in HTML?
• How do I run a JavaScript function from HTML?
• Why is JavaScript saying my function is not defined?
• Where do I put JavaScript function in HTML?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

You were missing the closing quotes for the src attribute. That made the DOM interpret everything after that as part of the src attribute, screwing up everything.

function maplestory( yummy )
{

You had a closing curly bracket instead of an opening one. This caused a parse error because Javascript was expecting an opening curly bracket.

if( yummy.search( regex ) == 1 )

You had an invisible character before the 1. This one was particularly difficult to find—I had to use my Javascript debugger to find it.

<label for="maplestory">E-mail</label>:<br><textarea name="maplestory" id="maplestory" cols="32" rows="1"></textarea><br>

This shouldn't affect your problem, but you were missing the equals sign between the for and the "maplestory".

Since you seem to be having trouble getting it to work, copy and paste the below and see if it works. (For me, without editing the textboxes, if you click the submit button, you get an alert right away). If it doesn't work, let me know what browser you're using.

    <!DOCTYPE HTML>
    <html lang="en-US">
    <link rel="icon" type="image/png" href="img/favicon.png">
    <link rel="stylesheet" type="text/css" href="css/new.css">
    <title>Comments</title>
    </head>
    <body>
    <nav id="navbar"> Navigation:
     <table><tr>
      <td><a href="bio.html">Bio</a></td>
      <td><a href="resume.html">Resume</a></td>
      <td><a href="classes.html">Classes</a></td>
      <td><a href="new.html">New</a></td>
     </tr></table>
    </nav>

    <header> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
    function yay(){
    if (document.poop.melon.value == "" || document.poop.melon.value == "Type comment here!" || document.poop.melon.value == "..." )
    {
     alert ( "Fill in the comment box!" );
     document.poop.melon.value = "Type comment here!";
     return false;
    }
    if (document.poop.maplestory.value == "" || document.poop.maplestory.value == "" || maplestory (document.poop.maplestory.value)){
     alert ("Dear Sir or Madam, please type in your e-mail address.");
     return false;
    }
     return true;
     }

    function maplestory(yummy)
    {
       var regex = /^[A­Z0­9._%+­][email protected][A­Z0­9.­]+\.[A­Z]{2,4}$/i;
       if( yummy.search( regex ) == -1 )
         return true ;
       return false ;
    } 

    </script>


    </header>

    <h2>Leave a poopy comment below:</h2>
    <form name="poop" id="poop" method="POST" action="http://www.webdevfoundations.net/scripts/formdemo.asp" onsubmit="return yay();">
    <textarea name="melon" id="melon" cols="32" rows="10">...</textarea><br>
    <label for="maplestory">E-mail</label>:<br><textarea name="maplestory" id="maplestory" cols="32" rows="1"></textarea><br>
    <input id="submit" type="submit" value="Submit"></form>


    <footer><div class="right"> name &copy; 2010 </div></footer> <!-- It's a shame there's no unicode for the copyleft symbol :( -->
    </body> 
    </html> 

This may happen if you haven’t used “export” statement. Use “export” before the function which will be imported into the script file. The JavaScript file is as follows which has the file name demo.js.

demo.js

console.log("function will import");
export function test(){
   console.log("Imported!!!");
}

Here is the “index.html” file that imports the above function −

index.html

Example

 Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<script type='module'>
   import { test } from "./demo.js"
   test();
</script>
</body>
</html>

To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.

Following is the output from the file demo.js which has the function name test().

Updated on 02-Sep-2020 06:14:29

• Related Questions & Answers
• Should I always put my JavaScript file in the head tag of my HTML file?
• why Python can't define tuples in a function?
• Why is JavaScript case sensitive but HTML isn't?
• Why can't girls have all the fun?
• Why doesn't JavaScript have a goto statement?
• Why doesn't JavaScript support multithreading?
• How to import a single function from a Python module?
• Why can't we define a static method in a Java interface?
• Why can't a Java class be both abstract and final?
• Sending a table from UI5 application to ABAP Function Module
• Why can’t we override static methods in Java?
• Why can't static method be abstract in Java?
• Many of my friends find girls who smoke cool, why?
• Why is using the JavaScript eval() function a bad idea?
• How can I dynamically update my Matplotlib figure as the data file changes?

Why is my JavaScript not working in HTML?

On the web browser menu click on the "Edit" and select "Preferences". In the "Preferences" window select the "Security" tab. In the "Security" tab section "Web content" mark the "Enable JavaScript" checkbox. Click on the "Reload the current page" button of the web browser to refresh the page.

How do I run a JavaScript function from HTML?

The first method is to call the JavaScript function in HTML. For this, you have to create a function then define this function either in the head section or body section of the HTML document. You can either create a link or a button and then an onclick() event is associated with them in order to call this function.

Why is JavaScript saying my function is not defined?

You're Calling the Function Before It's Defined If the code that calls your JavaScript function precedes that function's definition in your HTML document, you will come across the function is not defined error. This is very, very important to check and rule out before you proceed to investigating other probable causes.

Where do I put JavaScript function in HTML?

Incorporating JavaScript in the HTML Header Attribute js file. You can add JavaScript functions to a page by entering the code in the HTML Header attribute on the Page Attributes page.