1

I have created a multipage form using fieldset. For example, three forms with next and previous button with three fieldsets. For event handling (for next and previous button) I have used JQuery. The last form has submit button. I want to insert all the records from these three forms to database. Can you please help me, what is to be included in submit button event handler so that I can see data in database. I have also made a connection file. Here is the code for jquery and connection file:

<script type="text/javascript">
  $(document).ready(function(e) {
  var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
 if(animating) return false;
 animating = true;
 
 current_fs = $(this).parent();
 next_fs = $(this).parent().next();
 
 //activate next step on progressbar using the index of next_fs
 $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
 
 //show the next fieldset
 next_fs.show(); 
 //hide the current fieldset with style
 current_fs.animate({opacity: 0}, {
  step: function(now, mx) {
   //as the opacity of current_fs reduces to 0 - stored in "now"
   //1. scale current_fs down to 80%
   scale = 1 - (1 - now) * 0.2;
   //2. bring next_fs from the right(50%)
   left = (now * 50)+"%";
   //3. increase opacity of next_fs to 1 as it moves in
   opacity = 1 - now;
   current_fs.css({
    'transform': 'scale('+scale+')',
    'position': 'absolute'
   });
   next_fs.css({'left': left, 'opacity': opacity});
  }, 
  duration: 800, 
  complete: function(){
   current_fs.hide();
   animating = false;
  }, 
  //this comes from the custom easing plugin
  easing: 'easeInOutBack'
 });
});

$(".previous").click(function(){
 if(animating) return false;
 animating = true;
 
 current_fs = $(this).parent();
 previous_fs = $(this).parent().prev();
 
 //de-activate current step on progressbar
 //$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
 
 //show the previous fieldset
 previous_fs.show(); 
 //hide the current fieldset with style
 current_fs.animate({opacity: 0}, {
  step: function(now, mx) {
   //as the opacity of current_fs reduces to 0 - stored in "now"
   //1. scale previous_fs from 80% to 100%
   scale = 0.8 + (1 - now) * 0.2;
   //2. take current_fs to the right(50%) - from 0%
   left = ((1-now) * 50)+"%";
   //3. increase opacity of previous_fs to 1 as it moves in
   opacity = 1 - now;
   current_fs.css({'left': left});
   previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
  }, 
  duration: 800, 
  complete: function(){
   current_fs.hide();
   animating = false;
  }, 
  //this comes from the custom easing plugin
  easing: 'easeInOutBack'
 });
});
$(".submit").click(function(){
return false;
})


  });
 </script>
<?php
$servername="localhost"; // Host name
$username="root"; // Mysql username
$password=""; // Mysql password
$db_name="abc"; // Database name
$tbl_name="table"; // Table name

// Connect to server and select database.
@mysql_connect("$servername", "$username", "$password")or die("cannot connect");
@mysql_select_db("$db_name")or die("cannot select DB");
if(isset($_POST['submit'])){
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$pwd = $_POST['pwd'];
$eml= $_POST['eml'];
$num = $_POST['num'];


$sql = "INSERT INTO form (fname, lname, pwd, eml, num) VALUES ('$fname', '$lname', '$pwd', '$eml', '$num')";

if (!mysql_query($sql)) {
    die('Error: ' . @mysql_error()); 
}
}
?>
Cara J
  • 19
  • 3

0 Answers0