Css datepicker not being displayed correctly - javascript

I am trying to add a time picker to my HTML page. It is added successfully but the problem is that when I click time text box, the time picker appears at the bottom of the page. IS there anything wrong with my CSS?
<head>
<link rel="stylesheet" type="text/css" href="css/clockpicker.css" />
<script type="text/javascript" src = "js/clockpicker.js"> </script>
</head>
<body>
<div class="head_bg clearfix"><!--start head_bg-->
<div class="outer_div clear_both"><!--start outer_div-->
<div class="head_left"><!--start head_left-->
<img src="img/logo.png" width="94" height="142" alt="" /><!--Logo here-->
</div><!--end head_left-->
<div class="head_right"><!--start head_right-->
<div class="head_sub01"><!--start head_sub01-->
<img src="img/text_img.png" width="397" height="20" alt="" />
</div><!--end head_sub01-->
<div class="head_sub02"><!--start head_sub02-->
<div class="ul"><!--start ul div-->
<ul><!--start ul-->
<li><img src="img/signout_icon.png" width="42" height="46" alt="" /></li>
<li><img src="img/seperator.png" width="1" height="39" alt="" class="img_padding" /></li>
<li>Sign Out</li>
</ul><!--end ul-->
</div><!--end ul div-->
</div><!--end head_sub02-->
</div><!--end head_right-->
</div><!--end outer_div-->
</div><!--end head_bg-->
<div class="clear_both height_20px"> </div>
<div class="outer_div clearfix"><!--start outer_div-->
<div class="clear_both height_10px"> </div>
Back
<input type="submit" value="Check Availability and Save" class="btn_all" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();" />
<input type="submit" disabled value="Delete" class="btn_all" />
<div class="clear_both height_5px"> </div>
<hr />
<div class="clear_both height_5px"> </div>
<span class="font_15px color_official"><b>Subject</b></span>
<input type="text" required class="txt_input02" name = "abc" /> <!-- imam -->
<span class="font_15px color_official"><b>Name</b></span>
<input type="text" required class="txt_input07" name = "name" value = "<?php echo htmlentities($_SESSION['fullName']); ?>"/>
<span class="font_15px color_official"><b>Dept</b></span>
<input type="text" required class="txt_input06" name = "dept" value = "<?php echo htmlentities($_SESSION['dep']); ?>"/>
<div class="clear_both height_10px" > </div>
<span class="color_official"><b>From</b></span>
<input type="text" required name="date_txt" id="datepicker-example1" class="txt_input03" />
<span class="color_official"><b>To</b></span>
<input type="text" required name="date_txt1" id="datepicker-example2" class="txt_input03" />
<span class="color_official"><b>Time In</b></span>
<input type = "text" required class="txt_input03" name ="timeIn" id = "timeIn" placeholder="00:00"/>
<script type="text/javascript">
var input = $('#timeIn');
input.clockpicker({autoclose: true});
</script>
</body>
It shows up like this:

Bootstrap Timepicker jsfiddle
Need to import CSS
#import url('//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css');
#import url('http://jdewit.github.io/bootstrap-timepicker/css/bootstrap-timepicker.min.css');

Related

Using session storage to save values in a form

Currently trying to use the following script to save the billing information i've included below on a page refresh. Hoping that this would clear up further errors i'm having down the line with redirecting users to paypal.
<script>
// Run on page load
window.onload = function() {
// If sessionStorage is storing default values (ex. name), exit the function and do not restore data
if (sessionStorage.getItem('billing_firstname') == "billing_firstname") {
return;
}
// If values are not blank, restore them to the fields
var billing_firstname = sessionStorage.getItem('billing_firstname');
if (billing_firstname !== null) $('#billing_firstname').val(billing_firstname);
var billing_state= sessionStorage.getItem('billing_state');
if (billing_state !== null) $('#billing_state').val(billing_state);
var billing_country= sessionStorage.getItem('billing_country');
if (billing_country!== null) $('#billing_country').val(billing_country);
}
// Before refreshing the page, save the form data to sessionStorage
window.onbeforeunload = function() {
sessionStorage.setItem("billing_firstname", $('#billing_firstname').val());
sessionStorage.setItem("billing_state", $('#billing_state').val());
sessionStorage.setItem("billing_country", $('#billing_country').val());
}
</script>
To save the following form (not added all the form labels to the script yet)
<div id="billing_info" class="pad10 boxShadow" style="display:block">
<!--START: SAVE_ADDRESSES-->
<div class="chkField">
<label for="save_address">[checkout3_PreviousAddresses]</label>
<select type="dropdown" name="save_address" onchange="javascript:filladdress_form(this,'billing','billing');check_address('billing');" tabindex="1" class="txtBoxStyle">
[address_billing_list]
</select>
<div class="clear"></div>
</div>
<!--END: SAVE_ADDRESSES-->
<div class="chkField">
<label for="billing_firstname">[CustomerInfo_firstname]</label>
<input name="billing_firstname" onchange="clearContent(this);" type="text" id="billing_firstname" value="[billing_firstname]" size="15" tabindex="2" class="txtBoxStyle" />
<!--START: req_billing_firstname-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_firstname-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_lastname">[CustomerInfo_lastname]</label>
<input name="billing_lastname" type="text" onchange="clearContent(this);" id="billing_lastname" value="[billing_lastname]" size="15" tabindex="3" class="txtBoxStyle" />
<!--START: req_billing_lastname-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_lastname-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_company">[CustomerInfo_company]</label>
<input name="billing_company" type="text" onchange="clearContent(this);" id="billing_company" value="[billing_company]" size="25" tabindex="4" class="txtBoxStyle" />
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_state">[CustomerInfo_state]</label>
<select id="billing_state" onchange="this.form.billing_zip.value='';check_address('billing');" name="billing_state" tabindex="9" class="txtBoxStyle">
</select>
<!--START: req_billing_state-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_state-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_country">[CustomerInfo_country]</label>
<select name="billing_country" onchange="check_address('billing');" tabindex="8" class="txtBoxStyle" id="billing_country">
</select>
<!--START: req_billing_country-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_country-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_address">[CustomerInfo_address]</label>
<input name="billing_address" type="text" onchange="clearContent(this);[po_box_disabled_billing]" id="billing_address" value="[billing_address]" size="25" tabindex="5" class="txtBoxStyle" />
<!--START: req_billing_address-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_address-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_address2">[CustomerInfo_address2]</label>
<input name="billing_address2" type="text" onchange="clearContent(this);" id="billing_address2" value="[billing_address2]" size="25" tabindex="6" class="txtBoxStyle" />
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_city">[CustomerInfo_city]</label>
<input name="billing_city" type="text" onchange="clearContent(this);" id="billing_city" value="[billing_city]" size="25" tabindex="7" class="txtBoxStyle" />
<!--START: req_billing_city-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_city-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_zip">[CustomerInfo_zip]</label>
<input name="billing_zip" maxlength="15" type="text" id="billing_zip" value="[billing_zip]" size="10" tabindex="10" class="txtBoxStyle" onchange="clearContent(this);check_address('billing');" />
<!--START: req_billing_zip-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_zip-->
<div class="clear"></div>
</div>
<div class="chkField">
<label for="billing_phone">[CustomerInfo_phone]</label>
<input name="billing_phone" type="text" onchange="clearContent(this);" id="billing_phone" value="[billing_phone]" size="25" tabindex="5" class="txtBoxStyle" />
<!--START: req_billing_phone-->
<img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" />
<!--END: req_billing_phone-->
<div class="clear"></div>
</div>
<div class="clear"></div>
I'm getting the following error.
Uncaught TypeError: $ is not a function
at window.onbeforeunload
new error
Uncaught TypeError: $ is not a function
at checkout_one.asp:1903
at dispatch (jquery.min.js:2)
at y.handle (jquery.min.js:2)
After adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have not called the script from anywhere in my code as of yet.
<script>
$( window ).load(function() {
if (sessionStorage.getItem('billing_firstname') == "billing_firstname")
{
return;
}
// If values are not blank, restore them to the fields
var billing_firstname = sessionStorage.getItem('billing_firstname');
if (billing_firstname !== null) $('#billing_firstname').val(billing_firstname);
var billing_state= sessionStorage.getItem('billing_state');
if (billing_state !== null) $('#billing_state').val(billing_state);
var billing_country= sessionStorage.getItem('billing_country');
if (billing_country!== null) $('#billing_country').val(billing_country);
}
});
$( window ).unload(function() {
sessionStorage.setItem("billing_firstname",
$('#billing_firstname').val());
sessionStorage.setItem("billing_state", $('#billing_state').val());
sessionStorage.setItem("billing_country", $('#billing_country').val());
});
</script>
and include jquery before any script library included or before this code ... first script should be jquery :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
and please post error after this since u r using jquery $(" ") without jquery i think you are mixing js and jquery in bad way . please check this once .

Dynamic html form values are not being stored in database

I am developing a game portal in which professor should be able to add any type of questions in a game. I have created the question type(multiple choice or descriptive ) functions in form.php and i am calling them in my main file. First of all in the loop I am calling main box(simple html box) in which i have to add the question. And its working fine. Now i have to store the dynamically changed boxes values in database. But i don't know where i am wrong. Following is my form.php in which i am creating forms to call in the main file.
<?
$i=$_post['i'];
$_SESSION["input_type"][$i]= $_POST["type"];
if($_SESSION["input_type"][$i]==1)
{
form($i);
}
elseif($_SESSION["input_type"][$i]==2)
{
form1();
}
function form($i)
{
?>
<div class="control-group">
<div class="controls">
<textarea class="large m-wrap" placeholder=" Statement " cols="50"rows="3" name="statement<?echo $i;?>" style="text-align:center;" id="statement<?echo $i;?>"></textarea>
</div>
</div>
<div class="name">
<input name="option<?echo $i.'1';?>" id="option<?echo $i.'1';?>" placeholder="Option 1" style="width:170px;" type="text"/>
<input name="option<?echo $i.'2';?>" id="option<?echo $i.'2';?>" type="text" style="width:170px;" placeholder="Option 2"/>
<input name="option<?echo $i.'3';?>" id="option<?echo $i.'3';?>" type="text" style="width:170px;" placeholder="Option 3"/>
<input name="option<?echo $i.'4';?>" id="option<?echo $i.'4';?>" type="text" style="width:170px;" placeholder="Option 4"/>
</div>
<div class="control-group">
<div class="controls">
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<label class="radio">
<input type="radio" name="option<?echo $i.'1';?>_default" id="option<?echo $i.'1';?>_default" />
Option 1
</label>
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<label class="radio">
<input type="radio" name="option<?echo $i.'2';?>_default" id="option<?echo $i.'2';?>_default" checked />
Option 2
</label>
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<label class="radio">
<input type="radio" name="option<?echo $i.'3';?>_default" id="option<?echo $i.'3'?>_default" />
Option 3
</label>
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
<label class="radio">
<input type="radio" name="option<?echo $i.'4';?>_default" id="option<?echo $i.'4';?>_default" />
Option 4
</label>
</div>
</div>
<?php
}
//end
?>
<?php
function form1()
{ ?>
<div class="control-group" id ="field" name="field">
<label class="control- label">Answer</label>
<div class="controls">
<input type="text" placeholder="Answer" id ="ans" name="ans" class="m-wrap small" />
</div>
</div>
<?
}
?>
This is my main file in which i am cakking the form.php functions to add questions
<!-- BEGIN PAGE -->
<div class="page-content">
<form action="storeGame.php" method="POST">
<div class="control-group">
<label class="control-label">Game Name</label>
<div class="controls">
<input type="text" id="game_name" name="game_name" placeholder="Enter Game Name" class="m-wrap large" />
</div>
</div>
<!-- BEGIN BORDERED TABLE PORTLET-->
<?
$q_no=5;
for ($i=0;$i<$_SESSION["q_inc"]; $i++)
{
?>
<div class="portlet box yellow">
<div class="portlet-title">
<h4><i class="icon-coffee"></i>#<?echo $i+1;?> </h4>
<div class="tools">
</div>
</div>
<div class="portlet-body">
<table class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
<form action="newGame.php" method="POST" id="input_type" name="input_type">
<div class="control-group">
<label class="control-label" > Add Input</label>
<div class="controls">
<select class="medium m-wrap question_type" data-question-no="<?echo $i;?>" tabindex="1" id="type<?echo $i;?>" name="type<?echo $i;?>">
<option value="">Input Type</option>
<option value="1">Multiple Choice</option>
<option value="2">Input Field</option>
</select>
</div>
<div id="answer_no_<?php echo $i ?>"></div>
</div>
</form>
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function(){
$('.question_type').change(function(){
var question_no=$(this).attr('data-question-no');
$.ajax({
url: "form.php",
type:'post',
data:{
type:$(this).val(),
i:question_no
},
success:function(data){
$('#answer_no_'+question_no).html(data);
}
});
});
});
</script>
<?
}
?>
<!-- END BORDERED TABLE PORTLET-->
<!-- BEGIN PAGE CONTAINER-->
<div class="container-fluid">
<!-- BEGIN PAGE HEADER-->
<div class="row-fluid">
<div class="span12">
<!-- BEGIN STYLE CUSTOMIZER -->
<div class="color-panel hidden-phone">
<div class="color-mode-icons icon-color"></div>
<div class="color-mode-icons icon-color-close"></div>
<div class="color-mode">
<p>THEME COLOR</p>
<ul class="inline">
<li class="color-black current color-default" data-style="default"></li>
<li class="color-blue" data-style="blue"></li>
<li class="color-brown" data-style="brown"></li>
<li class="color-purple" data-style="purple"></li>
<li class="color-white color-light" data-style="light"></li>
</ul>
<label class="hidden-phone">
<input type="checkbox" class="header" checked value="" />
<span class="color-mode-label">Fixed Header</span>
</label>
</div>
</div>
<!-- END BEGIN STYLE CUSTOMIZER -->
<!-- BEGIN PAGE TITLE & BREADCRUMB-->
<h3 class="page-title">
</h3>
<!-- END PAGE TITLE & BREADCRUMB-->
</div>
</div>
<!-- END PAGE HEADER-->
<!-- BEGIN PAGE CONTENT-->
<div class="row-fluid">
<div class="span12" >
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" >
<input type="hidden" id="session" data="#Request.RequestContext.HttpContext.Session['questNo']" />
<!-- <a class="btn green" type="submit" ><i class="icon-plus" ></i></a> -->
<button type="submit" id="add_q" name="add_q" class="btn green"><i class="icon-plus"></i></button>
</form>
</div>
<!-- END PAGE CONTENT-->
</div>
<!-- END PAGE CONTAINER-->
<button type="submit" class="btn yellow btn-block" id="getGames" name="getGames" class="btn green">Create Game <i &nbsp class="m-icon-big-swapright m-icon-white"></i></button>
</form>
</div>
</div>
<!-- END PAGE -->
And below is my storeGame.php file in which i am getting values of question fields and saving in the database but the dynamic box values are not being saved but all other box values are being saved.
<?
session_start();
include_once("../Includes/db_connection.php");
$lecturer_id = $_SESSION["lecturer_id"];
$game_name=mysql_real_escape_string($_POST['game_name']);
echo $_SESSION["lecturer_id"];;
echo $game_name;
mysql_query("insert into games(game_name, lecturer_id) values ('$game_name', '$lecturer_id')");
for($i=0;$i<$_SESSION["q_inc"];$i++)
{
$input_type = mysql_real_escape_string($_POST['type'.$i]);
if($input_type=='1')
{
$question= $_POST['statement'.$i];
$val1= $_POST['option'.$i.'1'];
$val2= $_POST['option'.$i.'2'];
$val3= $_POST['option'.$i.'3'];
$val4= $_POST['option'.$i.'4'];
$default1= $_POST['option'.$i.'1'.'_default'];
$default2= $_POST['option'.$i.'2'.'_default'];
$default3= $_POST['option'.$i.'3'.'_default'];
$default4= $_POST['option'.$i.'4'.'_default'];
mysql_query("insert into subgames(game_id, input_id, statement, option1, option2, option3, option4, default1, default2, default3, default4) values ((SELECT id
FROM games WHERE game_name = '$game_name'), '$input_type', '$question', '$val1', '$val2', '$val3', '$val4', '$default1', '$default2', '$default3', '$default4')");
$error= mysql_error();
}
elseif($input_type=='2')
{
$question= $_POST['quest'];
$answer= $_POST['ans'];
// it is not implemented so leave it
}
}
Kindly help me i have tried a lot but i don't know where i am wrong. Thanks in advance
First of all I want to tell you that there are lots of problem in your code. Those I got are as follows.
1: There is no need to paste the entire html code of header and footer as well. This causes to skipped from the people who can give you answer, they run away after seeing lots of code. i.e. unnecessary.
2: You have defined multiple form tags, and these forms are nested to each other. every form should be closed before opening any other form tag.
3: Radio button tag's name should have the same for every group of the option, their value should be different not the name. for example for gender there should be two radio input tag with same name name="gender" and with different value like value="male" & value="female". you'll get the only one value for the radio button with same name.
4: if you are going to use session anywhere on the page, it first of all should be started before printing any output.
5: You have not given any value for the default value of radio button. So there should be a value attribute with different value inside that
6: whenever you are going to name a funtion, name it according to its functionality, not like a, b, c. Here I'm going to change your form to form_multiple() and form1 to form_input()
7: when you are going to choose input field for more than one question, then you'll have two input field with the same name, that is not allowed. So, let here also pass the i to the function.
====================
here is the solution for your code.
1: I have removed the numbers from default in radio button.
form.php
<?php
$i = $_POST['i'];
$_SESSION["input_type"][$i] = $_POST["type"];
if ($_SESSION["input_type"][$i] == 1) {
form_multiple($i);
} elseif ($_SESSION["input_type"][$i] == 2) {
form_input($i);
}
function form_multiple($i)
{
?>
<div class="control-group">
<div class="controls">
<textarea class="large m-wrap" placeholder=" Statement " cols="50" rows="3" name="statement<?php echo $i; ?>" style="text-align:center;" id="statement<?php echo $i; ?>"></textarea>
</div>
</div>
<div class="name">
<input name="option<?php echo $i . '1'; ?>" id="option<?php echo $i . '1'; ?>" placeholder="Option 1"
style="width:170px;" type="text"/>
<input name="option<?php echo $i . '2'; ?>" id="option<?php echo $i . '2'; ?>" type="text" style="width:170px;"
placeholder="Option 2"/>
<input name="option<?php echo $i . '3'; ?>" id="option<?php echo $i . '3'; ?>" type="text" style="width:170px;"
placeholder="Option 3"/>
<input name="option<?php echo $i . '4'; ?>" id="option<?php echo $i . '4'; ?>" type="text" style="width:170px;"
placeholder="Option 4"/>
</div>
<div class="control-group">
<div class="controls">
Choose Default Option
<br/>
<label class="radio">
<input type="radio" value="1" name="option<?php echo $i; ?>_default" id="option<?php echo $i . '1'; ?>_default"/>
Option 1
</label>
<br/>
<label class="radio">
<input type="radio" value="2" name="option<?php echo $i; ?>_default" id="option<?php echo $i . '2'; ?>_default"
checked />
Option 2
</label>
<br/>
<label class="radio">
<input type="radio" value="3" name="option<?php echo $i; ?>_default" id="option<?php echo $i . '3' ?>_default"/>
Option 3
</label>
<br/>
<label class="radio">
<input type="radio" value="4" name="option<?php echo $i; ?>_default" id="option<?php echo $i . '4'; ?>_default"/>
Option 4
</label>
</div>
</div>
<?php
}
//end
?>
<?php
function form_input($i)
{
?>
<div class="control-group" id="field" name="field">
<label class="control- label">Answer</label>
<div class="controls">
<input type="text" placeholder="Answer" id="ans" name="ans_<?php echo $i; ?>" class="m-wrap small"/>
</div>
</div><?php
}
?>
=====================================
In the below page I have removed some of the tags to shorten the answer
and I also have commented the form tags, so that you can analyze your errors. These two forms were inside another form tag
I don't know where you have defined $_SESSION["q_inc"] variable. I assume that this variable will have some integer value inside.
main content page
<?php
session_start();
include_once("../Includes/db_connection.php");
//include_once("form.php");
if(isset($_POST['total_q'])){
$_SESSION["q_inc"]=$_POST['total_q'];
}
if (!isset($_SESSION["q_inc"])) {
$_SESSION["q_inc"] = 2;
}
$_SESSION["questNo"] = $_SESSION["q_inc"];
if (!isset($_SESSION["lecturer_id"])) {
header("Location:../login.php");
}
//if($_SERVER['add_q'] == 'POST')
//$counter=0;
if (isset($_POST['add_q'])) {
$_SESSION["q_inc"]++;
}
?>
<!DOCTYPE html>
<!--[if IE 8]>
<html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<script type="text/javascript" src="../includes/jquery.js"></script>
<meta charset="utf-8"/>
<title>ClassEx</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<link href="../assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="../assets/css/metro.css" rel="stylesheet"/>
<link href="../assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"/>
<link href="../assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<link href="../assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet"/>
<link href="../assets/css/style.css" rel="stylesheet"/>
<link href="../assets/css/style_responsive.css" rel="stylesheet"/>
<link href="../assets/css/style_default.css" rel="stylesheet" id="style_color"/>
<link rel="stylesheet" type="text/css" href="../assets/chosen-bootstrap/chosen/chosen.css"/>
<link rel="stylesheet" type="text/css" href="../assets/uniform/css/uniform.default.css"/>
<link rel="shortcut icon" href="../assets/img/favicon.ico"/>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="fixed-top">
<!-- BEGIN HEADER -->
<div class="header navbar navbar-inverse navbar-fixed-top">
<!-- BEGIN TOP NAVIGATION BAR -->
<div class="navbar-inner">
<div class="container-fluid">
<!-- BEGIN LOGO -->
<a class="brand" href="#">
<img src="../assets/img/logoclassex.jpg" alt="logo" height="35px" width="35px""/>
</a>
<!-- END LOGO -->
<!-- BEGIN RESPONSIVE MENU TOGGLER -->
<a href="javascript:;" class="btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<img src="../assets/img/menu-toggler.png" alt=""/>
</a>
<!-- END RESPONSIVE MENU TOGGLER -->
<!-- BEGIN TOP NAVIGATION MENU -->
<ul class="nav pull-right">
<!-- BEGIN NOTIFICATION DROPDOWN -->
<!-- END NOTIFICATION DROPDOWN -->
<!-- BEGIN INBOX DROPDOWN -->
<!-- END INBOX DROPDOWN -->
<!-- BEGIN TODO DROPDOWN -->
<!-- END TODO DROPDOWN -->
</ul>
<!-- END TOP NAVIGATION MENU -->
</div>
</div>
<!-- END TOP NAVIGATION BAR -->
</div>
<!-- END HEADER -->
<!-- BEGIN CONTAINER -->
<div class="page-container row-fluid">
<!-- BEGIN SIDEBAR -->
<div class="page-sidebar nav-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<ul>
<li>
<!-- BEGIN SIDEBAR TOGGLER BUTTON -->
<div class="sidebar-toggler hidden-phone"></div>
<!-- BEGIN SIDEBAR TOGGLER BUTTON -->
</li>
<li class="start ">
<a href="lecturer.php">
<i class="icon-home"></i>
<span class="title">Dashboard</span>
</a>
</li>
<li class="">
<a href="../includes/logout.php">
<i class=" icon-off"></i>
<span class="title">Logout</span>
</a>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
<!-- END SIDEBAR -->
<!-- BEGIN PAGE -->
<div class="page-content">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" >
<input type="hidden" id="session" data="#Request.RequestContext.HttpContext.Session['questNo']" />
<!-- <a class="btn green" type="submit" ><i class="icon-plus" ></i></a> -->
Enter no of question<input name="total_q" type="text" />
<input type="submit" />
<!--<button type="submit" id="add_q" name="add_q" class="btn green"><i class="icon-plus"></i></button>-->
</form>
<form action="storeGame.php" method="POST">
<div class="control-group">
<label class="control-label">Game Name</label>
<div class="controls">
<input type="text" id="game_name" name="game_name" placeholder="Enter Game Name"
class="m-wrap large"/>
</div>
</div>
<!-- BEGIN BORDERED TABLE PORTLET-->
<?php
$q_no = 5;
for ($i = 0; $i < $_SESSION["q_inc"]; $i++) {
$temp = $i;
?>
<div class="portlet box yellow">
<div class="portlet-title">
<h4><i class="icon-coffee"></i>#<?php echo ($temp + 1); ?></h4>
<div class="tools">
</div>
</div>
<div class="portlet-body">
<table class="table table-bordered table-hover">
<div class="control-group">
<label class="control-label"> Add Input</label>
<div class="controls">
<select class="medium m-wrap question_type" data-question-no="<?php echo $i; ?>"
tabindex="1" id="type<?php echo $i; ?>" name="type<?php echo $i; ?>">
<option value="">Input Type</option>
<option value="1">Multiple Choice</option>
<option value="2">Input Field</option>
</select>
</div>
<div id="answer_no_<?php echo $i; ?>"></div>
</div>
</tbody>
</table>
</div>
</div>
<?php
}
?>
<script>
$(document).ready(function () {
$('.question_type').change(function () {
var question_no = $(this).attr('data-question-no');
$.ajax({
url: "form.php",
type: 'post',
data: {
type: $(this).val(),
i: question_no
},
success: function (data) {
$('#answer_no_' + question_no).html(data);
}
});
});
});
</script>
<!-- END BORDERED TABLE PORTLET-->
<!-- BEGIN PAGE CONTAINER-->
<div class="container-fluid">
<!-- BEGIN PAGE CONTENT-->
<div class="row-fluid">
<div class="span12">
<!-- <form action="-->
<?php //echo $_SERVER['PHP_SELF']; ?><!--" method="POST" >-->
<!-- <input type="hidden" id="session" data="#Request.RequestContext.HttpContext.Session['questNo']" />-->
<!-- <button type="submit" id="add_q" name="add_q" class="btn green"><i class="icon-plus"></i></button>-->
<!-- </form>-->
</div>
<!-- END PAGE CONTENT-->
</div>
<!-- END PAGE CONTAINER-->
<button type="submit" class="btn yellow btn-block" id="getGames" name="getGames" class="btn green">
Create Game <i &nbsp class="m-icon-big-swapright m-icon-white"></i></button>
</form>
</div>
</div>
<!-- END PAGE -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<div class="footer">
University of Passau ClassEx Team
<div class="span pull-right">
<span class="go-top"><i class="icon-angle-up"></i></span>
</div>
</div>
<!-- END FOOTER -->
<!-- BEGIN JAVASCRIPTS -->
<!-- Load javascripts at bottom, this will reduce page load time -->
<script src="../assets/js/jquery-1.8.3.min.js"></script>
<script src="../assets/breakpoints/breakpoints.js"></script>
<script src="../assets/jquery-slimscroll/jquery-ui-1.9.2.custom.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/js/jquery.blockui.js"></script>
<script src="../assets/js/jquery.cookie.js"></script>
<script src="../assets/fullcalendar/fullcalendar/fullcalendar.min.js"></script>
<script type="text/javascript" src="../assets/uniform/jquery.uniform.min.js"></script>
<script type="text/javascript" src="../assets/chosen-bootstrap/chosen/chosen.jquery.min.js"></script>
<!-- ie8 fixes -->
<!--[if lt IE 9]>
<script src="../assets/js/excanvas.js"></script>
<script src="../assets/js/respond.js"></script>
<![endif]-->
<script src="../assets/js/app.js"></script>
<script>
jQuery(document).ready(function () {
// initiate layout and plugins
App.setPage('calendar');
App.init();
});
</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>
===============================
There should be only one default option field in the database. Here I have removed all those and added one named "default_option"
storeGame.php
<?php
session_start();
include_once("../Includes/db_connection.php");
$lecturer_id = $_SESSION["lecturer_id"];
$game_name=mysql_real_escape_string($_POST['game_name']);
echo $_SESSION["lecturer_id"];;
echo $game_name;
$sql="insert into games(game_name, lecturer_id) values ('$game_name', '$lecturer_id')";
if(!mysql_query($sql)){
echo "Error in storing into database!<br/>";
}
for($i=0;$i<$_SESSION["q_inc"];$i++)
{
$input_type = mysql_real_escape_string($_POST['type'.$i]);
if($input_type=='1')
{
$question= $_POST['statement'.$i];
$val1= $_POST['option'.$i.'1'];
$val2= $_POST['option'.$i.'2'];
$val3= $_POST['option'.$i.'3'];
$val4= $_POST['option'.$i.'4'];
//Here should be only one default value
$default_option= $_POST['option'.$i.'_default'];
/*$default1= $_POST['option'.$i.'1'.'_default'];
$default2= $_POST['option'.$i.'2'.'_default'];
$default3= $_POST['option'.$i.'3'.'_default'];
$default4= $_POST['option'.$i.'4'.'_default'];*/
$sql=" insert into subgames( game_id, input_id, statement, option1, option2, option3, option4, default_option)
values ( (SELECT id FROM games WHERE game_name = '$game_name' limit 1), '$input_type', '$question', '$val1', '$val2', '$val3', '$val4', '$default_option')";
if(!mysql_query($sql)){
echo "Error";
}
else{
echo "Success";
}
//$error= mysql_error();
}
elseif($input_type=='2')
{
$question= $_POST['quest'];
$answer= $_POST['ans'];
// it is not implemented so leave it
}
}

Div id passing to a java script

This is my html page.
<div>
<div id="defaultcard" class="container">
<div id="imgspace1" class="container">
<input id="edit" type="button" name="answer" value="Edit" onclick="showDiv()" />
<input id="cancel" type="button" name="answer" value="Cancel" onclick="showBtn()" />
<div id="image_preview">
<img id="previewing" src="" />
</div>
</div>
<div id="imgspace2" class="container">
<input id="edit" type="button" name="answer" value="Edit" onclick="showDiv()" />
<div id="image_preview">
<img id="previewing1" src="" />
</div>
</div>
<div id="imgspace3" class="container">
</div>
<div id="imgspace4" class="container">
</div>
</div>
and this is my js file(image preview part only).
function imageIsLoaded(e)
{
$("#file").css("color","green");
$('#image_preview').css("display", "block");
$('#previewing').attr('src', e.target.result);
$('#previewing').attr('width', '100%');
$('#previewing').attr('height', '100%');
};
});
how can i upload different images to each div. i want know how to pass that div id to this js file.

how to display some part of html data in the jQuery dialog

Please help me, I have tried a lot of search but useless.
<div class="articleWraper">
<div id="demo2">
<?php
$sSql='SELECT * FROM tbl_images';
$result=mysql_query($sSql);
?>
<ul id="slider3">
<?php while($row=mysql_fetch_assoc($result)){?>
<li class="panel1">
<div class="caption-bottom"><?php echo $row['line1_desc'];?><br/><?php echo $row['line2_desc'];?></div>
<img src="../propertyImages/<?php echo $row['image'] ?>" /><br />
</li>
<?php }?>
</ul>
</div>
<div class="mpCaptionRow">
<input id="createLink" class="createLink" type="submit" name="submit" value="Yes, I'm Interested" />
</div>
</div>
The above code is for a button and a manual slider. The slider contains pictures and a panel for picture description which are getting from database. I want when the user clicks on button and jQuery dialog appears then some part of description containing slider panel will be show in the jQuery dialog. My jQuery dialog code is as follows:
<head>
<link href="Content/main.css" rel="stylesheet" type="text/css" />
<link href="Content/blitzer/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
<link rel="stylesheet" href="Content/page.css" />
<link rel="stylesheet" href="Content/anythingslider.css" />
<script src="Scripts/jquery-2.0.3.min.js"></script>
<script src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script src="Scripts/jquery.anythingslider.js"></script>
<script src="Scripts/jquery.anythingslider.fx.js"></script>
<script src="Scripts/demo.js"></script>
<script type="text/javascript" src="Scripts/jqxmaskedinput.js"></script>
<script type="text/javascript" src="Scripts/jquery.timepicker.js"></script>
<script>
$(document).ready(function(){
$("#createLink").click(function (event) {
event.preventDefault();
$("#mpDialog").dialog(
{
title: "I want to be a future homeowner",
width: 520,
modal: true,
position: {
at: "top",
my: "bottom",
of: "#createLink"
}
}
);
});
$("#mpDialog").hide();
});
</script>
</head>
<body>
<div class="dialogSec" id="mpDialog">
<form id="createProductForm" name="myForm" action="futureHomeowner.php" method="post" enctype="multipart/form-data">
<div id="productDetails">
<div id="basicInfo">
<p style="text-align: center">Hey Mike and Juan<br />
I am interested in learning more about the property at:
<br />
**I want the panel description here**
<br />
and specifically how your program works to allow me to become a homeowner.</p>
<div class="fieldControl">
<label style="margin-right: 25px">First Name </label>
<input id="fname" type="text" class="textBox" name="fname" style="width: 350px" />
<div id="fname_error"></div>
</div>
<div class="fieldControl">
<label style="margin-right: 25px">Last Name </label>
<input id="lname" type="text" class="textBox" name="lname" style="width: 350px" />
<div id="lname_error"></div>
</div>
<div class="fieldControl">
<label>Email Address </label>
<input id="email" type="text" name="email" class="textBox" style="width: 350px" />
<div id="email_error"></div>
</div>
<div class="fieldControl">
<label>Phone No. </label>
<input id="phoneNo" type="text" name="phoneNo" class="textBox" style="width: 350px" />
</div>
<div class="fieldControl">
<p>Please answer the questions below and we will be in touch.</p>
<p style="text-align: left;"><b>What is the best time to call you to discuss?</b></p>
From <input id="timeformat1" name="timeFrom" type="text" class="textBox" style="width: 205px" placeholder="Time from" /> To <input id="timeformat2" placeholder="Time to" name="timeTo" type="text" class="textBox" style="width: 205px" />
<p style="text-align: left;"><b>Also, do you have any other comments?</b></p>
<textarea name="comments" style="width: 489px" class="textBox" placeholder="Write your comments..."></textarea>
</div>
</div>
<div class="clearSection"></div>
</div>
<div class="buttonsRow">
<input type="submit" value="Submit" class="button1" />
</div>
</form>
</div>

jquery mobile javascript calculator

I am very new to javascript, and I am trying to build a mobile app with Jquery Mobile. I would like the user to input one value on each page and then on the last page they will click submit and it will display the value on the last page. I have been working on this for like 4 hours and I can get the calculation to work on the same page as the submit button but not on the next page.
<script>
function sum()
{
var item1num = document.getElementById('item1num').value;
var item2num = document.getElementById('item2num').value;
{result = parseInt(item1num)*parseInt(item2num);
document.getElementById("showResult").innerHTML = (result);}}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item1">
item1
</label>
<input name="item1num" id="item1num" placeholder="" value="" type="number" />
</fieldset>
</div>
<a data-role="button" data-transition="slidefade" href="#page2" data-theme="b">
Next
</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item2">
item2
</label>
<input name="item2num" id="item2num" placeholder="" value="" type="number" />
</fieldset>
</div>
<input id="btnAdd" type="submit" value="Submit" onclick="sum();" data-theme="b" />
<span id="showResult"></span>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<span id="showResult"></span>
</div>
</div>
Please try below code.It's displaying the result in the final page.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
function sum()
{
var item1num = document.getElementById('item1num').value;
var item2num = document.getElementById('item2num').value;
{result = parseInt(item1num)*parseInt(item2num);
document.getElementById("showResult").innerHTML = "Result is: "+(result);}
}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item1">
item1
</label>
<input name="item1num" id="item1num" placeholder="" value="" type="number" />
</fieldset>
</div>
<a data-role="button" data-transition="slidefade" href="#page2" data-theme="b">
Next
</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item2">
item2
</label>
<input name="item2num" id="item2num" placeholder="" value="" type="number" />
</fieldset>
</div>
B
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<span id="showResult"></span>
</div>
</div>
</body>
</html>
You need to pass the value to the pages submitting a form
// page1
<form action="page2" method="post">
<input type="text" name="value1"/>
<input type="text" name="value2"/>
<input type="submit" />
</form>
so in the other page you can get both and work with
// page2
<input type="hidden" name="value1" value="value from page 1"/>
<input type="hidden" name="value2" value="other value from page 1"/>
to get this with jQuery you can do
var val1 = jQuery('input[name=value1]');
var val2 = jQuery('input[name=value2]');

Categories

Resources