submit form without refresh page and load output into html [duplicate]

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-03 21:06:03Z

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.

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?
type=submit means its submit the form but put name="submit" too, like this <input type="submit" name="submit"> so if (isset($_POST['submit'])) knows you are posting something
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?
you can load that just put the message <strong>Success!</strong> 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();}
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.

Michael Seltenreich · Accepted Answer · 2015-09-03 16:58:19Z

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

jsan · Accepted Answer · 2015-09-03 17:10:34Z

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.

Yes the thing is my website is almost done and its all made with forms. Thank you for helping.

Collectives™ on Stack Overflow

submit form without refresh page and load output into html [duplicate]

3 Answers 3

6 Comments

Comments

1 Comment

Linked

Hot Network Questions