Question

I have a php file and it contains a textfiled and submit button and a div and below is code

Page1.php

<form name="form1" method="post">
  <input type="text" name="email1">
  <input type="submit" name="submit" value="send" class="submit_class">

  <div class="suc_box">You have Entered</div>
</form>

if($_POST['submit']) {
  $v1 = $_POST['email1'];

  // $query1 =  here some code to insert into database

  if($query1 > 0){
    //here i want to display the div `suc_box`.. Here how i can show that div
  }
}

And the jQuery code:

$(document).ready(function(){
    $('suc_box').hide();

    $('suc_box').click(function(){
        $(this).hide();
    });
});   

Question: How can I show/display that suc_box when form is submitted after it inserted into database?

Answer 1

You can do it easily with AJAX. You have one php-file with the form and another one for processing the data:

//form_file.php

<form id="my_form" onsubmit="validateform();">
  <input type="text" name="email1" />
  <input type="submit" value="OK" />
</form>

<div class="suc_box"></div>

<script>
$(document).ready(function(){
  $('.suc_box').click(function(){
    $(this).hide();
  });

  $('#my_form').submit(function(){
    var data = $(this).serialize();
    $.post('process.php',data,function(return_data){
      $('.suc_box').html(return_data);          
    });
    return false; //cancel the 'real' submit
  });
});   
</script>

//process.php

<?php
$email = mysql_real_escape_string($_POST['email1']);
//write data to DB
if($succeeded) {
  echo 'You have Entered';
} else {
  echo 'Something went wrong, try again!';
}

It’s untested, but you get the idea.

validating email field

    function validateform(){
        if (!/^\S+@\S+\.\w+$/.test(document.sweetform.Email.value)) {
            alert("Not a valid e-mail address");
            return false;
        }
        else {
            return true;
        }

    }