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
}
Related
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 have an AJAX function that take data form a submit form and should pass varaibles to process.php
index.html is the main page
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>League of Legends Straw Poll</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center">Game Straw Poll</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<!-- FORM -->
<form name="form" id="form" method="post">
<div class="row">
<div class="col-md-12">
<!-- GAME -->
<select class="form-control" id="game-group" name="game" onchange="ChangeBackground();">
<option selected disabled>Select your Game...</option>
<option value="League_of_Legends">League of Legends</option>
<option value="Heartstone">Hearthstone</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<!-- QUESTION -->
<div class="input-group" id="question-group">
<input type="text" class="form-control" name="question" id="question" placeholder="Start typing your question...">
<span class="input-group-addon">
<i class="glyphicon glyphicon-question-sign"></i>
</span>
</div>
</div>
</div>
<br>
<div class="row">
<!-- OPTIONS -->
<div class="form-group form-group-options col-md-12 col-sm-12 col-xs-12">
<div class="input-group input-group-option col-md-12 col-sm-12 col-xs-12" id="options-group">
<input type="text" name="option[]" id="option" class="form-control" placeholder="Options...">
<span class="input-group-addon input-group-addon-remove">
<span class="glyphicon glyphicon-remove"></span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- CHOICE -->
<div class="checkbox" id="choice-group">
<label>
<input type="checkbox" id="choice" name="choice" value="Yes">Allow multiple choice
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-primary btn-lg pull-left" name="submit_button" id="submit_button" data-toggle="modal" data-target="#myModal">Create Poll</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Poll created</h4>
</div>
<div class="modal-body">
<p>Share it: http://gamepoll.net/<?php echo $rand_value; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary">Invia</button>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type='text/javascript' src='js/addfield.js'></script>
<script type='text/javascript' src='js/changebackground.js'></script>
<script type='text/javascript' src='magic.js'></script>
</body>
</html>
This is magic.js file
$(document).ready(function()
{
$("#submit_button").click(function()
{
var game = $("#game-group:selected").val();
var question = $("#question").val();
var option = $("#option[]").val();
var choice = $("#choice").val();
if (game == '' || question == '' || option == '' || choice == '')
{
alert("Insertion Failed Some Fields are Blank....!!");
}
else
{
// Returns successful data submission message when the entered information is stored in database.
$.post("process.php", {
game1: game,
question1: question,
option1: option,
choice1: choice
},
function(data)
{
alert(data);
$('#form')[0].reset(); // To reset form fields
});
}
});
});
And this is process.php file
<?php
//Include configuration file
include('includes/config.php');
//Define variables
$game2=$_POST['game'];
$question2=$_POST['question'];
$option2=$_POST['option'];
$choice2=$_POST['choice'];
//Generate random number
$rand_value=rand();
//Create temporary folder
mkdir($rand_value);
//Copy page of Ask Poll
copy('page.php', $rand_value . '/page.php');
rename($rand_value . '/page.php', $rand_value . '/index.php');
//Add data into database
mysql_connect($db_host, $db_username, $db_password) or die ("Errore di connessione!");
mysql_select_db($db_name) or die ("Impossibile selezionare database!");
$sql1="CREATE TABLE `" . $rand_value . "` (Question VARCHAR(200), Options VARCHAR(200), Choice INT(11))";
mysql_query($sql1) or die ("Impossibile eseguire la query!");
//Count number of Options available
$count=count($option);
for ($i=0; $i<($count-1); $i++)
{
${$sql . $i}="INSERT INTO `" . $rand_value . "` (Question, Options, Choice) VALUES ('$question2', '$option2[$i]', '$choice2')";
mysql_query(${$sql . $i});
}
?>
The problem is that the AJAX function doesn't pass data to process.php in fact i don't see any folder into my server or data saved into the database
change
var option = $("#option[]").val();
to
var option = $("#option").val();
you have assign [] operater in id selecter
Your javascript property names dont match your php array keys:
{
game1: game,
question1: question,
option1: option,
choice1: choice
}
$game2=$_POST['game'];
$question2=$_POST['question'];
$option2=$_POST['option'];
$choice2=$_POST['choice'];
change one or the other, eg:
{
game: game,
question: question,
option: option,
choice: choice
}
The only issue I see is when calling the POST vars in your php you need to use the key names from your object. Not the variable names.
//Define variables
$game2=$_POST['game1'];
$question2=$_POST['question1'];
$option2=$_POST['option1'];
$choice2=$_POST['choice1'];
Hope this helps!
I have a site http://gamepoll.net and I want that when I click Create Poll, the page doesn't refresh. This is the HTML code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>League of Legends Straw Poll</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center">Game Straw Poll</h1>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<form name="submitForm" id="submitForm" action="" method="post">
<div class="row">
<div class="col-md-12">
<select class="form-control" id="theme" name="game" onchange="ChangeBackground();">
<option selected disabled>Select your Game...</option>
<option value="League_of_Legends">League of Legends</option>
<option value="Heartstone">Hearthstone</option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input type="text" class="form-control" name="question" id="question" placeholder="Start typing your question...">
<span class="input-group-addon">
<i class="glyphicon glyphicon-question-sign"></i>
</span>
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-group form-group-options col-md-12 col-sm-12 col-xs-12">
<div class="input-group input-group-option col-md-12 col-sm-12 col-xs-12">
<input type="text" name="option[]" id="option" class="form-control" placeholder="Options...">
<span class="input-group-addon input-group-addon-remove">
<span class="glyphicon glyphicon-remove"></span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="checkbox">
<label>
<input type="checkbox" id="choice" name="choice" value="Yes">Allow multiple choice
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit|button" class="btn btn-primary btn-lg pull-left" name="submit_button" id="submit_button" onclick="SubmitForm();" data-toggle="modal" data-target="#myModal">Create Poll</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Poll created</h4>
</div>
<div class="modal-body">
<p>Share it: http://gamepoll.net/<?php echo $rand_value; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary">Invia</button>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type='text/javascript' src='js/addfield.js'></script>
<script type='text/javascript' src='js/changebackground.js'></script>
<script type='text/javascript' src='norefresh.js'></script>
</body>
</html>
JS Code
function SubmitForm(e) {
e.preventDefault();
var game = $("#game").val();
var question = $("#question").val();
var option = $("#option").val();
$.post("submit.php", { game: game, question: question, option: option },
}
submit.php Code
<?php
//Include configuration file
include('includes/config.php');
//Define variables
$question=$_POST['question'];
$game=$_POST['game'];
$option=$_POST['option'];
$choice=$_POST['choice'];
//Generate random number
$rand_value=rand();
//Create temporary folder
mkdir($rand_value);
//Copy page of Ask Poll
copy('page.php', $rand_value . '/page.php');
rename($rand_value . '/page.php', $rand_value . '/index.php');
//Add data into database
mysql_connect($db_host, $db_username, $db_password) or die ("Errore di connessione!");
mysql_select_db($db_name) or die ("Impossibile selezionare database!");
$sql1="CREATE TABLE `" . $rand_value . "` (Question VARCHAR(200), Options VARCHAR(200), Choice INT(11))";
mysql_query($sql1) or die ("Impossibile eseguire la query!");
//Count number of Options available
$count=count($option);
for ($i=0; $i<($count-1); $i++)
{
${$sql . $i}="INSERT INTO `" . $rand_value . "` (Question, Options, Choice) VALUES ('$question', '$option[$i]', '$choice')";
mysql_query(${$sql . $i});
}
?>
All works perfectly but the only problem is that when i click Create Poll button, the browser redirect me to submit.php blank page
UPDATE
This code doesn't work
function SubmitForm(e) {
e.preventDefault();
var game = $("#game").val();
var question = $("#question").val();
var option = $("#option").val();
$.post("submit.php", { game: game, question: question, option: option }
return false;
}
Can you write me an AJAX function as the last comment says?
place return false; at the end of your SubmitForm function and loose the comma at the end of the last sentence
function SubmitForm(e) {
e.preventDefault();
var game = $("#game").val();
var question = $("#question").val();
var option = $("#option").val();
$.post("submit.php", { game: game, question: question, option: option }
return false;
}
Either place return false; at the end of the function SubmitForm or change onclick="SubmitForm();" to onclick="SubmitForm(); return false;"
You can just add onsubmit="return false;" to your form:
<form onsubmit="return false;">
*****
****
</form>
use Ajax function if you want that the page doesn't refresh on click the "Create Poll" button.
It loads the part of the page without refresh the whole page.
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();
})
;
<!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!!