<!DOCTYPE html>
<html>
<head>
<title>Nor-Avetisyan Admin</title>
<link rel="stylesheet" href="<?php echo URL ?>views/admin/css/navi.css">
<link rel="stylesheet" href="<?php echo URL ?>views/admin/css/style.css">
<script src="<?php echo URL ?>views/js/jquery-2.0.1.min.js"></script>
<script type="text/javascript" src="<?php echo URL ?>views/admin/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea"
});
</script>
<script>
$(document).ready(function() {
$('.n_warning,.n_ok,.n_error').hide();
$(document).on('click', '.delete', function(e) {
e.preventDefault();
var id = $(this).attr('id'),
url = document.URL;
$('.n_warning').fadeOut(500);
$('.n_warning').fadeIn(500);
$('.n_warning').html('<p>Are you sure? <button class=\"yes\">YES</button><button class=\"no\">NO</button></p>');
$('.yes').click(function(){
$.ajax({
type: 'POST',
url: '/admin/delete',
data: {
id:id
},
success: function(data){
$('#'+id).fadeOut(500);
$('#adm-notification').html(data);
}
});
setInterval(window.location = url,1000);
});
$('.no').click(function(){
$('.n_warning').fadeOut(500);
});
});
$('.button-save').click(function(b){
b.preventDefault();
var title = $('#title').val(),
category = $('#category').val(),
file = $('#file').val(),
short_content = tinyMCE.get('short_content').getContent(),
content = tinyMCE.get('content').getContent(),
date = $('#date').val(),
language = $('#language').val();
alert(short_content);
$.ajax({
type: 'POST',
url: '/admin/save',
data: {
title:title,
category:category,
file:file,
short_content:short_content,
content:content,
date:date,
language:language
},
success: function(data){
$('.adm-notification').html(data);
}
});
});
});
</script>
</head>
<body>
<?php
$id = mysql_real_escape_string($_GET['id']);
$lang = mysql_real_escape_string($_GET['lang']);
$query_edit = mysql_query("SELECT id, category, title, img, short_content, content, date, lang FROM `news` WHERE id='$id' AND lang='$lang'");
//echo $id;
?>
<div class="wrap">
<div id="header">
<div id="top">
<div class="left">
<p>Welcome, <strong><?php echo $_SESSION['user'];?></strong> [ logout ]</p>
</div>
<div class="right">
<div class="align-right">
<p>Avetisyan | Admin Panel</p>
</div>
</div>
</div>
<div id="nav">
<?php include '/views/admin/upper-menu.php'; ?>
</div>
</div>
<div id="content">
<div id="sidebar">
<div class="box">
<div class="h_title">› Pages</div>
<?php include '/views/admin/left-menu.php'; ?>
</div>
</div>
<div id="main">
<div class="full_w">
<div class="adm-notification"></div>
<div class="n_error"><p></p></div>
<?php
while($edit = mysql_fetch_array($query_edit)){
print "
<h2>".$edit['lang']." - ".$edit['title']."</h2>
<div class=\"entry\">
<div class=\"sep\"></div>
</div>
<form action=\"\" method=\"post\">
<div class=\"element\">
<label for=\"name\">Page title <span class=\"red\">(required)</span></label>
<input id=\"title\" name=\"name\" value=".$edit['title']." class=\"text\" />
</div>
<div class=\"element\">
<label for=\"category\">Category <span class=\"red\">(required)</span></label>
<input id=\"category\" name=\"category\" value=".$edit['category']." class=\"text\" />
</div>
<div class=\"element\">
<label for=\"attach\">Attachments</label>
<input type=\"file\" id=\"file\" name=\"attach\" />
</div>
<div class=\"element\">
<label for=\"short-content\">Short content <span class=\"red\">(required)</span></label>
<textarea name=\"short_content\" id=\"short_content\" class=\"textarea\" rows=\"10\">".$edit['short_content']."</textarea>
</div>
<div class=\"element\">
<label for=\"content\">Long content <span class=\"red\">(required)</span></label>
<textarea name=\"content\" id=\"long_content\" class=\"textarea\" rows=\"10\">".$edit['content']."</textarea>
</div>
<div class=\"element\">
<label for=\"date\">Date <span class=\"red\">(required)</span></label>
<input id=\"date\" name=\"date\" class=\"text\" value=".$edit['date']." />
</div>
<div class=\"element\">
<label for=\"language\">Language <span class=\"red\">(required)</span></label>
<input id=\"language\" name=\"language\" value=".$edit['lang']." class=\"text\" />
</div>
<div class=\"entry\">
<button type=\"submit\" id=\"button-save\" class=\"add button-save\">Save page</button>
</div>
</form>
";
}
?>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<div class="left">
<p>Webex Technologies LLC | Admin Panel: Avetisyan</p>
</div>
<div class="right">
</div>
</div>
</div>
</body>
</html>
This is my code.. I'm trying to get value of textareas (there are two of them). But its showing error :
Uncaught TypeError: Cannot call method 'getContent' of undefined
TinyMCE version is TinyMCE 4.0
Please give me solution, i need to solve this today as well. Thanks!!
Related
I am trying to create a form, where all fields have to be filled in, before it can be successfully submitted.
So, for example, I have some logic, where, if an error occurs, the error counter increments and if the counter doesn't equal 0, then the form doesn't submit and an alert box appears, telling the user that there are some empty fields that need filling. That is the intended behaviour. However, when I try to submit it again, it successfully submits, even though there are errors.
If it makes it easier, here's the temporary URL for the web page in question: http://176.32.230.49/cecc.co.uk/add-season.php
Here is my code:
jQuery (the code in question)
$("#season-submit").on('click', function(e) {
e.preventDefault();
var errorFree = 0;
//var competitionEntries = $(".text-box").val();
// if ($("#season-form").find(competitionEntries).val() == "") {
// competitionEntries.val("Illegals");
$(".text-box").each(function() {
if ($(this).val() == "" && !($(this).siblings(".error-box").is(":visible"))) {
var fieldName = $(this).siblings(".error-box").attr("id");
fieldName = fieldName.substr(0, fieldName.indexOf('-'));
fieldName = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
//console.log($(this).siblings(".error-box").attr("id"));
if (fieldName == "Competition") {
$(this).siblings(".error-box").text("Which " + fieldName + "?").slideDown();
errorFree++;
} else {
$(this).siblings(".error-box").text("Please enter " + fieldName + "...").slideDown();
errorFree++;
}
} else if ($(this).val() != "" && $(this).siblings(".error-box").is(":visible")) {
$(this).siblings(".error-box").slideUp();
}
});
$(".dpt").each(function() {
var dateTimeValue = $(this).val();
if (dateTimeValue.length == 16 && isValid(dateTimeValue)) {
var day = parseFloat(dateTimeValue.substring(0,2));
var month = parseFloat(dateTimeValue.substring(3,5)) - 1;
var year = parseFloat(dateTimeValue.substring(6,10));
var hour = parseFloat(dateTimeValue.substring(11,13));
var minute = parseFloat(dateTimeValue.substring(14,16));
dateTimeValue = new Date(year, month, day, hour, minute);
} else {
errorFree++;
$(this).siblings(".error-box").text("Stop trying to be clever...").slideDown();
}
});
if (errorFree == 0) {
$("#season-form").submit();
} else {
console.log("Ride this way...");
alert("Not all entries are valid. Please correct them.");
}
//span2 dpt
// }
// $("#season-form").find(competitionEntries).val("Illegals");
console.log("Oh, she wasn't");
});
HTML
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>CECC | Add Season</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/flexnav.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/foundation-datepicker.css" />
<link href='http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css' rel='stylesheet' type='text/css'>
</head>
<body class="can-add-season">
<div id="container">
<div id="banner" class="clearfix">
<img id="crest" src="images/cecc-logo2.png" />
<h1>Cadmore End Cricket Club</h1>
</div>
<nav class="clearfix">
<div class="menu-button">Menu</div>
<ul class="flexnav" data-breakpoint="800">
<li>Home</li>
<li>About</li>
<li>
News
<ul>
<li>Social Events</li>
</ul>
</li>
<li class="item-with-ul">
Team
<ul>
<li>Players</li>
<li>Fixtures/Results</li>
<li>Statistics</li>
</ul>
</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
<main>
<div class="row">
<div class="large-12 columns">
<h1 class="main-header text-center">Add Player</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<p class="standard-text text-center">You can add a new Cricket season on this web page. To add more fixtures to the season, click on the button below and a new fixture form will appear.</p>
</div>
</div>
<form id="season-form" enctype="multipart/form-data" action="process-season.php" method="post">
<div class="fixture">
<div class="row">
<div class="small-12 medium-2 medium-offset-5 columns end">
<label>Season
<select name="season">
<option value="option-1" selected><?php echo intval(date("Y")) . "/" . intval(date("Y")+1); ?></option>
<option value="option-2"><?php echo intval(date("Y")+1) . "/" . intval(date("Y")+2); ?></option>
<option value="option-3"><?php echo intval(date("Y")+2) . "/" . intval(date("Y")+3); ?></option>
</select>
<div class="error-box"></div>
</label>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns">
<h3 class="fixture-number">Fixture #1</h3>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns">
<label>Date and Time
<input readonly id="date-time-box" type="text" class="span2 dpt" name="match-dt[]" value="<? echo date("d/m/Y"); ?> 12:00">
<div id="date-time-error-1" class="error-box"></div>
</label>
</div>
<div class="small-12 medium-3 columns">
<label>Team
<select name="team-division[]">
<option value="team-1">1st Team</option>
<option value="team-2">2nd Team</option>
</select>
<div class="error-box"></div>
</label>
</div>
<div class="small-12 medium-3 columns">
<label>Competition
<input id="competition-input" class="text-box" name="competition[]" type="text" />
<div id="competition-error-1" class="error-box"></div>
</label>
</div>
<div class="small-12 medium-2 columns">
<label>Home/Away
<select name="location[]">
<option value="home">Home</option>
<option value="away">Away</option>
</select>
<div class="error-box"></div>
</label>
</div>
</div>
<div class="row">
<div class="small-12 medium-6 columns">
<label>Opponents
<input id="opposition-input" class="text-box" name="opposition[]" type="text" />
<div id="opposition-error-1" class="error-box"></div>
</label>
</div>
<div class="small-12 medium-6 columns">
<label>Venue
<input id="venue-input" class="text-box" name="venue[]" type="text" />
<div id="venue-error-1" class="error-box"></div>
</label>
</div>
</div>
<div class="test"></div>
<div class="row">
<div class="small-12 columns end">
<img id="fixture-addition-logo" src="images/netvibes.png" class="float-right" />
<a id="fixture-addition-text" class="float-right">Add New Fixture</a>
</div>
</div>
</div>
<div id="submit-season-container" class="row">
<div class="small-12 medium-4 medium-offset-4 columns end">
<!-- <input type="submit" name="create-season" id="season-submit" class="button expanded radius success" value="Submit New Season" /> -->
<button id="season-submit" class="button expanded radius success">Submit New Season</button>
</div>
</div>
</form>
</main>
<footer class="clearfix">
<div class="row">
<div class="medium-4 columns">
<p class="float-left"><?php if (isset($_SESSION['username'])) {
echo $fname . " " . $lname . " <a href='logout.php'>(Sign Out)</a>";
} else {
echo "<a href='login.php'>Login</a>";
}?></p>
</div>
<div class="medium-3 columns text-center">
<p>© 2016 <a href="<?php
echo $potentialBeginning; ?>">Potential Beginning</a>
</p>
</div>
<div class="medium-5 columns">
<p class="float-right">Privacy Policy</p>
<p class="float-right">Terms and Conditions</p>
</div>
</div>
</footer>
</div>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/jquery.flexnav.min.js"></script>
<script src="js/locales/foundation-datepicker.en-GB.js"></script>
<script src="js/datepicker/foundation-datepicker.js"></script>
<script src="js/script.js"></script>
</body>
</html>
You have an errorFree increment only if error-box is not visbile. I think that's the reason of why 2nd time you submit it doesn't increment errorFree and why the form is submitted.
The problem is caused by this condition:
$(this).val() == "" && !($(this).siblings(".error-box").is(":visible"))
The first time you click submit, if the value is empty and .error-box is hidden then you show the error and increment errorFree. But, next click to submit .error-box is already shown so even if the value is empty the above condition will not be met:
$(this).val() == "" //true
!($(this).siblings(".error-box").is(":visible")) //false
true && false === false
I suggest to separate the show/hide logic from empty/filled logic:
if($(this).val() === "") {
//Slide/show .error-box and increment errors
} else {
//Hide .error-box
}
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 :)
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...
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/
I followed the source code on Jquery page to get a datepicker for my php page, but I cant get the calendar out. I think the Jquery is not loading for this page, can anyone tell me why? Thanks you
Here is my source code: I have my own designs for class element.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Admin</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/navi.css" media="screen" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$(".box .h_title").not(this).next("ul").hide("normal");
$(".box .h_title").not(this).next("#home").show("normal");
$(".box").children(".h_title").click( function() { $(this).next("ul").slideToggle(); });
});
</script>
<script src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<script>
function validateForm()
{
var x=document.forms["my_form"]["title"].value;
var y=document.forms["my_form"]["author"].value;
var z=document.forms["my_form"]["keywords"].value;
var type=document.forms["my_form"]["category"].value;
if (x=="" || y=="" || z =="" || type=="")
{
alert("Please fill in the required fields");
return false;
}
}
</script>
<body>
<div class="wrap">
<div id="header">
<div id="top">
<div class="left">
<p>Welcome, <strong><?php echo $_SESSION['login']?> </strong> [ logout ]</p>
</div>
</div>
<div id="nav">
<ul>
<li class="upp">Manage Content
<ul>
<li>› Admin Home</li>
<li>› Manage Posts</li>
<li>› Manage User</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<div id="sidebar">
<div class="box">
<div class="h_title">› Manage content</div>
<ul id="home">
<li class="b1"><a class="icon view_page" href="admin.php">Admin Home</a></li>
<li class="b2"><a class="icon report" href="viewPosts.php">Add Posts</a></li>
</ul>
</div>
<div class="box">
<div class="h_title">› Category</div>
<ul id="home">
<?php
include("includes/connect.php");
$sql = "SELECT post_type, COUNT(*) AS num FROM post WHERE post_status ='New' GROUP BY post_type";
$result = mysql_query($sql);
while($Cat_row= mysql_fetch_array($result)){
$type =$Cat_row['post_type'];
$number = $Cat_row['num'];
?>
<li class="b2"><a class="icon category" href="postType.php?cat=<?php echo $type?>"><?php echo $type." (".$number.")"?></a></li>
<?php }?>
</ul>
</div>
<div class="box">
<div class="h_title">› Archives</div>
<ul id="home">
<?php
include("includes/connect.php");
$sql_arc ="SELECT post_type, COUNT(*) AS numb FROM post WHERE post_status='Old' GROUP BY post_type";
$result_arc = mysql_query($sql_arc);
while($Arc_row= mysql_fetch_array($result_arc)){
$type_arc =$Arc_row['post_type'];
$number_arc = $Arc_row['numb'];
?>
<li class="b1"><a class="icon config" href="postArchive.php?type=<?php echo $type_arc?>"><?php echo $type_arc." (".$number_arc.")"?></a></li>
<?php }?>
</ul>
</div>
</div>
<div id="main">
<div class="full_w">
<div class="h_title">Add new Posts</div>
<form method="post" action="viewPosts.php" name="my_form" enctype="multipart/form-data" onsubmit="return validateForm()">
<div class="element">
<label >Title <span class="red">*</span></label>
<input type="text" name="title" class="text err" />
</div>
<div class="element">
<label>Author <span class="red">*</span></span></label>
<input type="text" name="author" class="text err" />
</div>
<div class="element">
<label>Keywords <span class="red">*</span></label>
<input type="text" name="keywords" class="text err" />
</div>
<div class="element">
<input type="text" id="datepicker">
</div>
<div class="element">
<label>Category <span class="red">*</span></label>
<select name="category" class="err">
<option value="">-- select category</option>
<option value="Class">Class</option>
<option value="Facilities">Facilities</option>
<option value="Services">Services</option>
<option value="Announcement">Announcement</option>
<option value="Promotions">Promotions</option>
<option value="News">News</option>
<option value="Uncategorized">Uncategorized</option>
</select>
</div>
<div class="element">
<label for="content">Page content <span>(required)</span></label>
<textarea id="editor1" name="content" class="textarea" rows="10"></textarea>
</div>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1',
{
// Load the German interface.
language: ''
});
</script>
<div class="entry">
<button type="submit" name="submit" class="add">Save Post</button>
<button class="cancel" type="reset" >Cancel</button>
</div>
</form>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<div class="left">
<p>NUS Staff Club Admin Panel</p>
</div>
</div>
</div>
</body>
</html>
<?php
include("includes/connect.php");
if(isset($_POST['submit'])){
$post_title = $_POST['title'];
$post_date = date("Y-m-d");
$post_author = $_POST['author'];
$post_keywords = $_POST['keywords'];
$post_type = $_POST['category'];
$post_content = $_POST['content'];
$post_status = 'New';
// $post_image = $_FILES['image']['name'];
// $image_temp = $_FILES['image']['tmp_name'];
/*if(empty($post_title) || empty($post_author) || empty($post_keywords) || empty($post_type) || empty($post_content) ){
exit();
}*/
// else{
// move_uploaded_file($image_temp,"../image/$post_image");
$insert_query = "insert into post (post_title,post_date,post_author,post_keywords,post_type,post_content,post_status) values ('$post_title','$post_date','$post_author'
,'$post_keywords','$post_type','$post_content','$post_status')";
if(mysql_query($insert_query)){
echo "<script>alert('Post has been pushlished successfully')</script>";
echo "<script>window.open('admin.php','_self')</script>";
}
else{ echo "<script>alert('failed')</script>";}
// }
}
?>
<?php }?>
You're calling your element before it's created...
replace
$(function() {
$( "#datepicker" ).datepicker();
});
by
$().ready(function() {
$( "#datepicker" ).datepicker();
})
;