Php Ajax Form Submit Dynamically

i have no knowledge about websocket for chat i want to use php ajax for form submit for chat i want to sumbit form dynamically without reload but it gets reload ( which i dont wan

Solution 1:

Maybe I have understood your question :D.

1. Html

   <form action="action.php" method="post" id="formpost"> <input type="text" id="input" value="php echo"> <input type="submit" value="send"> </form>

2. The area will display the message

   <div class="msg" id="msg"><?php print $message->getName() ." : " . $chat->message . ""; ?></div>

3. Javascript

   $("#formpost").on('submit', function(event) {
       event.preventDefault();
   
       var form = $(this);
       var url = form.attr('action');
   
       $.ajax({
           type: "POST",
           url: "club.php",
           data: form.serialize() // serializes the form's elements.
       }).done(function(data) {
           var msg = $(data).find('#msg').html();
   
           alert(msg);
       });
   });
   

I think the response of Ajax will return an HTML page (you can check it with way access to "/club.php" what you see on screen it will be responded

EDIT:

UPDATE MY ANSWER

At JS

$(function() { $("#formpost").submit(function(event) { event.preventDefault(); var form = $(this); var url = form.attr('action'); $.ajax({ type: "POST", url: url, data: form.serialize() // serializes the form's elements. }).done(function(data) { var msg = $(data).find('#msg').text(); alert(msg); }); }); });

Solution 2:

$(function() {
    $("#formpost").submit(function(event) {
        event.preventDefault();

        $.ajax({
            type: "POST",
            url: "club.php",
            data: $(this).serialize(),
        }).done(function(data) {
            var msg = $(data).find('#msg').text();

            alert(msg);
        });
    });
});  

Solution 3:

There are a number of possible issues here -

First, ensure that your DOM (HTML) has loaded before running your jQuery script. One way to achieve this is to place your current jQuery logic inside of a $(function() { .. }) as shown below. This guarantees the DOM will be loaded and available to access before you run your form/ajax setup logic.

Also, consider more declarative approach by using the submit() method that jQuery provides on <form> elements. Also, jQuery allows you to return false from submit handler functions, to prevent a page reload:

// You may need to wrap your form logic in a jquery context, in case the // script is run before your page DOM has loaded
$(function() {

    // also consider using the more declarative submit() method that is available // on forms
    $("#formpost").submit(function() { 

        $.ajax({
               type: "POST",
               url: "club.php",
               data: $(this).serialize(),
               success: function(data)
               {
                   alert(data); // show response from the php script.
               }
             });

         returnfalse; // Prevent the form submit from reloading the page
    });
})