Stop form from refreshing the page on submit

Question

Alright, so I have a basic form on my page:

        <form action='' id='formId' method='POST'>
        <table>
            <tr>
                <td>
                    <input type='text' name='Chat' autocomplete='off'>
                </td>
                <td>
                    <input type='submit' name='Go'>
                </td>
            </tr>
        </table>
    </form>

and the javascript is:

        <script type='text/javascript'>
        $( "#formId" ).submit(function( event ) {
          event.preventDefault();
                <?php

                    $Chat = mysql_real_escape_string(strip_tags($_POST['Chat']));
                    $Go = mysql_real_escape_string($_POST['Go']);

                    if ($Go) {

                        if ($Chat) {

                            mysql_query("INSERT INTO `Chat` (`Chat`)
                            VALUES('$Chat')");
                        }

                    }

                ?>
        });
    </script>

I just need it to stop from refreshing when someone submits. I've read a few different posts on here with the same problem, but none seemed to work for me.

Are you aware that the PHP is executed on the server, **before** the HTML/JavaScript is sent to the client? I.e. the PHP code here is executed **before** the event handler is called. See http://stackoverflow.com/q/13840429/218196. For clarity, you should put the PHP at the top of the file, not "arbitrarily" inside HTML / JS. — Felix Kling, Jun 15 '15 at 01:49
Nope, wasn't aware of that! I don't know much about JS at the moment, still lots to learn. — Jayden82, Jun 15 '15 at 02:02
This has less to do with JavaScript specifically and more with how the Web works. Check out the link in my comment. — Felix Kling, Jun 15 '15 at 02:03

score 2 · Answer 1 · answered Jun 15 '15 at 01:43

2

$('#formId').submit(function () {
 /do your stuff

 return false;
});

Returning false will prevent page reloading.

answered Jun 15 '15 at 01:43

aadarshsg

2,069
16
25

Still doesn't seem to work right. Does it matter that it's listing information using ajax from the database that it's submitting to? – Jayden82 Jun 15 '15 at 01:45

Aaron Hernandez · Answer 2 · 2015-06-15T06:16:59.167

You need to separate the php code to your script. PHP is executed server side, js/jquery is executed client side. Try this code if it will help you.

<?php

    if(isset($_POST['Go'])){

        $Chat = mysql_real_escape_string(strip_tags($_POST['Chat']));
        $Go = mysql_real_escape_string($_POST['Go']);

        if ($Go) {

            if ($Chat) {

                mysql_query("INSERT INTO `Chat` (`Chat`)
                VALUES('$Chat')");
            }

        }
    }

?>


<form action='' id='formId' method='POST'>
    <table>
        <tr>
            <td>
                <input type='text' name='Chat' autocomplete='off'>
            </td>
            <td>
                <input type='submit' name='Go'>
            </td>
        </tr>
    </table>
</form>

 <script type='text/javascript'>
    $( "#formId" ).submit(function( event ) {
      event.preventDefault();
    });
</script>

REVISED: 06/15/2015 10:16AM GMT+8 You need use AJAX to send data. First, Add an id to the text field then create a php file for getting the data from the URL and insert the chat to DB. Try this code:

<form action='' id='formId' method='POST'>
    <table>
        <tr>
            <td>
                <input type='text' id='chat' name='Chat' autocomplete='off'>
            </td>
            <td>
                <input type='submit' name='Go'>
            </td>
        </tr>
    </table>
</form>


<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type='text/javascript'>
    $( "#formId" ).submit(function( event ) {
      event.preventDefault();

      $.ajax({
                    type: "POST",
                    url: "insert_chat.php?",
                    data: "Chat="+$('input#chat').val(),
                    dataType: "json",
                    success: function(data){
                    }
                });
    });
</script>

insert_chat.php

<?php

    $Chat = mysql_real_escape_string(strip_tags($_GET['Chat']));
    $Go = mysql_real_escape_string($_GET['Go']);

    if ($Go) {

        if ($Chat) {

            mysql_query("INSERT INTO `Chat` (`Chat`)
            VALUES('$Chat')");
        }

    }

?>

Hm, it's still refreshing the page. It's at http://silverpanthergames.com/friendsplus/Chat.php. Everything seems right, not sure why it isn't working. — Jayden82, Jun 15 '15 at 02:12
ah. sorry. your goal is to step refresh. I will revised my code then try agin. — Aaron Hernandez, Jun 15 '15 at 02:16

Stop form from refreshing the page on submit

2 Answers2