submit form without refresh page and load output into html

Question

I want to submit a form information to another php script without leaving the page and show the output in that same page.

Here's my ajax function to load php output in html without leaving the page. It doesn't do that if my form has a submit button. It only works with a normal clickable button.

$('#btnLoad').click(function(){

    $.ajax({
        type: 'POST',
        url: 'page1.php',
        success: function(data){
                 if(data != null) $('#content').text(data);
         }
     });
});

The problem is that I need to send POST variables to my PHP script but when I do, it goes to my PHP script page. I just want the script to receive the POST variables, run the script and then show the output in my HTML page.

Here's the script that doesn't go to PHP script page. I don't know if the PHP script runs with this function.

$(function() {
    $('form#myForm').on('submit', function(e) {
        $.post('page1.php', $(this).serialize(), function (data) {

        }).error(function() {

        });
        e.preventDefault();
    });
});

How can I combine these two scripts into one, to submit my variables via POST, run the script and show the output in my HTML page?

Shehary · Accepted Answer · 2015-09-03T21:06:03.807

1

Combining both Ajax

$("#btnLoad").click(function (e) {
     e.preventDefault()
     $.ajax({
         type: "POST",
         url: "page1.php",
         data: $('#myForm').serialize(),
         success: function (msg) {
             $("#thanks").html(msg);
         },
         error: function (msg) {
             $("#error").html(msg);
         }
     });
 });

HTML to show success message

<div id="thanks"></div>

HTML to show error message

<div id="error"></div>

PHP Server Side

<?php
    if (isset($_POST['submit'])) { //assuming you have input with name="submit"
        //Do what ever you like to do next
        //If everything good
        echo "<strong>Success!</strong> This Is Success Thanks Message. If everything go exactly as Planned.";
    } else {
        echo "<strong>Error!</strong> This Is Error Message. If anything goes south.</div>";
    }
?>

Edited: OP asked to show messages in jQuery modal dialog

In Ajax after success call, try like this

success: function(msg) {
    $("#thanks").html(msg);
    $("#modalId").dialog({
        autoOpen:true,
        width:500,
        title:"Your Error Message",
    },

And same for error function

Note: I haven't test this so not sure it will work out of the box or need any debugging.

edited Sep 03 '15 at 21:06

answered Sep 03 '15 at 17:00

Shehary

9,926
10
42
71

I have an input type=submit but it doesn't echo the sucess message and inside of that if i want to receive my POST variables. But ye its working the way i wanted to, thank you so much, now i only need to receive the post variables inside the if but isn't working :/. Can i then print them in the html? – Wine Torpedo Sep 03 '15 at 17:24
`type=submit` means its submit the form but put `name="submit"` too, like this `` so `if (isset($_POST['submit']))` knows you are posting something – Shehary Sep 03 '15 at 17:28
Thank you so much, u don't know how much you helped me with that. Just one last thing if u can help about this matter, can i load a Jquery UI dialog in the html page from the php script with this function or only echo text? – Wine Torpedo Sep 03 '15 at 17:33
you can load that just put the message `Success! This Is Success Thanks Message. If everything go exactly as Planned.` inside `Jquery UI dialog` and remove from php and and change this `success: function (msg) {$("#thanks").html(msg);}` to `success: function () {$("#modalid").show();}` – Shehary Sep 03 '15 at 17:36
I can´t do it like that because i have a lot of messages to show, it shows me everything with that scripts except the dialog modal. – Wine Torpedo Sep 03 '15 at 20:42
ok ignore me above comment and check at the end of the answer, I edit it to show response in jQuery modal dialog – Shehary Sep 03 '15 at 21:06

score 0 · Answer 2 · answered Sep 03 '15 at 16:58

0

Why do you not replace the submit buttons with normal buttons then? What you could do in jQuery is:

$(formSelector).on('submit',function (e) {
   e.preventDefault()
  //Place your ajax here. 
})

answered Sep 03 '15 at 16:58

Michael Seltenreich

3,013
2
29
55

score 0 · Answer 3 · answered Sep 03 '15 at 17:10

0

you can do something like

$('#btnLoad').click(function(){
$.ajax(url, 
{ 
    data: { variable1: $("#variable1").val(), variable2: $("#variable2").val() },
    type: "POST",
    success: function(data) {
        if(data != null) $('#content').text(data);
    }

    });
});

And normally I don't use a form if I need to send data via ajax, I use just JS.

answered Sep 03 '15 at 17:10

jsan

177
1
2
14

Yes the thing is my website is almost done and its all made with forms. Thank you for helping. – Wine Torpedo Sep 03 '15 at 17:26

submit form without refresh page and load output into html

3 Answers3