Home/ Questions/Q 9185225
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T19:14:04+00:00

I am trying to submit data to the db without refreshing the page using

  • 0

I am trying to submit data to the db without refreshing the page using jquery and php
But I guess there is something I get wrong in my code , its works nicely if I do not apply Jquery :
Bellow is my code am using .

<!---Insert into database -->
<script type="text/javascript">
$(document).ready(function () {
    $('.chatbutton').click(function () {
        $.ajax({
            type: 'post',
            url: "insertchatmessages.php",
            success: function () {}
        });
    });
});
</script>
<!---Insert into database ends here  -->

</head>
<body>
<table class="chattable" id="chattable" border="0">
<tr><td><div id="load_tweets">

</div></td></tr>
<form id ="chatform" action="?" method="post"></td></tr>
<tr><td><input class ="chattext" type ="text" name="message"></td></tr>
<tr><td><input class="chatbutton" class="chatbutton" type="submit" value="send" name ="submit">
</div>
</table>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    HTML (this is derived from your code but modified to work in jsfiddle):

    <table class="chattable" id="chattable" border="0">
<tr>
    <td>
        <div id="load_tweets"></div>
    </td>
</tr>
<tr>
    <td>
        <form id ="chatform" action="/echo/html/" method="post"> <!-- your action should point to your php (insertchatmessages.php) -->
            <input type="hidden" name="html" value="This is sample text to show that this works!"/> <!-- for jsfiddle test only. remove this in your code. -->
            <input class ="chattext" type ="text" name="message" />
            <input class="chatbutton" class="chatbutton" type="submit" value="send" name ="submit" />
        </form>
    </td>
</tr>
</table>

    jQuery:

    $(document).ready(function(){
    $('#chatform').submit(function(e){
        e.preventDefault();
        var $form = $(this),
        data = $form.serialize();

        $.ajax({
             data: data,
             type: $form.attr("method"),
             url: $form.attr("action"),
             success: function(data){
                  $("#load_tweets").html("<p>"+data+"</p>");
             }
        });
    });
});

    Working example: http://jsfiddle.net/darshanags/6vxMs/6/

    Notes: I have made slight modifications to your code to make it work on jsfiddle, you will have to change it back to make it work in your setup.

    • 0