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/
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 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 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.
<!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!!