I am trying to learn PHP and came across Bootstrap Form wizard and wanted to give it a try.
I have made a basic registration form which should basically INSERT the values from the form to the database.
With normal form i have successfully registered using form submit button. But with this wizard i do not have a submit button, with few research i found that this type of form is handled with jquery and so on. I needed to understand how can i go ahead and use these forms to insert data into my database with POST.
PHP Code:
<?php
session_start();
include_once 'dbConnect.php';
if(!isset($_SESSION['user']))
{
header("Location: index.php");
}
$res=mysql_query("SELECT * FROM emp_table WHERE user_id=". $_SESSION['user']."");
$userRow=mysql_fetch_array($res);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
<meta name="author" content="Coderthemes">
<link rel="shortcut icon" href="images/favicon_1.ico">
<title>Create New Customer</title>
<link rel="stylesheet" type="text/css" href="plugins/jquery.steps/demo/css/jquery.steps.css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/core.css" rel="stylesheet" type="text/css">
<link href="css/components.css" rel="stylesheet" type="text/css">
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/pages.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]-->
<script src="js/modernizr.min.js"></script>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','../www.google-analytics.com/analytics.js','ga');
ga('create', '0', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class="fixed-left">
<div id="wrapper">
<div class="topbar">
<?php include_once dirname(__FILE__) . '/includes/topbarleft.php'; ?>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="">
<?php include_once dirname(__FILE__) . '/includes/topbarpullleft.php'; ?>
<?php include_once dirname(__FILE__) . '/includes/topbarright.php'; ?>
<div class="left side-menu">
<div class="sidebar-inner slimscrollleft">
<div class="user-details">
<div class="pull-left">
<img src="images/users/avatar-1.jpg" alt="" class="thumb-md img-circle">
</div>
<div class="user-info">
<?php echo $userRow['user_login_id']; ?>
<p class="text-muted m-0"><?php echo $userRow['user_role']; ?></p>
</div>
</div>
<div id="sidebar-menu">
<ul>
<?php include_once dirname(__FILE__) . '/includes/menu.php'; ?>
<?php
if($userRow['user_role']=="Manager" || $userRow['user_role']=="Team Leader")
{
?>
<?php include_once dirname(__FILE__) . '/includes/menureporting.php'; ?>
<?php
}
?>
<?php
if($userRow['user_admin']=="Yes")
{
?>
<?php include_once dirname(__FILE__) . '/includes/menuadmin.php'; ?>
<?php
}
?>
</ul>
<div class="clearfix">
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-page">
<div class="content">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4 class="page-title">Create New Customer</h4>
<ol class="breadcrumb">
<li>SystemTech</li>
<li>Customers</li>
<li class="active">Create New Customer</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<h4 class="m-t-0 header-title"><b>Creating new customer</b></h4>
<form id="wizard-validation-form" method="post" action="createcust.php">
<div>
<h3>Personal Detail</h3>
<section>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_first_name">First name</label>
<div class="col-lg-10">
<input class="required form-control" id="cust_first_name" name="cust_first_name" type="text">
</div>
</div>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_last_name">Last Name</label>
<div class="col-lg-10">
<input class="required form-control" id="cust_last_name" name="cust_last_name" type="text">
</div>
</div>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_email_id">Email ID</label>
<div class="col-lg-10">
<input type="email" class="required form-control" id="cust_email_id" placeholder="Email" name="cust_email_id">
</div>
</div>
</section>
<h3>Contact Detail</h3>
<section>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_contact_no">Contact Number</label>
<div class="col-lg-10">
<input type="text" placeholder="" data-mask="(999) 999-9999" class="required form-control" name="cust_contact_no"> <span class="font-13 text-muted">(999) 999-9999</span>
</div>
</div>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_alt_contact_no">Alt. Contact Number</label>
<div class="col-lg-10">
<input type="text" placeholder="" data-mask="(999) 999-9999" class="required form-control" name="cust_alt_contact_no"> <span class="font-13 text-muted">(999) 999-9999</span>
</div>
</div>
</section>
<h3>Billing Address</h3>
<section>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_bill_addr">Address</label>
<div class="col-lg-10">
<input id="cust_bill_addr" name="cust_bill_addr" type="text" class="form-control" value="Customer Address">
</div>
</div>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_country">Country</label>
<div class="col-lg-10">
<input id="cust_country" name="cust_country" type="text" class="required form-control">
</div>
</div>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_state">State</label>
<div class="col-lg-10">
<input id="cust_state" name="cust_state" type="text" class="required form-control">
</div>
</div>
<div class="form-group clearfix">
<label class="col-lg-2 control-label" for="cust_zip">ZIP Code</label>
<div class="col-lg-10">
<input id="cust_zip" name="cust_zip" type="text" class="required form-control">
</div>
</div>
</section>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>var resizefunc = [];</script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/detect.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/jquery.slimscroll.js"></script>
<script src="js/jquery.blockUI.js"></script>
<script src="js/waves.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.core.js"></script>
<script src="js/jquery.app.js"></script>
<script src="plugins/bootstrapvalidator/dist/js/bootstrapValidator.js" type="text/javascript"></script>
<script src="plugins/jquery.steps/build/jquery.steps.min.js" type="text/javascript"></script>
<script type="text/javascript" src="plugins/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="pages/jquery.wizard-init.js" type="text/javascript"></script>
<script src="plugins/autoNumeric/autoNumeric.js" type="text/javascript"></script>
<script type="text/javascript">jQuery(function($) {
$('.autonumber').autoNumeric('init');
});
</script>
<script src="plugins/bootstrap-inputmask/bootstrap-inputmask.min.js" type="text/javascript"></script>
</body>
</html>
jquery:
! function(a) {
"use strict";
var b = function() {};
b.prototype.createBasic = function(a) {
return a.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft"
}), a
}, b.prototype.createValidatorForm = function(a) {
return a.validate({
errorPlacement: function(a, b) {
b.after(a)
}
}), a.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function(b, c, d) {
return a.validate().settings.ignore = ":disabled,:hidden", a.valid()
},
onFinishing: function(b, c) {
return a.validate().settings.ignore = ":disabled", a.valid()
},
onFinished: function(a, b) {
type:"POST"
alert("Submitted!")
}
}), a
}, b.prototype.createVertical = function(a) {
return a.steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "fade",
stepsOrientation: "vertical"
}), a
}, b.prototype.init = function() {
this.createBasic(a("#basic-form")), this.createValidatorForm(a("#wizard-validation-form")), this.createVertical(a("#wizard-vertical"))
}, a.FormWizard = new b, a.FormWizard.Constructor = b
}(window.jQuery),
function(a) {
"use strict";
a.FormWizard.init()
}(window.jQuery);
You can serialize() form using it's ID, and send it via POST to a php file that will save them to the DB
$.ajax({
url: "save_to_db.php",
data: $("#form_to_send").serialize(),
type: "POST",
success: function (result) {
},
error: function (xhr, status, errorThrown) {
alert("Sorry, there was a problem!");
console.log("Error: " + errorThrown);
console.log("Status: " + status);
console.dir(xhr);
}
});
$field1 = $_POST['field1'] and so on...
Related
I am trying to add jQuery datepicker function here. But I am getting an error like 'Datepicker is not a function'. please let me know what went wrong. I went through other questions and tried rectifying but didnot work.
<script>
$(function () {
var $j = jQuery.noConflict();
$j("#From").datepicker();
});
//$(function () {
// $('#datetimepicker2').datetimepicker({
// });
//});
</script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row pb-20px">
<label id="From1" class="col-sm-1">From</label>
<input type="text" class="col-sm-2" id="From" />
<label id="To" class="col-sm-1">To</label>
<input type="text" class="col-sm-2" id="To" />
</div>
<div class="row">
<div class='col-sm-5'>
<div class="form-group">
<label id="From1" class="col-sm-2">From</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Entire cshtml page,
<!DOCTYPE html>
<script>
$(function () {
var $j = jQuery.noConflict();
$j("#From").datepicker();
});
//$(function () {
// $('#datetimepicker2').datetimepicker({
// });
//});
</script>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading
fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row pb-20px">
<label id="From1" class="col-sm-1">From</label>
<input type="text" class="col-sm-2" id="From" />
<label id="To" class="col-sm-1">To</label>
<input type="text" class="col-sm-2" id="To" />
</div>
<div class="row">
<div class='col-sm-5'>
<div class="form-group">
<label id="From1" class="col-sm-2">From</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Did you include datepicker JS file in the DOM? Can you update latest code?
check below snippet. its working
$(function () {
var $j = jQuery.noConflict();
$j(".datepicker").datepicker();
});
//$(function () {
// $('#datetimepicker2').datetimepicker({
// });
//});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Reports</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<!-- Form Starts-->
<form name="PTTReport" style="padding-top:20px">
<div class="panel panel-primary">
<div style="padding-bottom:25px" class="panel-heading fixed_panel">
<span>Report Filters</span>
</div>
<div class="panel-body">
<div class="row pb-20px">
<label id="From1" class="col-sm-1">From</label>
<input type="text" class=" datepicker col-sm-2" id="From" />
<label id="To" class="col-sm-1">To</label>
<input type="text" class="datepicker col-sm-2" id="To" />
</div>
<div class="row">
<div class='col-sm-5'>
<div class="form-group">
<label id="From1" class="col-sm-2">From</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control datepicker" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Try this instead :
$(function() {
var j = jQuery.noConflict();
j("#From").datepicker();
});
So I've been trying to make a calendar for a church system where they can add reservations with the use of the calendar and I'm having a hard time making the data I add "stick" to the calendar itself.
Any help would be greatly appreciated.
<?php
include ('config1.php');
if(isset($_SESSION['username'])) {
$message = "Login First!";
echo "<script type='text/javascript'>alert('$message');</script>";
}
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>San Isidro Labrador Parish </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<!-- Custom styling plus plugins -->
<link href="css/custom.css" rel="stylesheet">
<link href="css/icheck/flat/green.css" rel="stylesheet">
<link href="css/calendar/fullcalendar.css" rel="stylesheet">
<link href="css/calendar/fullcalendar.print.css" rel="stylesheet" media="print">
<script src="js/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="../assets/js/ie8-responsive-file-warning.js"></script>
<![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3>
Calender
<small>
Click to add/edit events
</small>
</h3>
</div>
<div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12">
<div class="x_panel">
<div class="x_title">
<h2>Calender Events <small>Sessions</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>Settings 1
</li>
<li>Settings 2
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id='calendar'></div>
</div>
</div>
</div>
</div>
</div>
<!-- footer content -->
<footer>
</footer>
<!-- /footer content -->
</div>
<!-- Start Calender modal -->
<div id="CalenderModalNew" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">New Calender Entry</h4>
</div>
<div class="modal-body">
<div id="testmodal" style="padding: 5px 20px;">
<form id="antoform" class="form-horizontal calender" role="form">
<div class="form-group">
<label class="col-sm-3 control-label">Venue</label>
<div class="col-sm-9">
</div>
<select name="Venue_idVenue" id ="Venue_idVenue" required = "required">
<option value="1" name ="Garden" style ="height:55px;">Garden</option>
<option value="2" name ="Chapel" style ="height:55px;">Chapel</option>
<option value="3" name ="Church" style ="height:55px;">Church</option>
<option value="4" name ="New Bulding" style ="height:55px;">New Building</option>
<option value="5" name ="Seminar Hall" style ="height:55px;">Seminar Hall</option>
</select>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Sacrament</label>
<div class="col-sm-9">
</div>
<select name="Sacrament_idSacrament" id ="Sacrament_idSacrament" class = "form_control">
<option value="1" name ="Baptsim" style ="height:55px;">Baptism</option>
<option value="2" name ="Confirmation" style ="height:55px;">Confirmation</option>
<option value="3" name ="Marriage" style ="height:55px;">Marriage</option>
</select>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Reservation Date</label>
<div class="col-sm-9">
<input id="reservation_date" class="datepicker form-control col-md-7 col-xs-12" name="reservation_date" placeholder="Reservation Date" required="required" type="date"/>
<!-- <textarea class="form-control" style="height:55px;" id="reservation_date" name="reservation_date"></textarea> -->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Reservation Time</label>
<div class="col-sm-9">
<input id="reservation_time" class="datepicker form-control col-md-7 col-xs-12" name="reservation_time" placeholder="Reservation Time" required="required" type="time"/>
<!--<textarea class="form-control" style="height:55px;" id="reservation_time" name="reservation_time"></textarea> -->
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default antoclose" data-dismiss="modal">Close</button>
<input type="submit" name="submit" class="btn btn-primary antosubmit"value="Save changes" onClick="validinfo()"></input>
</div>
</div>
</div>
</div>
<div id="CalenderModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel2">Edit Calender Entry</h4>
</div>
<div class="modal-body">
<div id="testmodal" style="padding: 5px 20px;">
<form id="antoform" class="form-horizontal calender" role="form">
<input type = "hidden" name = "submitted" value = "true"/>
<div class="form-group">
<label class="col-sm-3 control-label">Venue</label>
<div class="col-sm-9">
</div>
<select name="idVenue2" id ="idVenue2" required = "required">
<option value="1" name ="Garden" style ="height:55px;">Garden</option>
<option value="2" name ="Chapel" style ="height:55px;">Chapel</option>
<option value="3" name ="Church" style ="height:55px;">Church</option>
<option value="4" name ="New Building" style ="height:55px;">New Building</option>
<option value="5" name ="Seminar Hall" style ="height:55px;">Seminar Hall</option>
</select>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Sacrament</label>
<div class="col-sm-9">
</div>
<select name="Sacrament_idSacrament2" id ="Sacrament_idSacrament2" class = "form_control">
<option value="1" name ="Baptism" style ="height:55px;">Baptism</option>
<option value="2" name ="Confirmation" style ="height:55px;">Confirmation</option>
<option value="3" name ="Marriage" style ="height:55px;">Marriage</option>
</select>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Reservation Date</label>
<div class="col-sm-9">
<input id="reservation_date2" class="datepicker form-control col-md-7 col-xs-12" name="reservation_date2" placeholder="Reservation Date" required="required" type="date"/>
<!-- <textarea class="form-control" style="height:55px;" id="reservation_date" name="reservation_date"></textarea> -->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Reservation Time</label>
<div class="col-sm-9">
<input id="reservation_time2" class="datepicker form-control col-md-7 col-xs-12" name="reservation_time2" placeholder="Reservation Time" required="required" type="time"/>
<!--<textarea class="form-control" style="height:55px;" id="reservation_time" name="reservation_time"></textarea> -->
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default antoclose2" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary antosubmit2">Save changes</button>
</div>
</div>
</div>
</div>
<div id="fc_create" data-toggle="modal" data-target="#CalenderModalNew"></div>
<div id="fc_edit" data-toggle="modal" data-target="#CalenderModalEdit"></div>
<!-- End Calender modal -->
<!-- /page content -->
</div>
</div>
<div id="custom_notifications" class="custom-notifications dsp_none">
<ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group">
</ul>
<div class="clearfix"></div>
<div id="notif-group" class="tabbed_notifications"></div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/nprogress.js"></script>
<!-- chart js -->
<script src="js/chartjs/chart.min.js"></script>
<!-- bootstrap progress js -->
<script src="js/progressbar/bootstrap-progressbar.min.js"></script>
<script src="js/nicescroll/jquery.nicescroll.min.js"></script>
<!-- icheck -->
<script src="js/icheck/icheck.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/calendar/fullcalendar.min.js"></script>
<script>
$(window).load(function () {
var date = new Date();
var d = date.getDate('Y-m-d');
var m = date.getMonth();
var y = date.getFullYear();
var started;
var categoryClass;
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next, today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '<?php echo date('Y-M-d'); ?>',
editable: true,
timeFormat: 'h:mmA',
selectable: true,
selectHelper: true,
eventLimit: true,
select: function (start, end, allDay) {
$('#fc_create').click();
started = start;
ended = end
$(".antosubmit").on("click", function () {
var venue = $("#title").val();
if (end) {
ended = end
}
categoryClass = $("#event_type").val();
if (venue) {
calendar.fullCalendar('renderEvent', {
title: title,
start: started,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
$('#title').val('');
calendar.fullCalendar('unselect');
$('.antoclose').click();
return false;
});
},
eventClick: function (calEvent, jsEvent, view) {
//alert(calEvent.title, jsEvent, view);
$('#fc_edit').click();
$('#title2').val(calEvent.venue);
categoryClass = $("#event_type").val();
$(".antosubmit2").on("click", function () {
calEvent.title = $("#title2").val();
calendar.fullCalendar('updateEvent', calEvent);
$('.antoclose2').click();
});
calendar.fullCalendar('unselect');
},
editable: true,
events: [
<?php
include('config1.php');
$select = mysqli_query($conn, "select venue.venue_type, reservation.reservation_date, reservation.reservation_time from venue, reservation where venue.idVenue = reservation.idReservation;");
$number = mysqli_num_rows($select);
$row = mysqli_fetch_assoc($select);
$venue_type = $row['venue_type'];
$reservation_date = $row['reservation_date'];
$reservation_time = $row['reservation_time'];
$i = 1;
while($row = mysqli_fetch_array($select))
{
if($i <= $number) {
?>
{
title: '<?php echo $row['venue_type']; ?>',
start: '<?php echo $row['reservation_date'].'T'.$row['reservation_time']; ?>'
},
<?php
}
else
{
?>
{
title: '<?php echo $row['venue_type']; ?>',
start: '<?php echo $row['reservation_date'].'T'.$row['reservation_time']; ?>'
}
<?php
}
$i = $i + 1;
}
?>
<?php
if(!empty($_POST['submit']))
{
global $conn;
$reservation_date1 = $_POST["reservation_date"];
$reservation_time1 = $_POST["reservation_time"];
$Seminar_sched_idSeminar_sched1 = $_POST['Seminar_sched_idSeminar_sched'];
//$insertRes = mysqli_query($conn, "INSERT INTO reservation (Venue_idVenue, Sacrament_idSacrament, reservation_date, reservation_time) VALUES ('".$_POST[venue_id]."', '".$_POST[sacrament_id]."', '$reservation_date1','$reservation_time1')");
$insertRes = mysqli_query($conn, "INSERT INTO reservation (Venue_idVenue, Sacrament_idSacrament, reservation_date, reservation_time) VALUES ('".$_POST[venue_id]."', '".$_POST[sacrament_id]."', '$reservation_date1','$reservation_time1')");
echo'<script language="java script">';
echo'alert("Data Saved!")';
echo'</script>';
if($insertRes)
{
printf("Error: %s\n", mysqli_error(conn));
exit();
}
}
mysqli_close($conn);
?>
]
});
});
</script>
</body>
</html>
I am trying to edit my database table using jquery loaded ajax modal. and when i trigger the edit form using ajax, the bootstrap datepicker and selct2 plugin is not working but the same datepicker and select2 plugin is working fine inside the page. and i am also trying to bind the jquery inside the modal but its not working too. here is my code for the ajax loaded popup form.
<?php
$edit_data = $this->db->get_where('staff' , array('staff_id' => $param2) )->result_array();
foreach ( $edit_data as $row):
?>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title" >
<i class="fa fa-plus-circle"></i>
<?php echo get_phrase('edit_staff');?>
</div>
</div>
<div class="panel-body">
<?php echo form_open(base_url() . 'index.php?admin/staffs/do_update/'.$row['staff_id'] , array('autocomplete'=>'off','target'=>'_top'));?>
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('staff_name');?></label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="program_name" value="<?php echo $row['name']; ?>">
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('date_of_birth_');?> <i class="ion-android-calendar"></i></label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control bootstrap-daterangepicker-basic" id="datepicker" name="dob" value="<?php echo $row['dob']; ?>">
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('address');?> </label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="address" value="<?php echo $row['address']; ?> ">
</div>
</div>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('phone');?> </label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="phone" value="<?php echo $row['phone']; ?>">
</div>
</div>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('email');?> </label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="email" value="<?php echo $row['email']; ?>">
</div>
</div>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('sex');?></label>
<div class="col-sm-8">
<select name="sex" style="width:100%;">
<option value="1" <?php if($row['sex'] == '1')echo 'selected';?>>
<?php echo get_phrase('male');?>
</option>
<option value="2" <?php if($row['sex'] == '2')echo 'selected';?>>
<?php echo get_phrase('female');?>
</option>
</select>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('department');?></label>
<div class="col-sm-8">
<select name="department_id" class="chosen-select">
<?php
$departments = $this->db->get('department')->result_array();
foreach($departments as $row2):
?>
<option value="<?php echo $row2['department_id'];?>"
<?php if($row['department_id'] == $row2['department_id'])echo 'selected';?>>
<?php echo $row2['name'];?>
</option>
<?php
endforeach;
?>
</select>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('designation');?> </label>
<div class="col-sm-8">
<div class="inputer">
<div class="input-wrapper">
<input type="text" class="form-control" name="post" value="<?php echo $row['post']; ?>">
</div>
</div>
</div>
</div><!--.form-group-->
<div class="form-group row">
<label class="col-sm-4 control-label"><?php echo get_phrase('is_teacher');?></label>
<div class="col-sm-8">
<select name="is_teacher" style="width:100%;">
<option value="1" <?php if($row['is_teacher'] == '1')echo 'selected';?>>
<?php echo get_phrase('Yes');?>
</option>
<option value="2" <?php if($row['is_teacher'] == '0')echo 'selected';?>>
<?php echo get_phrase('No');?>
</option>
</select>
</div>
</div><!--.form-group-->
<br/><br/>
<div class="form-group row">
<div class="col-sm-offset-3 col-sm-5">
<button type="submit" class="btn btn-info"><i class="fa fa-pencil"></i> <?php echo get_phrase('edit_staff');?></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<?php
endforeach;
?>
<script type="text/javascript">
$("#datepicker").FormsPickers.init();
</script>
and below is my code for generating ajax loaded popup ..
<script type="text/javascript">
function showAjaxModal(url)
{
// SHOWING AJAX PRELOADER IMAGE
jQuery('#modal_ajax .modal-body').html('<div style="text-align:center;margin-top:200px;"><img src="assets/images/preloader.gif" /></div>');
// LOADING THE AJAX MODAL
jQuery('#modal_ajax').modal('show', {backdrop: 'true'});
// SHOW AJAX RESPONSE ON REQUEST SUCCESS
$.ajax({
url: url,
success: function(response)
{
jQuery('#modal_ajax .modal-body').html(response);
}
});
}
</script>
<!-- (Ajax Modal)-->
<div class="modal fade" id="modal_ajax">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><?php echo $system_name;?></h4>
</div>
<div class="modal-body" style="height:500px; overflow:auto;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
this is the include_buttom.php ...
<script src="assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="assets/globals/plugins/minicolors/jquery.minicolors.min.js"></script>
<script src="assets/globals/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/globals/plugins/clockface/js/clockface.js"></script>
<script src="assets/globals/plugins/chosen/chosen.jquery.min.js"></script>
<script src="assets/globals/plugins/selectize/dist/js/standalone/selectize.min.js"></script>
<script src="assets/globals/plugins/multiselect/js/jquery.multi-select.js"></script>
<script src="assets/globals/plugins/quicksearch/dist/jquery.quicksearch.min.js"></script>
<script src="assets/globals/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="assets/globals/plugins/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"></script>
<script src="assets/globals/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="assets/globals/plugins/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<!-- PLUGINS INITIALIZATION AND SETTINGS -->
<script src="assets/globals/scripts/forms-select.js"></script>
<script src="assets/globals/scripts/forms-pickers.js"></script>
<script src="assets/globals/scripts/forms-wizard.js"></script>
<!-- END PLUGINS INITIALIZATION AND SETTINGS -->
<!-- PLEASURE -->
<script src="assets/globals/js/pleasure.js"></script>
<!-- ADMIN 1 -->
<script src="assets/admin1/js/layout.js"></script>
<script>
$(document).ready(function () {
Pleasure.init();
Layout.init();
FormsPickers.init();
FormsSelect.init();
Index.init();
});
</script>
Actually you calling the assest in wrong path. Means you are missing base_url() word in your src URL
Your code should be
<script src="<?php echo base_url() ?>assets/globals/plugins/pn...
this is the include_buttom.php ...
<script src="assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="assets/globals/plugins/minicolors/jquery.minicolors.min.js"></script>
<script src="assets/globals/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/globals/plugins/clockface/js/clockface.js"></script>
<script src="assets/globals/plugins/chosen/chosen.jquery.min.js"></script>
<script src="assets/globals/plugins/selectize/dist/js/standalone/selectize.min.js"></script>
<script src="assets/globals/plugins/multiselect/js/jquery.multi-select.js"></script>
<script src="assets/globals/plugins/quicksearch/dist/jquery.quicksearch.min.js"></script>
<script src="assets/globals/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="assets/globals/plugins/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"></script>
<script src="assets/globals/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="assets/globals/plugins/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
<!-- PLUGINS INITIALIZATION AND SETTINGS -->
<script src="assets/globals/scripts/forms-select.js"></script>
<script src="assets/globals/scripts/forms-pickers.js"></script>
<script src="assets/globals/scripts/forms-wizard.js"></script>
<!-- END PLUGINS INITIALIZATION AND SETTINGS -->
<!-- PLEASURE -->
<script src="assets/globals/js/pleasure.js"></script>
<!-- ADMIN 1 -->
<script src="assets/admin1/js/layout.js"></script>
<script>
$(document).ready(function () {
Pleasure.init();
Layout.init();
FormsPickers.init();
FormsSelect.init();
Index.init();
});
</script>
1.
first of all give exact path to all of your assets as
<script src="<?php echo base_url() ?>assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
or
<script src="<?php echo base_url('assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js') ?>"></script>
2.
what following codes do at your include_button page??
FormsPickers.init();
FormsSelect.init();
you are initializing FormsPicker with selector ID which can be multiple since you are looping there. change that selector to class name.
<script type="text/javascript">
$("#datepicker").FormsPickers.init();
</script>
to
<script type="text/javascript">
$(".class_name").FormsPickers.init();
</script>
3.
Best initialize choosen and datepicker by yourself as following in your ajax loaded popup form
<script type="text/javascript">
$(".choosen_class").chosen();
$(".datepicker_class').datepicker();
</script>
by doing these i hope your problem should be solved. If still problem persist, do ask us :)
This is the html code I have written
<html>
<head>
<!-- Load jQuery and the validate plugin -->
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="datepicker.css">
<body>
<h1> </h1>
<div class="container">
<div class="row">
<div class="col-sm-6">
<form id="addMaterial-form">
<div class="col-sm-12">
<div class="form-group col-sm-offset-4 col-sm-8">
<label for="materialCode">Material Code</label>
<input type="text" class="form-control " id="materialCode" placeholder="Enter Material Code" name="materialCode"/>
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-sm-offset-4 col-sm-8">
<label for="job">Description</label>
<textarea class="form-control " rows="5" id="description" placeholder="Enter Something" name="description"></textarea>
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-sm-offset-4 col-sm-8">
<label for="purchaseDate">Date Of Purchase</label>
<input type="text" class="form-control " id="purchaseDate" placeholder="Date of Purchase" name="purchaseDate"/>
</div>
</div>
<div class="col-sm-12">
<div class="form-group col-sm-offset-4 col-sm-8">
<label for="stock">Stock</label>
<input type="text" class="form-control " id="stock" placeholder="Enter Stock" name="stock"/>
</div>
</div>
<div class="col-sm-12">
<button type="submit" id="submitButton" class="col-sm-offset-6 col-sm-4 btn btn-default">Save</button>
<div class="col-sm-12">
<span class="label label-danger col-sm-offset-4 col-sm-4 " id="messageFromServer" ></span>
</div>
</div>
</form>
</div>
</div>
<script src="jquery-1.11.1.js"></script>
<script src="jquery.validate.js"></script>
<script src="datepicker.js"></script>
<script type="text/javascript">
// When the document is ready
$(document).ready(function () {
$('#purchaseDate').datepicker({
format: "dd/mm/yyyy",
todayHighlight:true,
autoclose:true,
endDate:'+0d'
});
});
$('#addMaterial-form').submit(function(event) {
event.preventDefault();
alert("gonna do");
$.post('/insertMaterial', {"materialCode": "78","stock": "78","description": "fhfhgf","purchaseDate": "09/05/2013"} );
event.preventDefault();
});
</script>
</body>
</html>
The issue is whenever I click on submit I get an internal server error.The server error can be removed by changing post function to
$.post('/insertMaterial', JSON.stringify({"materialCode": "78","stock": "78","description": "fhfhgf","purchaseDate": "09/05/2013"}) );
But at the server side I am unable to extract the form params using the above method I am getting only null values there.The server side is done in dropwizard framework
#POST
public String addNewMaterial(#FormParam("materialCode") String materialCode, #FormParam("description") String description, #FormParam("purchaseDate") Date date, #FormParam("stock") double stock) {
System.out.println("got " + materialCode + description + date + stock);
return "OK";
}
I tried a downloaded code for auto-suggest search box but it didn't work. It does not display anything from my database. I'm still new in this programming language especially in using AJAX and JavaScript.
Here's my code:
dbcon2.php
<?php
$con2['host'] = 'localhost';
$con2['user'] = 'root';
$con2['pass'] = 'thirteen';
$con2['db'] = 'pis';
$sel2 = mysql_connect($con2['host'], $con2['user'], $con2['pass']);
mysql_select_db($con2['db'], $sel2);
mysql_set_charset("utf-8");
$datab2 = $con2['db'];?>
set_creditlimit.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Autocomplete search using php, mysql and ajax</title>
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
<script type="text/javascript" src="assets/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if (searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click", function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
var decoded = $("</div>").html($name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e){
var $clicked = $(e.target);
if (! $clicked.hasClass("search")) {
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
</script>
</head>
<body>
<div id="page-wrapper">
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h2>ACL</h2>
</div> <!-- <div class="col-md-12"> -->
</div> <!-- <div class="row"> -->
<hr />
<div class="row">
<div class="col-md-12">
<!-- Start of Form -->
<div class="panel panel-success">
<div class="panel-heading">
Set-up Allowable Credit Limit
</div> <!-- <div class="panel-heading"> -->
<!-- End of Heading -->
<!-- Start of Body -->
<div class="panel-body">
<form class="form-horizontal">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<label>Search Employee:</label>
<input type="text" id="searchid" placeholder="Search Employee" class="search">
</div>
<div id="result"></div>
</div>
<br />
<!-- ------------- -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<label>Position:</label>
<input class="form-control" disabled>
</div>
</div>
<br />
<!-- ------------- -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<label>Department:</label>
<input class="form-control" disabled>
</div>
</div>
<br />
<!-- ------------- -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<label>Business Unit:</label>
<input class="form-control" disabled>
</div>
</div>
<br />
<!-- ------------- -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<label>Allowed Credit Limit:</label>
<input class="form-control">
</div>
</div>
<br />
<br />
<!-- ------------- -->
<div class="control-group">
<div class="controls">
<center>
<button class="btn btn-success btn-lg"><i class="glyphicon glyphicon-hand-right fa-1x"> Submit</i></button>
</center>
</div>
</div>
</form>
</div> <!-- <div class="panel-body"> -->
</div> <!-- <div class="panel panel-success"> -->
</div> <!-- <div class="col-md-12"> -->
</div> <!-- <div class="row"> -->
</div> <!-- <div id="page-inner"> -->
</div> <!-- <div id="page-wrapper"> -->
</body>
</html>
search.php
<?php
include('dbcon2.php');
if ($_POST)
{
$q = $_POST['search'];
$sql_res = mysql_query("SELECT emp_id, name from employee3 where emp_id like '%$q%' or name like '%$q%' order by emp_id LIMIT 5 ");
while ($row = mysql_fetch_array($sql_res))
{
$emp_id = $row['emp_id'];
$name = $row['name'];
$b_emp_id = '<strong>'.$q.'</strong>';
$b_name = '<strong>'.$q.'</strong>';
$fina_emp_id = str_ireplace($q, $b_emp_id, $emp_id);
$final_name = str_ireplace($q, $b_name, $name);
?>
<div class="show" align="left">
<span class="name"><?php echo $fina_emp_id; ?></span>
</div>
<?php
}
}
?>
You are passing the wrong data format in the ajax call.
It should be like this:
data: { search: searchid }
try this and it should work i believe.
Refer this: http://api.jquery.com/jquery.ajax/