CODEWITHSUNDEEP
javascriptjqueryforms
CyanPrime
CyanPrime

Reputation: 5193

Submit Button .submit reverting to default behavior

I've made a simple test case that is suppose to take the value in the textarea and put it in the div with the id "submit-output" without refreshing, but for some reason it doesn't work.

clicking the submit button doesn't seem to call the postMessage() function, and even reloads the page when I have return false in there at the end.

Can someone please tell me why the submit button is using the default behavior?

<html lang="en">  
    <head>  
        <meta charset="utf-8">
        <title>Test Case</title>
    </head>
    <body>

    <div id="submit-output">[No output]</div>
    <form id="post-form">
            <textarea name="post" rows="2" cols="50"></textarea>
        <input type=submit value="Submit" id="submitbutton" onclick="postMessage()">
    </form>

    <script src="http://code.jquery.com/jquery.js"></script>
    <script>
        $(document).ready(function() {
            function postMessage(){
                $('#post-form').submit(function(){
                    console.log("submit");
                    $('submit-output').html($('#post-form').children('.post').val());
                    console.log("submitted");
                    elem.children('.post').val("");
                    return false;
                });
            }
        });
    </script>
    </body>
</html>

Upvotes: 0

Views: 94

Answers (3)

Medhat Gayed
Medhat Gayed

Reputation: 2813

You don't need onclick="postMessage()" in the input tag, remove that and remove the postMessage() function. Also add event.preventDefault(); like this:

<html lang="en">  
    <head>  
        <meta charset="utf-8">
        <title>Test Case</title>
    </head>
    <body>

    <div id="submit-output">[No output]</div>
    <form id="post-form">
            <textarea name="post" rows="2" cols="50"></textarea>
        <input type=submit value="Submit" id="submitbutton">
    </form>

    <script src="http://code.jquery.com/jquery.js"></script>
    <script>
        $(document).ready(function() {
            $('#post-form').submit(function(event){
                event.preventDefault();
                console.log("submit");
                $('#submit-output').html($('#post-form').children('.post').val());
                console.log("submitted");
                return false;
            });
        });
    </script>
    </body>
</html>

Upvotes: 3

Buzinas
Buzinas

Reputation: 11725

You shouldn't use the "click" event of a submit button, only the "submit" event of the form.

Also, the $('submit-output') command will try to find a TAG with this name, not the ID, you should use $("#submit-output") instead.

Other important thing: you need to use e.preventDefault() to prevent the event posting the form.

Code working:

<div id="submit-output">[No output]</div>
<form id="post-form">
    <textarea id="txtInput" name="post" rows="2" cols="50"></textarea>
    <input type="submit" value="Submit" id="submitbutton" />
</form>

Javascript:

$(document).ready(function() {
    $("#post-form").submit(function(e) {
        e.preventDefault();
        $("#submit-output").html($("#txtInput").val());
        $("#txtInput").val("");
    });
});

DEMO FIDDLE

Upvotes: 3

rohit anand
rohit anand

Reputation: 296

`

Test Case 

<div id="submit-output">[No output]</div>
<form id="post-form">
        <textarea name="post" rows="2" cols="50"></textarea>
    <input type=submit value="Submit" id="submitbutton" >
</form>

<script src="http://code.jquery.com/jquery.js"></script>
<script>
    $(document).ready(function() {
        function postMessage(){
           console.log("submit");
          $('#submit-output').html($('#post-form').children('.post').val());
          console.log("submitted");
          elem.children('.post').val("");
          return false;

        }
      $('#post-form').submit(postMessage);
    });
</script>
</body>

` Try this

Upvotes: -1

Related Questions