php ajax form submit dynamically

Question

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>

where is the script located? (after the html or before?) Why don't you wrap it in a $( document ).ready(? — Jeff
– Jeff, Commented Aug 2, 2018 at 3:30

ThangLe · Accepted Answer · 2018-08-04 03:40:38Z

1

Maybe I have understood your question :D.

Html

<form action="action.php" method="post" id="formpost"> <input type="text" id="input" value="php echo"> <input type="submit" value="send"> </form>
The area will display the message

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

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

edited Aug 4, 2018 at 3:40

answered Aug 2, 2018 at 7:44

ThangLe

1,0001 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Anjali Over a year ago

yeah i have to refresh the page the page again for it.

Anjali Over a year ago

may be php needs to reload the page

ThangLe Over a year ago

I think to reload a page that depends on the client side (front end). Server justs rending data (HTML or JSON, XML ...) and response to the client for display. So when using ajax, it doesn't need to reload page.

Anjali Over a year ago

so why this is not working ? before your code one alert comes with body but now it doesnot come .. just reload the page and msg shows ...

Anjali Over a year ago

how can i msg you is there any option

|

Tran Tony · Accepted Answer · 2018-08-09 15:53:19Z

1

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

answered Aug 9, 2018 at 15:53

Tran Tony

173 bronze badges

Comments

Dacre Denny · Accepted Answer · 2018-08-02 03:29:51Z

0

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

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

answered Aug 2, 2018 at 3:29

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

1 Comment

Anjali Over a year ago

this didnt work still showing that alert(data) and post after page reload script is located in last of the html

Collectives™ on Stack Overflow

php ajax form submit dynamically

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related