CODEWITHSUNDEEP
phpjavascriptjquery
Lahiru_B
Lahiru_B

Reputation: 3

How can I view jquery success message after the form submit in php?

I want to view a jquery success message after the form submit in php. I tried following code. But its not appearing. But when I code it in html it is working.But it is not after submiting. How can I achieve it?

here is my javascript code in php

    <?php
         if(isset($_POST['aaa']) and $_POST['aaa']=="Submit"){
    echo '<html>
    <style type="text/css" media="screen">
<!--
.container {width: 670px; margin: 10px auto;}
.messagebox {background-color: #F5F5F5;padding:5px;margin:10px 0px;border: 1px solid #DBDBDB;}
.errorbox {color:#000;background-color:#ffeded;padding:5px;margin:10px 0px;border:1px solid #f27c7c;}
.confirmbox {background-color:#F2FFDB;color:#151515;border:1px solid #9C6;margin:10px 0px;padding:5px;}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script >
<!--
$(document).ready(function() {
$("#messageBox").addClass("messagebox");setTimeout(function(){
$("#messageBox").fadeOut("slow")}, 4000);
});
function messagebox(){
$("#messageBox").removeClass().addClass("confirmbox").html("Item has been saved").fadeIn(2000).fadeOut(4000);
}
function alertbox(){
$("#messageBox").removeClass().addClass("errorbox").html("Oops, there was an error!").fadeIn(2000).fadeOut(4000);
}
-->

messagebox();
</script>
<body>
    <div class="messagebox" id="messageBox" style="display:none;"></div>
    </body>
    </html>';
    }
?>

Upvotes: 0

Views: 3618

Answers (1)

Tomer
Tomer

Reputation: 17940

Your code have some problems but to answer your question, You need to call your script with ajax and in the callback function you show the message:

$.ajax({
  url: "test.php",
  data: data,
  success: function(message){
   //this will be called once the php has returned an answer
   $("#messageBox").removeClass().addClass("confirmbox").html(message).fadeIn(2000).fadeOut(4000);
   }
})

PHP

//after processing the data, echo a response:
echo "Message has been saved";

//if an error occured, echo it
echo "an error occured";

UPDATE:

  1. Don't output the entire page in PHP echo. just close the php tag and use regular HTML:

     <?php
     if(isset($_POST['aaa']) and $_POST['aaa']=="Submit"):?>

<html>
  //regular html code goes here

<?php endif;?>

    look here for more examples.

  2. You don't have any button or form. What you should have is something like:

    <form action="myscript.php" method="post">
    <input name="email" type="text"/>
    //some more inputs
    <input value="Submit" type="submit"/>
 </form>

  3. Now you can bind an event to the form submit and call the ajax:

    $('form').submit(function(){
$.ajax({
  url: "test.php",
  data: $(this).serialize(),
  success: function(message){
           //this will be called once the php has returned an answer
  $("#messageBox")
    .removeClass()
    .addClass("confirmbox")
    .html(message) 
    .fadeIn(2000).fadeOut(4000);
   }
  })
 });

Sounds like you really need to learn some things about web development, i suggest you start here, and there are a lot of great resources on the web.

Upvotes: 1

Related Questions