I have enroll.html page . The code of this page is as follows :
<HTML>
<HEAD>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="JavaScript">
<!--
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
function check()
{
var uname=document.scan.elements[0].value
var bError=false
if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true
if (inStrGrp(uname,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
return true
}
-->
</Script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY onload="document.scan.name.focus();">
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p><font color="#0055FF">Enroll</font></p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<form name="scan" method="POST" action="http://10.11.201.170/data/sultan/enroll.asp" onsubmit="return check()">
<p>Please input your name: <input type="text" name="name" size="20"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="submit" value=" Enroll " id="buttonEnroll" name="btnEnroll">
</form>
<div id="result"></div>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
<script>
$("#buttonEnroll").on('click',function(e){
e.preventDefault();
$( "#result" ).load( "http://10.11.201.170/data/2/sysinfo1.asp" );
alert("Page loading completed");
});
</script>
</center>
</BODY>
</HTML>
I want to load sysinfo1.asp page when I press Enroll button . The code in this page insert data in database . The code of this page is as follows :
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="VBScript" Src="GetInfo.vbs">
</Script>
<title>Enroll Fingerprint.</title>
</HEAD>
<BODY Onload="GetLearnModel()";>
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p>Enroll</p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<Form name="scan" method="Post" action="famenroll2.asp?name=<%=Request("name")%>&check=<%=Request("check")%>&finger=<%=Request("finger")%>">
<Input type="hidden" name="LearnModel" value="">
<Input type="text" name="SlNo" value="">
</Form>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><font size="5" color="#ff0000"><%=Request.Form("SlNo")%></font><font size="5"> Enroll Successfully!</font></p>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
<% Dim Conn,strSQL,objExec,NumOfRecords,se_name,finger
cust_no=Request.QueryString("name")
Set Conn = Server.Createobject("ADODB.Connection")
Conn.Open "Driver={Oracle in XE};DBQ=xe;UID=biotpl;PWD=biotpl;"
'Query for the customer entry in FP_ENROLL Table
strSQL2 = "INSERT INTO TEST values(1,'OS')"
Set objExec = Conn.Execute(strSQL2)
'Query for the no of fingers to be taken for a customer in FP_FINGER_SETUP Table
'Set objExec = Conn.Execute("select FINGURE_NO NoF from BIOTPL.FP_FINGER_SETUP where USER_TYPE=" & Request.QueryString("cust_type") )
'NumOfFingers = objExec("NoF")
'Conn.Close()
Set objExec = Nothing
Set Conn = Nothing
%>
</center>
</BODY>
</HTML>
But the data is not inserted in the database . Why ? Is there any problem ?
Remove the following line from your Form
action="http://10.11.201.170/data/sultan/enroll.asp"
then it will work I guess.
Related
I have two pages one for a user to input a bus stop id. This bus stop id parses a live API. And one page for the results of that. The pages are showing on the single page at the moment. I want the user to get redirected to the second page. I have tired linking the pages but it did not work. ANy Suggestions?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dublin Concert Listings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body class="ui-mobile-viewport ui-overlay-a">
<div data-role="page1">
<div data-role="content">
<div class="content-primary">
<table cellpadding="5" cellspacing="5" align="center" width="100%">
<tr>
<td align="center"><h1>Get Next Bus Details</h1></td>
</tr>
<tr>
<td align="center">
<div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all">
<input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id">
Clear text
</div>
<input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div class="content-primary">
<div id="resultDiv" style="display:none; padding-top:40px">
<table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; ">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>From</strong> </td>
<td>: </td>
<td><span id="from"></span> </td>
</tr>
<tr>
<td><strong>To</strong> </td>
<td>: </td>
<td><span id="to"></span> </td>
</tr>
<tr>
<td><strong>Arival Date Time</strong> </td>
<td>: </td>
<td><span id="arival"></span> </td>
</tr>
<tr>
<td><strong>Departure Date Time</strong> </td>
<td>: </td>
<td><span id="departure"></span> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- end of pageone -->
<!--Loading scripts at bottom of the page-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
<h1>loading</h1>
</div>
<div class="ui-panel-dismiss"></div>
<script type="text/javascript">
//On click of button this function get call
$('#button_get_bus').click(function(){
//Get Enter Bus Id
var bus_stop_id=document.getElementById("bus_stop_id").value;
//If Id is blank then given error
if(bus_stop_id=="")
{
alert("Please enter bus stop number");
return false;
}
// This Function post request to API with the given bus stop id
$.ajax({
url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid="+bus_stop_id+"&format=json",
dataType: 'json',
success: function(results){
// It returnes json data
console.log(results);
var str = JSON.stringify(results);
// Code for parsing json and inserting data in html
var obj =jQuery.parseJSON(str);
var destination=obj.results[0].destination;
document.getElementById("to").innerHTML=destination;
var origin=obj.results[0].origin;
document.getElementById("from").innerHTML=origin;
var arrivaldatetime=obj.results[0].arrivaldatetime;
document.getElementById("arival").innerHTML=arrivaldatetime;
var departuredatetime=obj.results[0].departuredatetime;
document.getElementById("departure").innerHTML=departuredatetime;
document.getElementById("resultDiv").style.display="block";
}
});
});
</script>
</body>
</html>
Please see $.mobile.pageContainer.pagecontainer("change", "#page2"); in this example below:
//On click of button this function get call
$(document).on('click', '#button_get_bus', function() {
//Get Enter Bus Id
var bus_stop_id = document.getElementById("bus_stop_id").value;
//If Id is blank then given error
if (!bus_stop_id) {
alert("Please enter bus stop number");
return false;
}
// This Function post request to API with the given bus stop id
$.ajax({
url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid=" + bus_stop_id + "&format=json",
dataType: 'json',
success: function(results) {
// It returnes json data
console.log(results);
var str = JSON.stringify(results);
// Code for parsing json and inserting data in html
var obj = jQuery.parseJSON(str);
var destination = obj.results[0].destination;
document.getElementById("to").innerHTML = destination;
var origin = obj.results[0].origin;
document.getElementById("from").innerHTML = origin;
var arrivaldatetime = obj.results[0].arrivaldatetime;
document.getElementById("arival").innerHTML = arrivaldatetime;
var departuredatetime = obj.results[0].departuredatetime;
document.getElementById("departure").innerHTML = departuredatetime;
document.getElementById("resultDiv").style.display = "block";
$.mobile.pageContainer.pagecontainer("change", "#page2");
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dublin Concert Listings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div class="ui-content">
<div class="content-primary">
<table cellpadding="5" cellspacing="5" align="center" width="100%">
<tr>
<td align="center"><h1>Get Next Bus Details</h1></td>
</tr>
<tr>
<td align="center">
<div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all">
<input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id">
Clear text
</div>
<input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-add-back-btn="true"></div>
<div class="ui-content">
<div class="content-primary">
<div id="resultDiv" style="display:none; padding-top:40px">
<table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; ">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>From</strong> </td>
<td>: </td>
<td><span id="from"></span> </td>
</tr>
<tr>
<td><strong>To</strong> </td>
<td>: </td>
<td><span id="to"></span> </td>
</tr>
<tr>
<td><strong>Arival Date Time</strong> </td>
<td>: </td>
<td><span id="arival"></span> </td>
</tr>
<tr>
<td><strong>Departure Date Time</strong> </td>
<td>: </td>
<td><span id="departure"></span> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- end of pageone -->
<!--Loading scripts at bottom of the page-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
<h1>loading</h1>
</div>
<div class="ui-panel-dismiss"></div>
</body>
</html>
Remove your old jquery library and add the library before you start the script.You can add any of these following CDN to start it.
Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Microsoft
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
your above example
I'm a newbie in jQuery, but I have been pulling my hair out over my scripts for the last 5 days and decided to ask you:
Here's a summary:
There are two files below: Hello.html calls Hi.php.
If you directly call the Hi.php from a browser, the JavaScript codes (calculate_cost() function in Hi.php) run just fine.
But if you call Hi.php from Hello.html thru its submit button, the
JavaScript codes (the calculate_cost() function in Hi.php) do not
work.
I think the jQuery 3.21 in the header in Hello.html may be causing this but I'm not sure, and I still need all of these scripts in the Hello.html file to let this code run on a mobile browser.
Would you please HELP me troubleshoot this so I will stop losing my hair any more? :-{
Test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>TEST</title>
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-3.0.0.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<body>
<form action="Hi.php" method=POST>
<div data-role="page" id="P1">
<br><br>
<div data-role="header" align=center>
<font size=6>Enter your number</font>
</div>
<div data-role="content">
<br><br>
<center>
<input type="number" name="C1_TicketID" data-role="none" autofocus >
<br><br>
Next
</center>
</div>
</div>
<div data-role="page" id="P2">
<br><br>
<div data-role="header">
<br><br>
<center>
<font size=6>Click the button below</font>
<br>
</center>
<br>
Go Back
</div>
<div data-role="content">
<br><br>
<center>
<br><br>
<input rel="external" data-ajax="false" target="mysite" data-role="none" type=submit name=submit value=" Submit ">
</center>
</div>
</div>
</form>
</body>
</html>
Following is my Hi.php script that is called by Hello.html above.
If you directly call Hi.php from a browser, JavaScript (calculate_cost() function) works just fine. But it doesn't work if you call Hi.php via Hello.html.
Hi.php (for simplicity, this program just dumps an HTML code)
<?php
echo <<<SHOW_ALL2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-3.0.0.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script>
function calculate_cost() {
var i1_price_unit = 5000;
var i1_price_qty = $('#i1_qty').val();
var i1_price_total = i1_price_unit * i1_price_qty;
var i1_point_unit =510;
var i1_point_qty = $('#i1_qty').val();
var i1_point_total = i1_point_unit * i1_point_qty;
var price_2 = 650;
var price_2_quantity = $('#qty2').val();
var total2 = price_2 * price_2_quantity;
var point_2 =60;
var point_2_quantity = $('#qty2').val();
var total_point_2 = point_2 * point_2_quantity;
var grand_price_total = (i1_price_total + total2).toFixed(0);
var grand_point_total = (i1_point_total + total_point_2).toFixed(0);
i1_price_subtotal = i1_price_total.toString().replace(/(\d)(?=(\d\d\d)+$)/g , '$1,');
$('#i1_price_subtotal').val(i1_price_subtotal);
//$('#i1_price_subtotal').val(i1_price_total);
$('#i1_point_subtotal').val(i1_point_total);
$('#i1_price_subtotal').attr('readonly',true);
$('#i1_point_subtotal').attr('readonly',true);
subtotal_line_2_price = total2.toString().replace(/(\d)(?=(\d\d\d)+$)/g , '$1,');
$('#subtotal_line_2_price').val(subtotal_line_2_price);
//$('#subtotal_line_2_price').val(total2);
$('#subtotal_line_2_point').val(total_point_2);
$('#subtotal_line_2_price').attr('readonly',true);
$('#subtotal_line_2_point').attr('readonly',true);
grand_price_total = grand_price_total.toString().replace(/(\d)(?=(\d\d\d)+$)/g , '$1,');
$('#Total').val(grand_price_total);
$('#Total').attr('readonly',true);
grand_point_total = grand_point_total.toString().replace(/(\d)(?=(\d\d\d)+$)/g , '$1,');
$('#Totalpoint').val(grand_point_total );
$('#Totalpoint').attr('readonly',true);
}
</script>
</head>
<body id=0>
<form action="Try3.php" method="POST">
<div data-role="page" id="pageone">
<div data-role="header" data-position="fixed" data-theme="b" >
<center><font size=4 color=#ffff00>Price list</font></center>
<table border=0 data-role="table" data-mode="table" class="ui-shadow" id="myTable" >
<thead>
<tr>
<th width=82 style="text-align:center;"><font size=2>SKU</font></th>
<th width=290 style="text-align:center;"><font size=2>Product name</font></th>
<th width=44 style="text-align:right;"><font size=2>Point </font></th>
<th width=84 style="text-align:right;"><font size=2>Price </font></th>
<th width=89 style="text-align:center;"><font size=2>QTy</font></th>
<th width=64 style="text-align:center; "><font size=2>Points</font></th>
<th style="text-align:center;"><font size=2>Sub Total</font></th>
</tr>
</thead>
</table>
</div>
<div data-role="main" class="ui-content">
<table border=0 data-role="table" data-mode="table" class="ui-shadow" id="myTable">
<tbody>
<tr>
<td width=52 style="vertical-align:middle;"><span id="0"><font size=2>Test_001</font></span></td>
<td width=276 style="vertical-align:middle;"><font size=2>Bigger Mac</font></td>
<td width=30 style="vertical-align:middle;text-align:right;"><font size=2><b>510</font></td>
<td width=70 style="vertical-align:middle;text-align:right;"><font size=2><b>$ 5,000</b></font></td>
<td width=70 style="vertical-align:middle;">
<select id="i1_qty" name="i1_qty" onChange="calculate_cost()" data-mini="true" style="width:100px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td style="vertical-align:middle;text-align:center;">
<input type="text" id="i1_point_subtotal" name="subline1c" value="0" data-inline="true"
style="text-align:right;background-color:none;-webkit-appearance: none; size:1px;">
</td>
<td style="vertical-align:middle;text-align:center;">
<input type="text" id="i1_price_subtotal" name="subline1p" value="0" data-inline="true"
style="text-align:right;text-size:5;" data-shadow="false">
</td>
</tr>
<tr >
<td width=50 style="vertical-align:middle;"><span id=""><font size=2>Test_002</font></span></td>
<td width=250 style="vertical-align:middle;"><font size=2>Micro Softcream</font></td>
<td width=30 style="vertical-align:middle;text-align:right;"><font size=2><b>60</font></td>
<td width=70 style="vertical-align:middle;text-align:right;"><font size=2><b>$ 650</b></font></td>
<td width=75 >
<select id="qty2" name="qty2" onChange="calculate_cost()" data-mini="true">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td width=50 style="vertical-align:middle;text-align:center;">
<input type="text" id="subtotal_line_2_point" name="subline2c" value="0"
data-inline="true" style="text-align:right;background-color:none;-webkit-appearance: none;">
</td>
<td style="vertical-align:middle;text-align:center;">
<input type="text" id="subtotal_line_2_price" name="subline2p" value="0"
data-inline="true" style="text-align:right;" data-shadow="false" >
</td>
</tr>
</tbody>
</table>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=5> </td>
<td width=230>
<a href="Try1.php" data-role="button" data-inline="true"
rel="external" style="background-color:#333366;"> Start over </a>
</td>
<td width=80 ><font size=2>Grand Total</font></td>
<td width=130><input type="text" id="Total" name="TotalPrice" value="0"
data-inline="true" style="text-align:right;background-color:none;-webkit-appearance:none;width:130px;">
</td>
<td width=10></td>
<td width=125>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=70 >
<input type="text" id="Totalpoint" name="Totalpoint" value="0" data-inline="true"
style="text-align:right;background-color:none;-webkit-appearance:none;width:80px;">
</td>
<td width=5> </td>
<td widht=50 >point</td>
</tr>
</table>
</td>
<td width=73> </td>
<td align=right >
<input type="submit" name="button" value=" Next " >
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
SHOW_ALL2;
I'm trying to add one picture to the left side of this page I know basic of HTML. Any suggestion?
Following is not woking? Do I need two container or something wrong?
<?
session_start();
$_SESSION['usertmp'];
$_SESSION['emailtmp'];
if(strlen($_SESSION['usertmp'])<1 ||is_null($_SESSION['usertmp']))
{
$_SESSION['usertmp'] = "";
}
if(strlen($_SESSION['emailtmp'])<1 ||is_null($_SESSION['emailtmp']))
{
$_SESSION['emailtmp'] = "";
}
?>
<!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>Show Information</title>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
#
</style>
</head>
<body>
<div id="page-background"><img src="images/main.jpg" width="100%" height="100%" alt="Smile"></div>
<left>
<div class="container" style="width:800px" id="content">
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" />
</left>
<center>
<div class="container" style="width:800px" id="content">
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" /> <!-- end .header --></div>
<center>
<div class="content" style="background-image:url(); height:427px; color: #FFF;vertical-align:middle">
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form2" method="post" action="signup.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><p> </p>
<p><strong> Sign Up Here</strong></p></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername" value = "<? echo $_SESSION['usertmp'] ?>"></td>
</tr>
<tr>
<td>Enter Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td>:</td>
<td><input name="mypassword2" type="password" id="mypassword2"></td>
</tr>
<tr>
<td>Email id</td>
<td>:</td>
<td><input name="myemail" type="text" id="myemail" value = "<? echo $_SESSION['emailtmp'] ?>"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Sign Up"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div>
</center>
</center>
</body>
</html>
There are many ways you could achieve what you are looking to do. You should try to simplify your markup if you can. If you want to keep your login credential table in the middle. Here is a way to do it using 3 main divs as 32.98% width columns. Float them left and use the first column for the pic that you want on the left. Here it is in jsbin. Of course the images aren't working bc it doesn't have access to the proper path http://jsbin.com/muxac/1/edit
<!doctype html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
<style>
.col-1, .col-2, .col-3 {
width: 32.98%;
float:left;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
</header>
<div class="row">
<div class="col-1">
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" /></div>
</div> <!-- End of COLUMN 1 -->
<div class="col-2"> <!-- Start of COLUMN 2 -->
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" />
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form2" method="post" action="signup.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><p> </p>
<p><strong> Sign Up Here</strong></p></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername" value = "<? echo $_SESSION['usertmp'] ?>"></td>
</tr>
<tr>
<td>Enter Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td>:</td>
<td><input name="mypassword2" type="password" id="mypassword2"></td>
</tr>
<tr>
<td>Email id</td>
<td>:</td>
<td><input name="myemail" type="text" id="myemail" value = "<? echo $_SESSION['emailtmp'] ?>"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Sign Up"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div> <!-- End of COLUMN 2 -->
<div class="col-3"> <!-- COLUMN 3 -->
<!-- You can leave this empty if you want -->
</div>
<div class="row">
<div class="footer">
</div>
</div>
</div>
</div>
</body>
</html>
To position the picture You can use CSS. Here is the code(Insert it in the style attribute of the html tag):
position:absolute;left:0px;top:0px/*Here inserte the necesary pixels to position the picture*/
If what you want is just the header image to be at the top left, put inside the <style> this: .header img {display: inline-block; float: left;}
So i'm kinda new to javascript and am having an issue with the target heart rate calculator I am trying to create. When I click the calculate button, nothing happens. Can anyone tell me where I'm going wrong?
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/workitt.css">
<script>
function initTH(){
document.getElementById("calcButton").onclick = thr;
}
function thr(){
var age = document.getElementById("age").value;
if(age = ""){
document.getElementById("error").innerHTML = "This field is required.";
}
else{
var THRmax = (220-age)*.85;
var THRmin = (220-age)*.7;
document.getElementById("THRzone").innerHTML = THRmin + "-" + THRmax;
}
}
</script>
<title>Workitt</title>
</head>
<body>
<CENTER><div class="header">
<h1><img src="images/workitt-header.jpg" alt=header ></h1>
<div class="navbar">
Home |
Profile |
Create A Workout |
Fitness Accessories
</div>
<p> </p>
</div></CENTER>
<CENTER><div class="body">
<form>
<table class="table1" border="7" bordercolor=WHITE width="250" align="center" bgcolor="#ffffff">
<thead>
<tr>
<th colspan="2"><font size=5>
Target Heart Rate</font>
</th>
</tr>
<tr> </tr>
<tr> </tr>
</thead>
<tbody>
<tr>
<td align="center">
<label for="age">Age:</label>
</td>
<td align="center">
<input type="text" id="age" name="age" size="6"> years
</td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="2" align="center">
<input id="calcButton" type="button" value="calculate" />
<span id="error"></span>
</th>
</tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr>
<th colspan="2">
Your Target Heart Rate Zone is: <span id="THRzone"></span>
</th>
</tr>
</thead>
</table>
</form>
<p>*Your target heart rate zone is the zone in which your heart rate should be in when exercising to have the most effective workout for improving your fitness and burning calories.</p>
</div></CENTER>
</body>
</html>
The problem with your script, as pointed out in the comments, is that you are never invoking initTH(), so the button click handler is never getting attached to the button.
What the comments fail to note is that you have your script placed before the HTML. In particular, it comes before <input id="calcButton" type="button" value="calculate" />, meaning that if you're not careful when you call document.getElementById("calcButton"), that will return null.
It sounds like what you want to do is add an additional <script> element at the end of the body (right before the close </body> tag) and invoke initTH():
....
<script>
initTH();
</script>
</body>
As others have mentioned, the initTH() function never gets called.
I've made a few changes here:
http://jsfiddle.net/GaryHarrower/j4v7M/
I removed the function, so it will run whenever the button is pressed.
The script also had age = "" this should be age == "" with 2 = signs
Let me know how you get on!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/workitt.css">
<title>Workitt</title>
</head>
<body>
<CENTER>
<div class="header">
<h1><img src="images/workitt-header.jpg" alt=header ></h1>
<div class="navbar">
Home |
Profile |
Create A Workout |
Fitness Accessories
</div>
<p> </p>
</div>
</CENTER>
<CENTER>
<div class="body">
<form>
<table class="table1" border="7" bordercolor=WHITE width="250" align="center" bgcolor="#ffffff">
<thead>
<tr>
<th colspan="2"><font size=5>
Target Heart Rate</font>
</th>
</tr>
<tr> </tr>
<tr> </tr>
</thead>
<tbody>
<tr>
<td align="center">
<label for="age">Age:</label>
</td>
<td align="center">
<input type="text" id="age" name="age" size="6"> years
</td>
</tr>
</tbody>
<thead>
<tr>
<th colspan="2" align="center">
<input id="calcButton" type="button" value="calculate" />
<span id="error"></span>
</th>
</tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr>
<th colspan="2">
Your Target Heart Rate Zone is: <span id="THRzone"></span>
</th>
</tr>
</thead>
</table>
</form>
<p>*Your target heart rate zone is the zone in which your heart rate should be in when exercising to have the most effective workout for improving your fitness and burning calories.</p>
</div></CENTER>
<script>
document.getElementById("calcButton").onclick = thr;
function thr(){
var age = document.getElementById("age").value;
if(age == ""){
document.getElementById("error").innerHTML = "This field is required.";
}
else
{
var THRmax = (220-age)*.85;
var THRmin = (220-age)*.7;
document.getElementById("THRzone").innerHTML = THRmin + "-" + THRmax;
}
}
</script>
</body>
</html>
i have a modal popup "gatepass". when i click on generate , it generates this gatepass. In this gatepass i have two buttons close and print . when i click on print button, i want the gatepass to print and not the background. please guide me , how can i do it?
<html>
<head>
<script src="js/calculateamt.js" type="text/javascript"></script>
<link href="CSS/popup.css" rel="stylesheet" type="text/css">
</head>
<body>
<fieldset id="gatepass" class="popup">
<p align="center"><span style="size: 40px; font-size: 24px; alignment-adjust:middle">CASH RECIEPT</span></p>
<table width="453" border="0" align="center" cellpadding="20px">
<tr>
<td width="188" height="51">RECIEPT NO :
<label id="recno"><%=recieptno%></label></td>
<td width="179">DATE : <label id="date"><%=date%></label></td>
</tr>
<tr>
<td height="57">NAME : <label id="name" > <%=firstname%> <%=lastname%></label></td>
<td>VILLAGE : <label id="village"> <%=vill%></label></td>
</tr>
</table>
<p> </p>
<table width="697" height="52" border="0" align="center" cellpadding="20px">
<tr>
<td width="205">AGREEMENT NO : <label id="agrno"> <%=agreno%></label> </td>
<td width="149">LOT NO : <label id="lotno"><%=agreno%>/<%=bag%></label></td>
<td width="151">BAGS : <label id="bags" ><%=bag%></label></td>
<td width="174"> VEHICLE NO : <label id="vehicle"></label></td>
</tr>
</table>
<p> </p>
<table width="200" height="47" border="0" align="center" cellpadding="20px">
<tr>
<td> TOTAL AMOUNT :
<label onloadstart="javascript:totalamt()" id="Totalamt" name ="total"></label></td>
</tr>
</table>
<p align="center">
<p align="center">
<input type="button" name="Print" id="Print" value="PRINT" onClick="window.focus();window.print();">
<input type="button" name="close" id="close" value="CLOSE" onClick = "closePopup();" />
<p> </p>
<p> </p>
<p> </p>
</fieldset>
</body>
</html>
I suggest you reseach up on print style sheets
http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/
<link rel="stylesheet" type="text/css" href="print.css" media="print" />