jQuery onClick function to submit data to php "not defined"

Question

The following button calls a jQuery function onClick. However, the Firefox dev console says "postData is not defined."

Here is the button and the jQuery script.

    <div class="center_text_grid flex-item EMail_Pwd">

    <button class="btn_joinnow" id="btn_joinnow" style="color:rgb(255,255,255)" onClick="postData()">Click to Submit Data</button></div>

function sendReply() {
    // autoresponder
}

postData().done(sendReply);

</script>

</form><br>

<br><br><br>

<!-- ________________ -->

<script type="text/javascript">

function postData() {
    return $.ajax({
    var datastring = $("#echo_test").serialize();
    $.ajax({
       type: "POST",
       url: "echo_test.php",
       data: {post: datastring},
    });
});
}

Why does the console say the function postData is not defined?

Thanks for any ideas.

There are many problems with the code provided above. Correct the syntax errors so we can accurately answer your question. — Randy Casburn
– Randy Casburn, Commented May 26, 2019 at 16:01

Scaramouche · Accepted Answer · 2019-05-26 16:27:08Z

I don't understand why you need two nested ajax calls, you really don't need them, I think. In any case, you can't declare a variable like this var datastring = $("#echo_test").serialize(); inside curly brackets, so move that line outside the ajax call.

Also take into consideration the order in which you declare/execute functions.

So, moving the script, where the function is declared, up:

<div class="center_text_grid flex-item EMail_Pwd">
    <button class="btn_joinnow" id="btn_joinnow" style="color:rgb(255,255,255)" onClick="postData()">Click to Submit Data</button></div>


<script type="text/javascript">
function postData() {
    var datastring = $("#echo_test").serialize();
    return $.ajax({

       type: "POST",
       url: "echo_test.php",
       data: {post: datastring},
    });
}
</script>
<script>
function sendReply() {
    // autoresponder
}

//also, this line is not needed for the button to work, this is just if
//you need the function to execute on page load as well
postData().done(sendReply); 

</script>

HIH

CodeRonin · Accepted Answer · 2019-05-26 16:10:10Z

2

you are calling postData before to implement the method, as mentioned move your function document.ready or put

  <script type="text/javascript">
    function postData() {
        return $.ajax({
        var datastring = $("#echo_test").serialize();
        $.ajax({
           type: "POST",
           url: "echo_test.php",
           data: {post: datastring},
        });
    });
    }
</script>

in the head of the html file

edited May 26, 2019 at 16:10

answered May 26, 2019 at 16:00

CodeRonin

2,1293 gold badges16 silver badges33 bronze badges

4 Comments

Randy Casburn Over a year ago

Please correct the syntax error in your code. C-n-P the OP's incorrect code is notreally very helpful.

CodeRonin Over a year ago

do you mean close the script tag or something else?

RTC222 Over a year ago

You said there are multiple syntax errors. I am correcting the onClick now. Anything else you see?

CodeRonin Over a year ago

just edited, close the script file, move the tag before the body tag and everything should work

Anurag Srivastava · Accepted Answer · 2019-05-26 15:56:33Z

1

Remove onclick from the button and add handler in the $(document.ready) function:

<button class="btn_joinnow" id="btn_joinnow" style="color:rgb(255,255,255)">Click to Submit Data</button></div>

...

<script type="text/javascript">
    $(function(){
      function postData() {
        return $.ajax({
        var datastring = $("#echo_test").serialize();
        $.ajax({
           type: "POST",
           url: "echo_test.php",
           data: {post: datastring},
        });
      });

      $("#btn_joinnow").click(postData);
    });
</script>

answered May 26, 2019 at 15:56

Anurag Srivastava

14.5k4 gold badges39 silver badges47 bronze badges

4 Comments

RTC222 Over a year ago

Where is the document.ready function? This page does not have one. How would the handler know when the button is clicked if there is no onclick event?

Anurag Srivastava Over a year ago

If you are using jQuery, document.ready is the first function you would come across. $(function() is a shorthand for $(document.ready) The last line of my function literally attaches the click event to the button. I suggest you brush up your skills in jQuery.

RTC222 Over a year ago

Now I understand. With your help and @GJCode's answer, I think I understand now. Thanks.

Randy Casburn Over a year ago

Your answer is premature. There is nothing wrong with using the onclick attribute. But the OP's code has so many syntax errors that it is impossible to determine how many corrections are needed. (the first being to change onClick to onclick)

Collectives™ on Stack Overflow

jQuery onClick function to submit data to php "not defined"

3 Answers 3

Comments

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related