Jquery, Ajax, Php Mysql

tobimichigan · March 5, 2015

I have three scripts:

a. Dbmanipute.php (contains the update script and other applicable functions)

b. index3.php (contains initial forms for adding user)

c. db2.php (default db for connection)

d. script.js (contains the javascript code for ajax and jquery frames)

Target: Using ajax, jquery tech to insert query, update and delete respectively or asynchronously. But after filling the form and I press submit, the contents of the form are held in and no process is made to the database. Please, anyone with a better suggestion is welcome,

a.Dbmanipute.php

<?php
include('db2.php');

 if(isset($_REQUEST['actionfunction']) && $_REQUEST['actionfunction']!=''){
$actionfunction = $_REQUEST['actionfunction'];
  
   call_user_func($actionfunction,$_REQUEST,$con,$limit,$adjacent);
}
function saveData($data,$con){
  
  $fname = $data['firstname'];
  $lname = $data['lastname'];
  $username = $data['username'];
  $password = $data['password'];
  $email = $data['email'];
  $address = $data['address'];
  $phone = $data['phone'];
  $sex = $data['sex'];
  $monthly_due = $data['monthly_due'];
  $next_ofkin = $data['next_ofkin'];
  $nextofkin_address= $data['nextofkin_address'];
  $nextofkin_phone= $data['nextofkin_phone'];
  $datetime= $data['datetime'];
  $date_ofdue= $data['date_ofdue'];
  $sql = "insert into biodata(firstname,lastname,username,password,email,address,phone,sex,monthly_due,next_ofkin,nextofkin_address,nextofkin_phone,datetime,date_ofdue) values('$firstname','$lastname','$username','$password','$email','$address','$phone','$sex','$monthly_due','$next_ofkin','$nextofkin_address','$nextofkin_phone',NOW(),NOW())";
  if($con->query($sql)){
    echo "added";
  }
  else{
  echo "error".mysqli_error($con);
  }
  
}
function editUser($data,$con){
  $bio_id = $data['user'];
  $bio_id = base64_decode($bio_id);
   $sql = "select * from biodata where bio_id=$bio_id";
  $user = $con->query($sql);
    if($user->num_rows>0){
   $user = $user->fetch_array(MYSQLI_ASSOC);
  ?>
<form name='signup' id='signup'>
      <div class='row'>
	       <p><label for='username'>First name</label>
		    <input type='text' name='fname' id='firstname' value='<?php echo $user['firstname']; ?>' placeholder='Enter First name' /></p>
	   </div>
	   <div class='row'>
	       <p><label for='lastname'>Last name</label>
		    <input type='text' name='lname' id='lastname' value='<?php echo $user['lastname']; ?>' placeholder='Enter Last name' /></p>
	   </div>
        <div class='row'>
	       <p><label for='username'>USERNAME</label>
		    <input type='text' name='username' id='username' value='<?php echo $user['username']; ?>' placeholder='Enter Username' /></p>
	   </div>
        <div class='row'>
	       <p><label for='username'>Password</label>
		    <input type='password' name='password' id='password' value='<?php echo $user['password']; ?>' placeholder='Enter password' /></p>
	   </div>
         <div class='row'>
	       <p><label for='email'>Email</label>
		    <input type='text' name='email' id='email' value='<?php echo $user['email']; ?>' placeholder='Enter Email' /></p>
	   </div>
        <div class='row'>
	       <p><label for='username'>Address</label>
		    <textarea name="address" id="address" placeholder="Enter Address"><?php echo $user['address']; ?></textarea></p>
	   </div>        	 
	   <div class='row'>
	        <p><label for='phone'>Phone</label>
			 <input type='text' name='phone' id='phone' value='<?php echo $user['phone']; ?>' placeholder='Phone' /></p>	      
	   </div>
        <div class='row'>
	       <p><label for='username'>Sex</label>
		    <select name="sex" disabled="disabled">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            </select>
            </p>
	   </div>
       <div class='row'>
	        <p><label for='monthly_due'>Monthly Due</label>
			 <input type='text' name='monthly_due' id='monthly_due' value='<?php echo $user['monthly_due']; ?>' placeholder='Monthly_Due' /></p>	      
	   </div>
       <div class='row'>
	        <p><label for='next_ofkin'>Next of Kin</label>
			 <input type='text' name='next_ofkin' id='next_ofkin' value='<?php echo $user['next_ofkin']; ?>' placeholder='Next of Kkin' /></p>	      
	   </div>
        <div class='row'>
	       <p><label for='username'>Address of Kin</label>
		    <textarea name="nextofkin_address" id="nextofkin_address" placeholder="Enter Address of Kin"><?php echo $user['nextofkin_address']; ?></textarea></p>
	   </div>
       <div class='row'>
	        <p><label for='phone'>Next of Kin Phone</label>
			 <input type='text' name='nextofkin_phone' id='nextofkin_phone' value='<?php echo $user['phone']; ?>' placeholder='Next of Kin Phone' /></p>	      
	   </div>
           
	   </div>
	   <input type="hidden" name="actionfunction" value="updateData" />
	   <input type="hidden" name="user" value="<?php echo base64_encode($user['id']) ?>" />
	   <div class='row'>
	       <input type='button' id='updatesubmit' class='submit' value='Update' />
		   
	   </div>
   </form>
  <?php } 
}
function showData($data,$con,$limit,$adjacent){
  $page = $data['page'];
   if($page==1){
   $start = 0;  
  }
  else{
  $start = ($page-1)*$limit;
  }
   
  $sql = "select * from biodata order by bio_id asc";
  $rows  = $con->query($sql);
  echo $rows  = $rows->num_rows;
  
  $sql = "select * from biodata order by bio_id asc limit $start,$limit";
  
  $data = $con->query($sql);
  $str='<tr class="head"><td>Firstname</td><td>Lastname</td><td>Username</td><td>Password</td><td>Email</td><td>Address</td><td>Phone</td><td>monthly_due</td><td></td></tr>';
  if($data->num_rows>0){
   while( $row = $data->fetch_array(MYSQLI_ASSOC)){
      $str.="<tr id='".$row['id']."'><td>".$row['firstname']."</td><td>".$row['lastname']."</td><td>".$row['username']."</td><td>".$row['password']."</td><td>".$row['email']."</td><td>".$row['address']."</td><td>".$row['phone']."</td><td>".$row['monthly_due']."</td><td><input type='button' class='ajaxedit' value='Edit' user='".base64_encode($row['bio_id'])."' /> <input type='button' class='ajaxdelete' value='Delete' user='".base64_encode($row['id'])."' ></td></tr>";
   }
   }else{
    $str .= "<td colspan='5'>No Data Available</td>";
   }   
$str = $str."<tr><td colspan='5'>".pagination($limit,$adjacent,$rows,$page)."</tr></tr>";
echo $str;  
}
function updateData($data,$con){
  $firstname = $data['firstname'];
  $lastname = $data['lastname'];
  $username = $data['username'];
  $password = $data['password'];
  $email = $data['email'];
  $address = $data['address'];
  $phone = $data['phone'];
  $monthly_due = $data['monthly_due'];
  $user = $data['user'];
  $user = base64_decode($user);
  $sql = "update biodata set firstname='$fname',lastname='$lname',username='$username',email='$email',address='$address',monthly_due='$monthly_due' where bio_id=$user";
  if($con->query($sql)){
    echo "updated";
  }
  else{
   echo "error";
  }
  }
  function deleteUser($data,$con,$limit,$adjacent){
    $user = $data['user'];
    $user = base64_decode($user);	
	$sql = "delete from biodata where bio_id=$user";
	if($con->query($sql)){
	  showData($data,$con,$limit,$adjacent);
	}
	else{
	echo "error";
	}
  }
function pagination($limit,$adjacents,$rows,$page){	
	$pagination='';
	if ($page == 0) $page = 1;					//if no page var is given, default to 1.
	echo $prev = $page - 1;							//previous page is page - 1
	echo $next = $page + 1;							//next page is page + 1
	
	echo $lastpage = ceil($rows/$limit);	
	
	if($lastpage > 1)
	{	
		$pagination .= "<div class=\"pagination\">";
		//previous button
		if ($page > 1) 
			$pagination.= "<a class='page-numbers' href=\"?page=$prev\">previous</a>";
		else{
			//$pagination.= "<span class=\"disabled\">previous</span>";	
			}
		
		//pages	
		if ($lastpage < 5 + ($adjacents * 2))	//not enough pages to bother breaking it up
		{	
			for ($counter = 1; $counter <= $lastpage; $counter++)
			{
				if ($counter == $page)
					$pagination.= "<span class=\"current\">$counter</span>";
				else
					$pagination.= "<a class='page-numbers' href=\"?page=$counter\">$counter</a>";					
			}
		}
		elseif($lastpage > 3 + ($adjacents * 2))	//enough pages to hide some
		{
			//close to beginning; only hide later pages
			if($page < 1 + ($adjacents * 2))		
			{
				for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
				{
					if ($counter == $page)
						$pagination.= "<span class=\"current\">$counter</span>";
					else
						$pagination.= "<a class='page-numbers' href=\"?page=$counter\">$counter</a>";					
				}
				
			}
			//in middle; hide some front and some back
			elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
			{
				for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
				{
					if ($counter == $page)
						$pagination.= "<span class=\"current\">$counter</span>";
					else
						$pagination.= "<a class='page-numbers' href=\"?page=$counter\">$counter</a>";					
				}
				
			}
			//close to end; only hide early pages
			else
			{
			
				for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
				{
					if ($counter == $page)
						$pagination.= "<span class=\"current\">$counter</span>";
					else
						$pagination.= "<a class='page-numbers' href=\"$?page=$counter\">$counter</a>";					
				}
			}
		}
		
		//next button
		if ($page < $counter - 1) 
			$pagination.= "<a class='page-numbers' href=\"?page=$next\">next</a>";
		else{
			//$pagination.= "<span class=\"disabled\">next</span>";
			}
		$pagination.= "</div>\n";		
	}

	return $pagination;  
}


?>

b. index3.php (contains initial forms for adding user)

<html>
<head>
<title>Account</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<!-- jQuery easing plugin -->
<script src="jquery.easing.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$(".account").click(function()
{
var X=$(this).attr('id');

if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0');	
}
else
{

$(".submenu").show();
$(this).attr('id', '1');
}
	
});

//Mouseup textarea false
$(".submenu").mouseup(function()
{
return false
});
$(".account").mouseup(function()
{
return false
});


//Textarea without editing.
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});
	
});
	
	</script>
<style>
body
{
background-color;
font-family:arial;
}

div.dropdown {
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
div.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.dropdown  li a {
   
    color: #555555;
    display: block;
    font-family: arial;
    font-weight: bold;
    padding: 6px 15px;
  cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover{
    background:#155FB0;
    color: #FFFFFF;
    text-decoration: none;
    
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
	
	
}

</style>
</head>
<body>
<div id="mhead"><h2>Accounts <span class="red">(SS)</span> </h2></div>
<div id="container">
<div style='margin:50px'>
	
	<div class="dropdown">
	<a class="account" >
	<span>My Account</span>
	</a>
	<div class="submenu" style="display: none; ">

	   <ul class="root">
<li >
	      <a href="#Dashboard" >Dashboard</a>
	    </li>

	    
	    <li >
	      <a href="#Profile" >View Members</a>
	    </li>
	   <li >

	      <a href="#settings">Search for Members</a>
	    </li>
	   

	    <li>
	      <a href="#feedback">Add Essenk Purchase</a>
	    </li>
		<li>
	      <a href="#feedback">Approve Loan</a>
	    </li>
		<li>
	      <a href="#feedback">Add New Admin</a>
	    </li>
		<li>
	      <a href="#feedback">Edit Profile</a>
	    </li>
	    <li>
	      <a href="#signout">Sign Out</a>
	    </li>
	  </ul>
	</div>
	</div>
	
	</div>
<p id="msg"></p>
<ul id='navigate'>
  <li class="navi_sec active"><a id="add_user">Add User</a></li>
  <li class="navi_sec"><a id='show_user'>All Users</a></li>
</ul>
<div id="add_user_sec" class="user_section">
  <form name='signup' id='signup' method="post">
      <div class='row'>
	       <p><label for='username'>First name</label>
		    <input type='text' name='firstname' id='firstname' value='' placeholder='Enter First name' /></p>
	   </div>
	   <div class='row'>
	       <p><label for='lastname'>Last name</label>
		    <input type='text' name='lastname' id='lastname' value='' placeholder='Enter Last name' /></p>
	   </div>
        <div class='row'>
	       <p><label for='username'>PFNO</label>
		    <input type='text' name='username' id='username' value='' placeholder='Enter Username' /></p>
	   </div>
        <div class='row'>
	       <p><label for='username'>Password</label>
		    <input type='password' name='password' id='password' value='' placeholder='Enter password' /></p>
	   </div>
         <div class='row'>
	       <p><label for='email'>Email</label>
		    <input type='text' name='email' id='email' value='' placeholder='Enter Email' /></p>
	   </div>
        <div class='row'>
	       <p><label for='username'>Address</label>
		    <textarea name="address" id="address" placeholder="Enter Address"></textarea></p>
	   </div>        	 
	   <div class='row'>
	        <p><label for='phone'>Phone</label>
			 <input type='text' name='phone' id='phone' value='' placeholder='Phone' /></p>	      
	   </div>
        <div class='row'>
	       <p><label for='username'>Sex</label>
		    <select name="sex">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            </select>
            </p>
	   </div>
       <div class='row'>
	        <p><label for='monthly_due'>Monthly Due</label>
			 <input type='text' name='monthly_due' id='monthly_due' value='' placeholder='Monthly_Due' /></p>	      
	   </div>
       <div class='row'>
	        <p><label for='next_ofkin'>Next of Kin</label> <input type='text' name='next_ofkin' id='next_ofkin' value='' placeholder='Monthly_Due' /></p>	      
	   </div>
        <div class='row'>
	       <p><label for='username'>Address of Kin</label>
		     <input type='text' name='next_ofkin' id='next_ofkin' value='' placeholder='Next of Kkin' />
	        <textarea name="nextofkin_address" id="nextofkin_address" placeholder="Enter Address of Kin"></textarea></p>
      </div>
       <div class='row'>
	        <p><label for='phone'>Next of Kin Phone</label>
			 <input type='text' name='nextofkin_phone' id='nextofkin_phone' value='' placeholder='Next of Kin Phone' /></p>	      
	   </div>
       <input type="hidden" name="datetime" value="datetime" />
       <input type="hidden" name="date_ofdue" value="date_ofdue" />
	   <input type="hidden" name="actionfunction" value="saveData" />
	   <div class='row'>
	       <input type='button' id='formsubmit' name="submit" class='submit' value='Submit' />		   
	   </div>
   </form>
</div>
<div id="show_user_sec" class="user_section">
<table id='userists' cellspacing="0">
      
</table>
</div>
<div id="update_user_sec" class="user_section">

</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

c. db2.php (default db for connection)

<?php
$limit = 1;
$adjacent = 3;
$con = mysqli_connect("localhost","root","","ldbs");
if(mysqli_connect_errno()){
echo "Database did not connect";
exit();
}
?>

d. script.js (contains the javascript code for ajax and jquery frames)

 jQuery(document).ready(function(){
  jQuery('.user_section').hide();
  jQuery('#add_user_sec').show();

var left, opacity, scale; 
var animating; 
jQuery("#show_user").click(function(event){
jQuery(document).prop('title', 'Show Users');
   jQuery("#msg").html("");
   
if(animating) return false;
	animating = true;
    var section = jQuery(".user_section");
	var activesec; 
     for($i=0;$i<section.length;$i++){
	     if(jQuery(section[$i]).css('display')=="block"){
		   activesec = section[$i];
		   break;
		 }
	 }	
	 if(jQuery(this).hasClass("active")){
	   return false;
	 }
	jQuery(".navi_sec").removeClass("active");
	jQuery(this).parent().addClass("active");
	
	//show the next fieldset
	
	//hide the current fieldset with style
	jQuery(activesec).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;
			jQuery(activesec).css({'transform': 'scale('+scale+')'});
			jQuery("#show_user_sec").css({'left': left, 'opacity': opacity,'transform': 'none'});
		}, 
		duration: 800, 
		complete: function(){
			jQuery(activesec).hide();
			jQuery("#show_user_sec").show(); 
			animating = false;
			getusers();
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});

jQuery('#userists').on('click','.ajaxedit',function(){
var edituser = jQuery(this).attr('user');
jQuery(document).prop('title', 'Edit User');
if(animating) return false;
	animating = true;
	
	jQuery(".navi_sec").removeClass("active");
	//hide the current fieldset with style
	jQuery("#show_user_sec").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;
			jQuery("#show_user_sec").css({'transform': 'scale('+scale+')'});
			jQuery("#update_user_sec").css({'left': left, 'opacity': opacity,'transform': 'none'});
		}, 
		duration: 800, 
		complete: function(){
			jQuery("#show_user_sec").hide();
			   
			   
    	  jQuery.ajax({
	     url:"DbManipute.php",
                  type:"POST",
                  data:"actionfunction=editUser&user="+edituser,
        cache: false,
        success: function(response){
		  jQuery('#update_user_sec').html(response);
		  jQuery("#update_user_sec").show(); 
			animating = false;
		}
  });
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});
jQuery('#userists').on('click','.ajaxdelete',function(){
   var user = jQuery(this).attr("user");
    jQuery.ajax({
	     url:"DbManipute.php",
                  type:"POST",
                  data:"actionfunction=deleteUser&user="+user+"&page=1",
        cache: false,
        success: function(response){
		  jQuery('#userists').html(response);
		  jQuery("#msg").html("user deleted");
		}
  });
});
jQuery("#add_user").click(function(){ 
   resetform();
   jQuery(document).prop('title', 'Add User');
  jQuery("#msg").html("");
	if(animating) return false;
	animating = true;
     var activesec; 
     for($i=0;$i<section.length;$i++){
	     if(jQuery(section[$i]).css('display')=="block"){
		   activesec = section[$i];
		   break;
		 }
	 }
	 jQuery(".navi_sec").removeClass("active");
	 jQuery(this).parent().addClass("active");
	jQuery(activesec).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;
			jQuery(activesec).css({'left': left});
			jQuery("#add_user_sec").css({'transform': 'scale('+scale+')', 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			jQuery(activesec).hide();
			jQuery("#add_user_sec").show(); 
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

jQuery('#update_user_sec').on('click','#updatesubmit',function(){
     jQuery(".navi_sec a").removeClass("active");
	 var signupform = $("#update_user_sec").children("#signup");
	 var fname = jQuery(signupform).find("#firstname");
	 var lname = jQuery(signupform).find("#lastname");
	 var username = jQuery(signupform).find("#username");
	 var password = jQuery(signupform).find("#password");
	 var email = jQuery(signupform).find("#email");
	 var address = jQuery(signupform).find("#address");
 	 var phone = jQuery(signupform).find("#phone");
	 var monthly_due = jQuery(signupform).find("#monthly_due");
     if(validateform(fname,lname,username,password,email,address,phone,mothly_due)){
	    var formdata = signupform.serialize();
		jQuery.ajax({
	     url:"DbManipute.php",
                  type:"POST",
                  data:formdata,
        cache: false,
        success: function(response){
		   
		   if(response=='updated'){
		        jQuery("#show_user").trigger("click");	
				getusers();	
				jQuery("#msg").html("user Updated");
		     }
		}
		
	   });
	 }
});

 jQuery('#userists').on('click','.page-numbers',function(){
       jQuerypage = jQuery(this).attr('href');
	   jQuerypageind = jQuerypage.indexOf('page=');
	   jQuerypage = jQuerypage.substring((jQuerypageind+5));
       
	   jQuery.ajax({
	     url:"DbManipute.php",
                  type:"POST",
                  data:"actionfunction=showData&page="+jQuerypage,
        cache: false,
        success: function(response){
		   
		  jQuery('#userists').html(response);
		 
		}
		
	   });
	return false;
	});
});

jQuery("#formsubmit").click(function(){
     
	 var fname = jQuery("#firstname");
	 var lname = jQuery("#lastname");
	 var username = jQuery("#username");
	 var lname = jQuery("#password");
	 var email = jQuery("#email");
	 var address = jQuery("#address");
	 var phone = jQuery("#phone");
	 var sex = jQuery("#sex");
	 var monthly_due = jQuery("#monthly_due");
	 var next_ofkin = jQuery("#next_ofkin");
	 var nextofkin_address = jQuery("#nextofkin_address");
	 var nextofkin_phone = jQuery("#nextofkin_phone");
	var datetime = jQuery("#datetime");
	var date_ofdue = jQuery("#date_ofdue");
     if(validateform(fname,lname,username,lname,email,address,address,phone,sex,phone,sex,monthly_due,next_ofkin,
	 nextofkin_address,nextofkin_phone,datetime,date_ofdue)){
	    var formdata = jQuery("#signup").serialize();
		jQuery.ajax({
	     url:"DbManipute.php",
                  type:"POST",
                  data:formdata,
        cache: false,
        success: function(response){
		   if(response=='added'){
		        jQuery("#show_user").trigger("click");	
				getusers();		
               jQuery("#msg").html("user added");				
		     }
		}
		
	   });
	 }
});
});    
function getusers(){
jQuery.ajax({
	     url:"DbManipute.php",
                  type:"POST",
                  data:"actionfunction=showData&page=1",
        cache: false,
        success: function(response){
		  jQuery('#userists').html(response);
		  
		}
  });
 
}
function validateform(fname,lname,username,password,email,address,phone,sex,
monthly_due,next_ofkin,nextofkin_address,phone,sex,monthly_due,nextofkin_address,nextofkin_phone,
datetime,account_balance,date_ofdue){

         var emailfilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
       
		if (fname.val()=='') {
			fname.addClass('hightlight');
			return false;
		} else fname.removeClass('hightlight');
		if (lname.val()=='') {
			lname.addClass('hightlight');
			return false;
		} else lname.removeClass('hightlight');
		if (username.val()=='') {
			username.addClass('hightlight');
			return false;
		} else username.removeClass('hightlight');
		if (password.val()=='') {
			password.addClass('hightlight');
			return false;
		} else password.removeClass('hightlight');
		if (password.val()=='') {
			password.addClass('hightlight');
			return false;
		}else if(!emailfilter.test(email.val())){
		   alert("not a valid email id");
		   email.addClass('hightlight');
		   return false;
		}else address.removeClass('hightlight');
		if (address.val()=='') {
			address.addClass('hightlight');
			return false;
		} else address.removeClass('hightlight');
		if (phone.val()=='') {
			phone.addClass('hightlight');
			return false;
		} else phone.removeClass('hightlight');
		if (sex.val()=='') {
			sex.addClass('hightlight');
			return false;
		} else sex.removeClass('hightlight');
		if (monthly_due.val()=='') {
			monthly_due.addClass('hightlight');
			return false;
		} else monthly_due.removeClass('hightlight');
		if (next_ofkin.val()=='') {
			next_ofkin.addClass('hightlight');
			return false;
		} else next_ofkin.removeClass('hightlight');
		if (nextofkin_address.val()=='') {
			nextofkin_address.addClass('hightlight');
			return false;
		} else nextofkin_phone.removeClass('hightlight');
		if (nextofkin_phone.val()=='') {
			nextofkin_phone.addClass('hightlight');
			return false;
		} else nextofkin_phone.removeClass('hightlight');
		if (account_balance.val()=='') {
			account_balance.addClass('hightlight');
			return false;
		} else account_balance.removeClass('hightlight');		
		
		return true;
		
}
function resetform(){
	var fname = jQuery("#firstname");
	 var lname = jQuery("#lastname");
	 var username = jQuery("#username");
	 var lname = jQuery("#password");
	 var email = jQuery("#email");
	 var address = jQuery("#address");
	 var phone = jQuery("#phone");
	 var sex = jQuery("#sex");
	 var monthly_due = jQuery("#monthly_due");
	 var next_ofkin = jQuery("#next_ofkin");
	 var nextofkin_address = jQuery("#nextofkin_address");
	 var nextofkin_phone = jQuery("#nextofkin_phone");
	 var account_balance = jQuery("#account_balance");
	var datetime = jQuery("#datetime");
	var date_ofdue = jQuery("#date_ofdue");
	 fname.val("");
	 lname.val("");
	 email.val("");
	 address.val("");
	 phone.val("");
	 sex.val("");
	 monthly_due.val("");
	 next_ofkin.val("");
	 nextofkin_address.val("");
	 nextofkin_phone.val("");
	 account_balance.val("");
	 datetime.val("");
	 ndate_ofdue.val("");
	 
	 fname.removeClass("hightlight");
	 lname.removeClass("hightlight");
	 email.removeClass("hightlight");
	 address.removeClass("hightlight");
	 phone.removeClass("hightlight");
	 sex.removeClass("hightlight");
	 monthly_due.removeClass("hightlight");
	 next_ofkin.removeClass("hightlight");
	 nextofkin_address.removeClass("hightlight");
	 nextofkin_phone.removeClass("hightlight");
	 account_balance.removeClass("hightlight");
	 datetime.removeClass("hightlight");
	 ndate_ofdue.removeClass("hightlight");	
}

Please I need to know why the submit button is not executing insert, update and delete with the script.js

rwhite35 · March 5, 2015

L42 in DBManipulate.php, I don't see where your form has an action="#" or method="post" which would trigger the processing.

tobimichigan · March 5, 2015

@

rwhite35

thanks for your swift response. the submit input type is set to <input type='button' id='updatesubmit' class='submit' value='Update' /> button id updatesubmit in the jquery is supposed to handle the action and the post data, please see the script.js for this.

tobimichigan · March 5, 2015

@ rwhite35 . see this on script.js:

jQuery.ajax({
	     url:"DbManipute.php",
                  type:"POST",
                  data:"actionfunction=editUser&user="+edituser,
        cache: false,
        success: function(response){
		  jQuery('#update_user_sec').html(response);
		  jQuery("#update_user_sec").show(); 
			animating = false;
		}
  });
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});
jQuery('#userists').on('click','.ajaxdelete',function(){
   var user = jQuery(this).attr("user");
    jQuery.ajax({
	     url:"DbManipute.php",
                  type:"POST",
                  data:"actionfunction=deleteUser&user="+user+"&page=1",
        cache: false,
        success: function(response){
		  jQuery('#userists').html(response);
		  jQuery("#msg").html("user deleted");
		}
  });
});
jQuery("#add_user").click(function(){ 
   resetform();
   jQuery(document).prop('title', 'Add User');
  jQuery("#msg").html("");
	if(animating) return false;
	animating = true;
     var activesec; 
     for($i=0;$i<section.length;$i++){
	     if(jQuery(section[$i]).css('display')=="block"){
		   activesec = section[$i];
		   break;
		 }
	 }
	 jQuery(".navi_sec").removeClass("active");
	 jQuery(this).parent().addClass("active");
	jQuery(activesec).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;
			jQuery(activesec).css({'left': left});
			jQuery("#add_user_sec").css({'transform': 'scale('+scale+')', 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			jQuery(activesec).hide();
			jQuery("#add_user_sec").show(); 
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});
 
jQuery('#update_user_sec').on('click','#updatesubmit',function(){
     jQuery(".navi_sec a").removeClass("active");
	 var signupform = $("#update_user_sec").children("#signup");
	 var fname = jQuery(signupform).find("#firstname");
	 var lname = jQuery(signupform).find("#lastname");
	 var username = jQuery(signupform).find("#username");
	 var password = jQuery(signupform).find("#password");
	 var email = jQuery(signupform).find("#email");
	 var address = jQuery(signupform).find("#address");
 	 var phone = jQuery(signupform).find("#phone");
	 var monthly_due = jQuery(signupform).find("#monthly_due");
     if(validateform(fname,lname,username,password,email,address,phone,mothly_due)){
	    var formdata = signupform.serialize();
		jQuery.ajax({
	     url:"DbManipute.php",
                  type:"POST",
                  data:formdata,
        cache: false,
        success: function(response){
		   
		   if(response=='updated'){
		        jQuery("#show_user").trigger("click");	
				getusers();	
				jQuery("#msg").html("user Updated");
		     }
		}
		
	   });
	 }
});

tobimichigan · March 5, 2015

Any1 in the forum with a better idea?

mac_gyver · March 5, 2015

you need to debug what your code is doing, in order to find out at what point the program and data are correct and at what point they are not, in order to narrow down the problem.

also, using call_user_func() with user supplied parameters, without validating those parameters, will let a hacker run any php function. you need to validate that $actionfunction contain only and exactly one of the permitted function names.

tobimichigan · March 5, 2015

ok, will do.

rwhite35 · March 5, 2015

@tobimichigan Yeah, there is ten to the power of 2 ways to skin a cat.... I use JQuery and AJAX and have done it both ways...

Any case, check lines 82 and 92, I think you need:

contentType: 'application/x-www-form-urlencoded; charset=UTF-8'

Sign In

Jquery, Ajax, Php Mysql

Recommended Posts

tobimichigan

Link to comment

Share on other sites

rwhite35

Link to comment

Share on other sites

tobimichigan

Link to comment

Share on other sites

tobimichigan

Link to comment

Share on other sites

tobimichigan

Link to comment

Share on other sites

mac_gyver

Link to comment

Share on other sites

tobimichigan

Link to comment

Share on other sites

rwhite35

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information