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();
})
;
Related
I'm doing a web portal and I want to sort a table without refresh the page. When I try it with a static table it works perfect but when I do with my table that it uses information from the database it doesn't work...
This is my code, I spent almost all day searching the problem but I feel unable.
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="icon" type="image/jpg" href="img/favicon.jpg" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Purchase Orders</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ordonez.css" rel="stylesheet">
<link href="css/master.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/datepicker.css" /> <!-- Estilos calendario -->
<script type="text/javascript" src="jquery/jquery-latest.js"></script>
<script type="text/javascript" src="jquery/jquery.tablesorter.js"></script>
<script>
$(document).ready(function(){
//cuando la página se cargue convertimos la tabla con id "tabla_ordenada" en una tabla ordenable
$("#tabla_ordenada").tablesorter();
});
</script>
</head>
<body>
<?php
include("../fragmentos/cookies.php");
require("../fragmentos/es/menu.php");
?>
<div class="container ordonez min">
<?php
require_once ('../fragmentos/swap_lang.php');
require_once ('../fragmentos/funciones.php');
require_once ('../fragmentos/conexion_bbdd.php');
error_reporting(E_ALL ^ E_NOTICE);
?>
<div class="row">
<div class="col-xs-12 text-right">
<a href="panel.php" class="margen_arriba btn btn-orange hidden-lg hidden-md hidden-sm" id="">
Claims register
</a>
</div>
<div class="col-md-12 col-xs-12 col-lg-12">
<h4 class="">Filtros de búsqueda:</h4>
<form action="orders.php" method="post">
<div class="caja_gris margen_arriba">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="form-group">
<label>Estado</label>
<div class="styled-select">
<select name="status" class="form-control">
<option <?php if(!isset($_POST["status"])){echo ' selected';}?> value="0">---Sin definir---</option>
<?php
$sql = "select * from estado_envio order by estado ASC";
$resultado = $mysqli->query($sql);
while($estado = $resultado->fetch_assoc()){
?>
<option <?php if($_POST["status"]==$estado["id"]){ echo ' selected';} echo ' value="'.$estado["id"].'">'; echo $estado["estado"].'</option>';} ?>
</select>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="form-group">
<label>Nombre Proveedor</label>
<div class="styled-select">
<input type="text" class="form-control" name="name" <?php if(isset($_POST["name"])){echo ' value="'.$_POST["name"].'"';}?>>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>Punto Descarga</label>
<div class="styled-select">
<select name="punto_descarga" class="form-control">
<option <?php if(!isset($_POST["punto_descarga"])){echo ' selected';}?> value="0">---Sin definir---</option>
<?php
print_r($_POST);
$sql = "select * from discharge_point order by nombre";
$resultado = $mysqli->query($sql);
while($punto = $resultado->fetch_assoc()){
?>
<option <?php if($_POST["punto_descarga"]==$punto["id"]){ echo ' selected';} echo ' value="'.$punto["id"].'">'; echo $punto["nombre"].'</option>';} ?>
</select>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="form-group">
<label>Orden Ordoñez</label>
<div class="styled-select">
<input type="text" class="form-control" name="orden_ordonez" <?php if(isset($_POST["orden_ordonez"])){echo ' value="'.$_POST["orden_ordonez"].'"';}?>>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="form-group">
<label>Artículo Proveedor</label>
<div class="styled-select">
<input type="text" class="form-control" name="art_proveedor" <?php if(isset($_POST["art_proveedor"])){echo ' value="'.$_POST["art_proveedor"].'"';}?>>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="form-group">
<label>Fecha Entrega Confirmada</label>
<div class="styled-select has-feedback">
<input data-provide="datepicker" class="form-control datepicker" name="confirm_fecha_ent"<?php if(isset($_POST["confirm_fecha_ent"])){echo ' value="'.$_POST["confirm_fecha_ent"].'"';}?> >
<span aria-hidden="true" class="glyphicon glyphicon-calendar form-control-feedback"></span>
</div>
</div>
</div>
<div class="pull-right margen_arriba_extra margen_derecha">
<input class="btn btn-orange" type="submit" name="submit">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div id="resultados" class="col-md-12 col-xs-12 col-lg-12">
<h4 class="">Órdenes:</h4>
<div id="tabla_1" class="table-responsive">
<table id="tabla_ordenada" class="table tabla_gris">
<thead>
<tr>
<th class="text-center">Estado</th>
<th class="text-center">Nombre Proveedor</th>
<th class="text-center">Punto Descarga</th>
<th class="text-center">Orden Ordoñez</th>
<th class="text-center">Artículo Proveedor</th>
<th class="text-center">Fecha Entrega Confirmada</th>
</tr>
</thead>
<tbody>
<?php
$cont = 0;
$where = getSearchOrderConditions($_POST);
$sql = "select * from purchase_order".$where;
$sql2 = "select * from discharge_point";
$sql3 = "select * from estado_envio_en";
if($resultado = $mysqli->query($sql)){
while($orders = $resultado->fetch_assoc()){
if($cont%2==1){
echo '<tr class="fila_gris">';
}
else{
echo '<tr>';
}
$cont++;
$sql2 = "select * from estado_envio where id = '".$orders["estado"]."'";
$resultado2 = $mysqli->query($sql2);
$estado = $resultado2->fetch_assoc();
echo '<td class="text-center"><span class="al">'.$estado["estado"].'</span></td>';
echo '<td class="text-center"><span class="al">'.$orders["nombre_proveedor"].'</span></td>';
$sql2 = "select * from discharge_point where id = '".$orders["punto_descarga"]."'";
$resultado2 = $mysqli->query($sql2);
$discharge_point = $resultado2->fetch_assoc();
echo '<td class="text-center"><span class="al">'.$discharge_point["nombre"].'</span></td>';
echo '<td class="text-center"><span class="al">'.$orders["orden_ordonez"].'</span></td>';
echo '<td class="text-center"><span class="al">'.$orders["art_proveedor"].'</span></td>';
echo '<td class="text-center"><span class="al">'.$orders["confirm_fecha_ent"].'</span></td>';
echo '</tr>';
}
}
?>
<tr>
<td colspan="44">
<table width="100%" class="tabla_sin_borde">
<tbody>
<tr>
<td class="text-center">
<nav class="pull-right margen_derecha">
<ul class="pagination pull-right">
<li class="pag_2">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="pag_1">1</li>
<li class="pag_2">2</li>
<li class="pag_3 active">3</li>
<li class="disabled">
<a class="pag_2" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<?php
require("../fragmentos/es/exit.php");
require("../fragmentos/es/preferences.php");
?>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE 8 se adapte a resolución -->
<script type="text/javascript" src="js/respond.src.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
<script>
$(document).ready(function () {
$("select[name=op]").on('change', function () {
var valor = $(this).val();
if (valor == "1") {
selectDataset(0);
}
else if (valor == "2") {
selectDataset(2);
}
else if (valor == "3") {
selectDataset(1);
}
else if (valor == "4") {
selectDataset(2);
}
else {
selectDataset(1);
}
});
})
</script>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
</script>
<script>
$('#buscar').click(function (e) {
e.preventDefault();
$('#resultados').removeClass("inv");
})
</script>
<script>
$('.pag_1').click(function (e) {
e.preventDefault();
$('#tabla_2').addClass("inv");
$('#tabla_1').removeClass("inv");
$('#tabla_3').addClass("inv");
})
$('.pag_2').click(function (e) {
e.preventDefault();
$('#tabla_1').addClass("inv");
$('#tabla_2').removeClass("inv");
$('#tabla_3').addClass("inv");
})
$('.pag_3').click(function (e) {
e.preventDefault();
$('#tabla_1').addClass("inv");
$('#tabla_3').removeClass("inv");
$('#tabla_2').addClass("inv");
})
</script>
<script>
$(document).ready(
function () {
$(".al").each(
function () {
$(this).attr({
"alt": $(this).text(),
"title": $(this).text()
})
}
)
}
)
</script>
<script>
$('.al').click(function (e) {
e.preventDefault();
$(this).toggleClass("al");
})
</script>
<!-- Script calendario -->
<script>
$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
autoclose: true
})
</script>
<script>
$('.input-append.date').datepicker({
format: 'mm/dd/yyyy',
autoclose: true
});
</script>
<!-- Fin Script calendario -->
</body>
</html>
Excuse me and thanks for your time!
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
}
after first selection box selected, display second result based on first selection result. But not getting any result while POST. While I submit the form, system prompt
"Notice: Undefined index: location in
C:\xampp\htdocs\auditsystem\calendar\func\scheduleaction.php on line
8"
I get the result while display, only show error while submit the form.
func.php
<?php
include_once('db.php');
function getTierOne()
{
$result = mysql_query("SELECT DISTINCT * FROM outlet_type")
or die(mysql_error());
while($tier = mysql_fetch_array( $result ))
{
echo '<option value="'.$tier['id'].'">'.$tier['type'].'</option>';
}
}
if(isset($_GET['func'])) {
drop_1($_GET['drop_var']);
}
function drop_1($drop_var)
{
$result2 = mysql_query("SELECT DISTINCT * FROM outlet_type_location WHERE outlet_type_id='$drop_var'")
or die(mysql_error());
echo '<select name="location" id="tier_one" onChange="showUP(this.value)" class="form-control">
<option value=" " disabled="disabled" selected="selected">-Select Outlet location-</option>';
while($drop_2 = mysql_fetch_array( $result2 ))
{
echo '<option value="'.$drop_2['location'].'">'.$drop_2['location'].'</option>';
}
echo '</select> ';
}
?>
scheduleaction.php (here show error code)
<?php
include_once("db.php");
$auditor_id = $_POST["auditor"];
$outlet_type_id = $_POST["type"];
$date = $_POST["date"];
$outlet_location = $_POST["location"];
echo $auditor_id."<br>";
echo $outlet_type_id."<br>";
echo $outlet_location;
echo $date;
?>
Form php
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("func/func.php", {
func: "drop_1",drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 0);
});
return false;
});
});
function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
<tr>
<label>Oulet Type:</label>
<select name="type" id="drop_1" class="form-control">
<option value="" selected="selected" disabled="disabled">-Click to select-</option>
<?php
include ("func/db.php");
include ("func/func.php");
getTierOne();
?>
</select>
<span id="wait_1" style="display: none;"><img alt="Please Wait" src="ajax-loader.gif"/></span>
<span id="result_1" style="display: none;"></span>
</tr>
try this, only mistake is, include() is present outside the form.
<?php
session_start();
include ("../connection/connect.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apex Audit System | Administration Panel</title>
<!-- Core CSS - Include with every page -->
<link href="../assets/plugins/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="../assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="../assets/plugins/pace/pace-theme-big-counter.css" rel="stylesheet" />
<link href="../assets/css/style.css" rel="stylesheet" />
<link href="../assets/css/main-style.css" rel="stylesheet" />
<!-- Page-Level CSS -->
<link href="../assets/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("func/func.php", {
func: "drop_1",drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 0);
});
return false;
});
});
function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
<body>
<?php
include_once("../assets/template/mainlinks2.php");
include_once("../assets/template/sidebar3.php");
?> <!-- page-wrapper -->
<div id="page-wrapper">
<div class="row">
<!-- page header -->
<div class="col-lg-12">
<h1 class="page-header">Setup New Schedule</h1>
</div>
<!-- end page header -->
</div>
<div class="row">
<div class="col-lg-12">
<!-- Advanced Tables -->
<div class="panel panel-default">
<div class="panel-heading">
Assign New Schedule
</div>
<div class="panel-body">
<div class="table-responsive">
<form action="func/scheduleaction.php" role="form" method="POST" name="form">
<table>
<div class="form-group">
<?php
include ("func/db.php");
include ("func/func.php");
?>
<tr>
<label>Auditor Name:</label>
<select class="form-control" name="auditor">
<?php
$result = $db->query("SELECT * FROM auditor");
while($row = mysqli_fetch_array($result))
{
echo '<option value="'.$row["id"].'">'.$row["auditor_name"].'</option>';
}
echo "</select>";
?>
</tr>
<tr>
<label>Oulet Type:</label>
<select name="type" id="drop_1" class="form-control">
<option value="" selected="selected" disabled="disabled">-Click to select-</option>
<?php
getTierOne();
?>
</select>
<span id="wait_1" style="display: none;"><img alt="Please Wait" src="ajax-loader.gif"/></span>
<span id="result_1" style="display: none;"></span>
</tr>
<tr>
<label>Audit Date:</label>
<input type="date" name="date" class="form-control" required="required">
</tr>
<br>
<tr>
<td><button type="submit" class="btn btn-primary">Submit Button</button></td>
<td><button type="reset" class="btn btn-success">Reset Button</button></td>
</tr>
</div>
</form>
</table>
</div>
</div>
</div>
<!--End Advanced Tables -->
</div>
</div>
</div>
<!-- end page-wrapper -->
</div>
<!-- end wrapper -->
<!-- Core Scripts - Include with every page -->
<script src="../assets/plugins/jquery-1.10.2.js"></script>
<script src="../assets/plugins/bootstrap/bootstrap.min.js"></script>
<script src="../assets/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="../assets/plugins/pace/pace.js"></script>
<script src="../assets/scripts/siminta.js"></script>
</body>
</html>
<?php
session_start();
include ("../connection/connect.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apex Audit System | Administration Panel</title>
<!-- Core CSS - Include with every page -->
<link href="../assets/plugins/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="../assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="../assets/plugins/pace/pace-theme-big-counter.css" rel="stylesheet" />
<link href="../assets/css/style.css" rel="stylesheet" />
<link href="../assets/css/main-style.css" rel="stylesheet" />
<!-- Page-Level CSS -->
<link href="../assets/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("func/func.php", {
func: "drop_1",drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 0);
});
return false;
});
});
function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
<body>
<?php
include ("func/db.php");
include ("func/func.php");
?>
<?php
include_once("../assets/template/mainlinks2.php");
include_once("../assets/template/sidebar3.php");
?> <!-- page-wrapper -->
<div id="page-wrapper">
<div class="row">
<!-- page header -->
<div class="col-lg-12">
<h1 class="page-header">Setup New Schedule</h1>
</div>
<!-- end page header -->
</div>
<div class="row">
<div class="col-lg-12">
<!-- Advanced Tables -->
<div class="panel panel-default">
<div class="panel-heading">
Assign New Schedule
</div>
<div class="panel-body">
<div class="table-responsive">
<form action="func/scheduleaction.php" role="form" method="POST" name="form">
<table>
<div class="form-group">
<tr>
<label>Auditor Name:</label>
<select class="form-control" name="auditor">
<?php
$result = $db->query("SELECT * FROM auditor");
while($row = mysqli_fetch_array($result))
{
echo '<option value="'.$row["id"].'">'.$row["auditor_name"].'</option>';
}
echo "</select>";
?>
</tr>
<tr>
<label>Oulet Type:</label>
<select name="type" id="drop_1" class="form-control">
<option value="" selected="selected" disabled="disabled">-Click to select-</option>
<?php
getTierOne();
?>
</select>
<span id="wait_1" style="display: none;"><img alt="Please Wait" src="ajax-loader.gif"/></span>
<span id="result_1" style="display: none;"></span>
</tr>
<tr>
<label>Audit Date:</label>
<input type="date" name="date" class="form-control" required="required">
</tr>
<br>
<tr>
<td><button type="submit" class="btn btn-primary">Submit Button</button></td>
<td><button type="reset" class="btn btn-success">Reset Button</button></td>
</tr>
</div>
</form>
</table>
</div>
</div>
</div>
<!--End Advanced Tables -->
</div>
</div>
</div>
<!-- end page-wrapper -->
</div>
<!-- end wrapper -->
<!-- Core Scripts - Include with every page -->
<script src="../assets/plugins/jquery-1.10.2.js"></script>
<script src="../assets/plugins/bootstrap/bootstrap.min.js"></script>
<script src="../assets/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="../assets/plugins/pace/pace.js"></script>
<script src="../assets/scripts/siminta.js"></script>
</body>
</html>
I have a from submitting data to db,and after entering in to db thank you message comes,everything is in same page.the problem is wheni refresh or go back the same data or empty data is entered in to db. Please help`
<?php
$myServer = "localhost";
$myUser = "root";
$myPass = "";
$myDB = "sample";
$name=$_POST['fname'];
$mobile=$_POST['mobile'];
$email=$_POST['email'];
//connection to the database
$dbhandle = mysql_connect($myServer, $myUser, $myPass)
or die("Couldn't connect to SQL Server on $myServer");
//select a database to work with
$selected = mysql_select_db($myDB, $dbhandle)
or die("Couldn't open database $myDB");
//echo "$myDB";
//Insert data into db
mysql_query("INSERT INTO reg(name,mobile,email) values ('$name','$mobile','$email')");
/* echo "$name";
echo "$mobile";
echo "$email"; */
//header("location:thank.html");
?>
<!doctype html>
<html>
<head>
<title>Basic form with validation</title>
<link rel="stylesheet" href="style/style.css" type="text/css" media="all"/>
</head>
<body>
<div style="width:300px; background:#19a3d1;margin:0 auto;height:200px;">
<?php
if(empty($_POST))
{
?>
<form name="myform" id="frm1" action="index.php" method="post" style="margin:0 auto;"onsubmit="return(validate());">
<h1 style="text-align:center">Form</h1>
<div style="display: table; margin:0 auto;">
<div style="display: table-row;">
<div style="display: table-cell;padding:5px;">
<label>Name</label>
</div>
<div style="display: table-cell;">
<input type="text" name="fname" id="fname" placeholder="Name" />
</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;padding:5px;">
<label>Mobile</label>
</div>
<div>
<input type="text" name="mobile" id="mobile" placeholder="Mobile" />
</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;padding:5px;">
<label>Email</label>
</div>
<div>
<input type="text" name="email" id="email" placeholder="Email" />
</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;padding:5px;" ></div>
<div style="display: table-cell;padding:5px;"><input type="submit" value="Submit"></div>
</div>
</div>
</form>
<?php
}
else{
?>
<div id="thank" >
<span style="color:#ff0000;padding:30px;text-align:center;display:block;">Thank you!!</span>
</div>
<?php
}
?>
</div>
<script src="js/main.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</body>
</html>`
Give name of your submit button.
Like
<input type="submit" value="Submit" name="btnSubmit">
And Write PHP Code like this :
<?php
......
......
if(isset($_POST['btnSubmit']))
{
Your code....
}
?>
Or
You can use ajax to submit the form data.
http://www.formget.com/submit-form-using-ajax-php-and-jquery/
<!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!!