javascript - php ajax form submit dynamically

691

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 want ). i have created a chat in which php sends information to xml as and displays all xml information, and when user submits the form below

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

it reloads to display this php

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

Additional info : when i remove the chat$chat->message . no msgs display because the php loop only name shows in<div class="msg"> above

i have tried this to submit form dynamically by javascript but when i click the button a alert comes with my own html<html><body>..</html>, and when i reload the page manually msg shows

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#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.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });
});
</script>
724

Answer

Solution:

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); }); }); });
635

Answer

Solution:

$(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);
        });
    });
});  
434

Answer

Solution:

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 thesubmit() method that jQuery provides on<form> elements. Also, jQuery allows you to returnfalse 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.
               }
             });

         return false; // Prevent the form submit from reloading the page
    });
})

People are also looking for solutions to the problem: php - Insert elements from one array (one-at-a-time) after every second element of another array (un-even zippering)

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.