I am receiving an error when trying to use the yql statement. The console says there is a syntax error, but I do not see an error. I have posted all of the code so it can be copy and pasted to repeat the error.
<!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>
<title>Finances</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="JavaScript">
function start(){
getData();
// document.getElementById('link1').click();
}
function getData() {
var url = "http://query.yahooapis.com/v1/public/yql";
var symbol = $("#symbol").val();
var dateInput = $("#dateInput").val();
var data = encodeURIComponent("select * from yahoo.finance.historicaldata where symbol = '"symbol"' and startDate = '"dateInput"' and endDate = '"dateInput"'");
$.getJSON(url, '?q=' + data + "&diagnostics=true&env=store://datatables.org/alltableswithkeys")
.done(function (data) {
$("#name").text(data.query.results.quote.Symbol);
$("#date").text(data.query.results.quote.Date);
$("#close").text( data.query.results.quote.Close);
}).fail(function (jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
$("#result").text('Request failed: ' + err);
});
}
function SendRequest()
{
getData();
// document.getElementById('link1').click();
}
function CheckEnter(e)
{
if ((e.keyCode && e.keyCode==13) || (e.which && e.which==13)) {
return SendRequest();
}
return true;
}
</script>
</head>
<body style="margin: 0px;" bgcolor="#678fc2" onload="start();">
<table width="90%" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr valign="top">
<td class="normalText" align="left">
<label>Date</label>
<input name="date" id="dateInput" value="2010-07-17" type="text" />
<br/>
<label>Ticker Symbol</label>
<input name="txtQuote" id="symbol" onkeypress="return CheckEnter(event);" value="YHOO" type="text" />
<input name="button" type="button" id="btnQuote" onclick="return SendRequest();" value="Get Quotes" />
<br />
<div id="service" style="padding:10px 0;">
<table style="border: 1px solid black;" width="770">
<tbody>
<tr style="font-size: 14px; font-family: Arial,Helvetica,sans-serif; font-weight: bold; padding: 0px 2px;">
<td>Symbol</td>
<td>Date</td>
<td>Closing Price</td>
</tr>
<tr style="font-family: Arial,Helvetica,sans-serif; font-size: 14px; padding: 0px 2px;">
<td id="name"></td>
<td id="date"></td>
<td id="close"></td>
</tr>
</tbody>
</table>
<br /><br />
</div>
</td>
</tr>
</tbody>
I found the error I was having. This is the correct line now:
var data = encodeURIComponent("select * from yahoo.finance.historicaldata where symbol = '" + symbol + "' and startDate = '" + dateInput + "' and endDate = '" + dateInput + "'");
Related
i want to change text input to radio input.
In Layout: top is form, bottom is table
My current flow: after click "Insert", data added to table
Current is:
<td class="tdStyle">Dept No:</td>
<td>
<input type="text" id="txtDeptNo" >
</td>
And i want to change to radio.
Dep No can select: A/B/C . I tried but data in table always get value A
<input type="radio" id="txtDeptNo" name="aaa" value="A">
<label for="aaa">A</label><br>
<input type="radio" id="txtDeptNo" name="bbb" value="B">
<label for="bbb">B</label><br>
Demo link: http://jsfiddle.net/bvotcode/zuxgfvt0/11/
**HTML**
<div>
<table id="tblInputs" border="0" style=" width: 500px; border: thick; font-family: Verdana; font-size: medium; background-color: lightblue;">
<tr>
<td class="tdStyle">Emp Number</td>
<td>
<input type="text" id="txtEmpNo" >
</td>
</tr>
<tr>
<td class="tdStyle">Emp name:</td>
<td>
<input type="text" id="txtEmpName" >
</td>
</tr>
<tr>
<td class="tdStyle">Salary:</td>
<td>
<input type="text" id="txtSalary" >
</td>
</tr>
<tr>
<td class="tdStyle">Dept No:</td>
<td>
<input type="text" id="txtDeptNo" >
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input style="background-color:deepskyblue;color:white; font-weight:bold; " type="button" id="btnInsert" value="Insert" />
</td>
</tr>
</table>
</div>
<div>
<table id="tblDetails" style=" width:500px; border:thick; font-family:Verdana; font-size:medium; background-color:bisque;" border="1">
<thead>
<tr>
<th>
EmpNo
</th>
<th>
EmpName
</th>
<th>
Salary
</th>
<th>
DeptNo
</th>
</tr>
</thead>
<tbody id="tblBody"></tbody>
</table>
</div>
Javascript:
$("#btnInsert").click(function () {
var eNo = $("#txtEmpNo").val();
var eName = $("#txtEmpName").val();
var sal = $("#txtSalary").val();
var deptNo = $("#txtDeptNo").val();
var rowCnt = $("#tblBody tr").length;
if (eNo === "" && eName === "" && sal === "" && deptNo === "") {
alert("Enter values");
}
else {
if (rowCnt === 0) {
$("<tr><td id='Items" + rowCnt + "'>" + eNo + "</td><td>" + eName + "</td><td>" + sal + "</td><td>" + deptNo +" <input type='button' value='Delete' id='btnDelete"+rowCnt+"'/></td></tr>").appendTo("#tblBody");
$("input[id^=txt]").val("");
$("input[id^=btnDelete]").bind("click", function () {
$(this).parent().parent().remove();
});
}
else {
var dupCount = 0;
for (var i = 0; i < rowCnt; i++) {
var num = $("#Items" + i).html().toString();
if (eNo == num) {
dupCount++;
}
}
if (dupCount === 0) {
$("<tr><td id='Items" + rowCnt + "'>" + eNo + "</td><td>" + eName + "</td><td>" + sal + "</td><td>" + deptNo + " <input type='button' value='Delete' id='btnDelete" + rowCnt + "'/></td></tr>").appendTo("#tblBody");
$("input[id^=txt]").val("");
$("input[id^=btnDelete]").bind("click", function () {
$(this).parent().parent().remove();
});
}
else {
alert("Your entered EmpNo is already exists in the table !");
}
}
}
});
$('input[id^=btnDelete]').on('click', function(){ alert('y');
//$(this).parent(td).remove();
});
Related topic: link
Another wish is dropdown input
I'm trying to create my first application. I want to create a script that extracts some user's properties from Active Directory. I've created an HTA application, but it doesn't work.
I really need some support from you.
Thanks.
And here is HTML code [for HTA app
Here is script details:
<script type="VBscript">
Set objConnection = CreateObject("ADODB.Connection")
Set objCommand = CreateObject("ADODB.Command")
objConnection.Provider = ("ADsDSOObject")
objConnection.Open "Active Directory Provider"
objCommand.ActiveConnection = objConnection
objCommand.Properties("SearchScope") = 2
objCommand.CommandText = "SELECT userWorkstations,sAMAccountName,Mail,name,DisplayName,distinguishedName,LastLogonDate, FROM 'LDAP://dc=NESTLE,dc=com' WHERE objectCategory='user' AND displayname='" & VaR5 & "'"
Set objRecordSet = objCommand.Execute
</script>
<hta:application
applicationname="ADUCUserGrab"
border="thin"
borderstyle="normal"
caption="ADUC User Grab"
contextmenu="yes"
icon="aduc_sm.ico"
maximizebutton="no"
minimizebutton="yes"
navigable="yes"
scroll="yes"
selection="yes"
showintaskbar="yes"
singleinstance="yes"
sysmenu="yes"
version="1.0"
windowstate="normal"
>
</head>
And here is HTML code [for .hta app]:
<body topmargin="1" leftmargin="0" rightmargin="0" bottommargin="1" bgcolor="#000080" text="#FFFFFF">
<table border="0" width="640" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" height="110" bgcolor="#000080">
<i>Enter the <u>userid</u> or <u>last name</u> below and click appropriate search.</i><br>
<input type="text" name="StrUserid" size="20">
<input id=idsearchbutton class="button" type="button" value="Search On UserID" name="userid" onClick="SearchScope">
</td>
</tr>
<tr>
<td valign="top" height="300" bgcolor="#000080">
<Div id="BaseUserInfo"></Div>
<br>
<table border="0" width="100%" cellspacing="1" cellpadding="0">
<tr>
<td width="60%" valign="top"><Div id="AddUserInfo"></Div></td>
<td width="40%" valign="top"><Div id="AccUserStatus"></Div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" height="70" bgcolor="#000080">
<div id="AdditionalOptions"></div>
</td>
</tr>
</table>
If this is for your first HTA app experience then you`re aiming too high. Simplify mightily until your button pops up a "Hello World" message, then elaborate. Make the message include something pulled from a free text field, build gradually.
now it should work :-)
<html>
<head>
<hta:application
applicationname="ADUCUserGrab"
border="thin"
borderstyle="normal"
caption="ADUC User Grab"
contextmenu="yes"
icon="aduc_sm.ico"
maximizebutton="no"
minimizebutton="yes"
navigable="yes"
scroll="yes"
selection="yes"
showintaskbar="yes"
singleinstance="yes"
sysmenu="yes"
version="1.0"
windowstate="normal"
>
</head>
<body topmargin="1" leftmargin="0" rightmargin="0" bottommargin="1" bgcolor="#000080" text="#FFFFFF">
<script language="javascript">
var adStateOpen = 1;
var ADS_SCOPE_SUBTREE = 2;
function SearchScope () {
var e;
try {
var objConnection = new ActiveXObject( "ADODB.Connection" );
objConnection.Provider = "ADsDSOObject";
//objConnection.Properties( "User ID" ) = credUser;
//objConnection.Properties( "Password" ) = credPwd;
//objConnection.Properties( "Encrypt Password" ) = true;
objConnection.Open( );
if ( objConnection.State == adStateOpen ) {
var objCommand = new ActiveXObject( "ADODB.Command" );
objCommand.ActiveConnection = objConnection;
//objCommand.Properties( "Page Size" ) = 1000;
objCommand.Properties( "Searchscope" ) = ADS_SCOPE_SUBTREE;
objCommand.CommandText = (
"SELECT "
+ "CN, distinguishedName, sAMAccountName, description, userAccountControl"
+ " FROM "
+ "'LDAP://dc=NESTLE,dc=com'"
+ " WHERE "
+ "objectCategory='user'"
+ " AND ("
+ "sAMAccountName='" + document.getElementById( "StrUserid" ).value + "'"
+ " OR "
+ "displayname LIKE '%" + document.getElementById( "StrUserid" ).value + "%'"
+ ")"
);
var objRecordSet = objCommand.Execute( );
if ( !objRecordSet.EOF ) {
alert( objRecordSet.Fields("CN").Value );
}
}
} catch (e) {
// log error
alert( e.description );
}
}
</script>
<table border="0" width="640" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" height="110" bgcolor="#000080">
<i>Enter the <u>userid</u> or <u>last name</u> below and click appropriate search.</i><br>
<input type="text" id="StrUserid" name="StrUserid" size="20">
<input id=idsearchbutton class="button" type="button" value="Search On UserID" onClick="SearchScope()">
</td>
</tr>
<tr>
<td valign="top" height="300" bgcolor="#000080">
<Div id="BaseUserInfo"></Div>
<br>
<table border="0" width="100%" cellspacing="1" cellpadding="0">
<tr>
<td width="60%" valign="top"><Div id="AddUserInfo"></Div></td>
<td width="40%" valign="top"><Div id="AccUserStatus"></Div></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" height="70" bgcolor="#000080">
<div id="AdditionalOptions"></div>
</td>
</tr>
</table>
</body>
</html>
I am trying to create a dashboard in Google script HTML web app, the data consist, assigned project and total time spent on project by user
I have used some HTML code however it got jumbled, sharing the google sheet which consists data I want to replicate this data in the web app.Functions I am looking here is "Date Picker" "User name / Project name" are the search parameters
The dashboard should reflect according to the search parameters and data should consist Total worked users by the user or total hours or users spent on the project.
I know it's bit complex, if your refer my sheet you will get some idea what I am looking to publish in web app
Sheet
function doGet() {
return HtmlService
.createTemplateFromFile('index')
.evaluate();
}
function getData() {
return SpreadsheetApp
.openById('1Xr_zcL0hnfmKoECytosdgv2kffdalCdfe0ildF-_Re4')
.getSheetByName('Sheet4')
.getDataRange()
.getValues();
}
function getData1() {
return SpreadsheetApp
.openById('1Xr_zcL0hnfmKoECytosdgv2kffdalCdfe0ildF-_Re4')
.getSheetByName('Sheet5')
.getDataRange()
.getValues();
}
function getData2() {
return SpreadsheetApp
.openById('1Xr_zcL0hnfmKoECytosdgv2kffdalCdfe0ildF-_Re4')
.getSheetByName('Sheet6')
.getDataRange()
.getValues();
}
function getData3() {
return SpreadsheetApp
.openById('1Xr_zcL0hnfmKoECytosdgv2kffdalCdfe0ildF-_Re4')
.getSheetByName('Sheet7')
.getDataRange()
.getValues();
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
.carousel-inner img {
width: 100%; /* Set width to 100% */
min-height: 200px;
}
}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
<div class="row">
<div class="col-xs-3"><label for="usr"><p class="text-primary">User Name</label><input type="text" class="form-control" id="#"></div>
<div class="col-xs-3"><label for="usr"><p class="text-primary">Date Range Picker</label><input type="text" class="form-control" id="#"></div>
</div>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
<div class="col-sm-6">
<div class="well">
<p><html>
<? var data = getData(); ?>
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<p>Today Report</p>
<td class="bg-primary"style="background-color:#4885ed"><b>User Name</b></td>
<td class="bg-primary"style="background-color:#4885ed"><b>Total Worked Hours</b></td>
</tr>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</html></p>
</div>
<div class="well">
<table class="table table-bordered">
<thead>
<tr>
<td class="bg-primary"style="background-color:#4885ed"><b>Project Name</b></td>
<td class="bg-primary"style="background-color:#4885ed"><b>User Name</b></td>
<td class="bg-primary"style="background-color:#4885ed"><b>Total Worked Hours</b></td>
</tr>
</thead>
<tbody>
<tr>
<td>Test1</td>
<td>A</td>
<td>12:00:00</td>
</tr>
<tr>
<td>Test2</td>
<td>B</td>
<td>11:00:00</td>
</tr>
<tr>
<td>Test3</td>
<td>C</td>
<td>10:00:00</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-6">
<div class="well">
<p><html>
<? var data = getData1(); ?>
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<p>Monthly Report</p>
<td class="bg-primary"style="background-color:#4885ed"><b>User Name</b></td>
<td class="bg-primary"style="background-color:#4885ed"><b>Total Worked Hours</b></td>
</tr>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<? for (var j = 0; j < data[i].length; j++) { ?>
<td><?= data[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</table>
</html></p>
</div>
<div class="well">
<table class="table table-bordered">
<thead>
<tr>
<td class="bg-primary"style="background-color:#4885ed"><b>Project Name</b></td>
<td class="bg-primary"style="background-color:#4885ed"><b>User Name</b></td>
<td class="bg-primary"style="background-color:#4885ed"><b>Total Worked Hours</b></td>
</tr>
</thead>
<tbody>
<tr>
<td>Test1</td>
<td>A</td>
<td>122:00:00</td>
</tr>
<tr>
<td>Test2</td>
<td>B</td>
<td>211:00:00</td>
</tr>
<tr>
<td>Test3</td>
<td>C</td>
<td>190:00:00</td>
</tr>
</tbody>
</table>
</div>
</div>
<hr>
This is a simple html file communicating with Google Apps Script contained in a Spreadsheet. I test it a lot as a dialog and I also run it as a web app. The html file and the Google Apps Script communicate with each other and I pass one array from the html file to the Google Script. Hope this helps.
The Code.gs file:
function doGet()
{
var html = HtmlService.createHtmlOutputFromFile('index');
return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function getData(a)
{
var ts = Utilities.formatDate(new Date(), "GMT-6", "M/d/yyyy' 'HH:mm:ss");
a.splice(0,0,ts);
var ss=SpreadsheetApp.openById('SPREADSHEETID')
ss.getSheetByName('Form Responses 1').appendRow(a);
return true;
}
function getURL()
{
var ss=SpreadsheetApp.openById('SPREADSHEETID');
var sht=ss.getSheetByName('imgURLs');
var rng=sht.getDataRange();
var rngA=rng.getValues();
var urlA=[];
for(var i=1;i<rngA.length;i++)
{
urlA.push(rngA[i][0]);
}
return urlA;
}
The index.html file:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="data">
<br />Text 1<input name="t1" type="text" size="15" id="txt1" placeholder="Text 1" />
<br />Text 2<input name="t2" type="text" size="15" id="txt2" placeholder="Text 2" />
<br />Text 3<input name="t3" type="text" size="15" id="txt3" placeholder="Text 3" />
<br />Text 4<input name="t4" type="text" size="15" id="txt4" placeholder="Text 4" />
<br /><input type="radio" name="Type" value="Member" checked />Member
<br /><input type="radio" name="Type" value="Guest" />Guest
<br /><input type="radio" name="Type" value="Intruder" />Intruder
<br /><input type="button" value="submit" id="btn1" />
<br /><img id="img1" src="" alt="img1" width="300" />
</div>
<div id="resp" style="display:none;">
<h1>Response</h1>
<p>Your data has been received.</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#btn1').click(validate);
$('#txt4').val('');
$('#txt3').val('');
$('#txt2').val('');
$('#txt1').val('')
google.script.run
.withSuccessHandler(setURL)
.getURL();
});
function setURL(url)
{
$('#img1').attr('src',url[0]);
}
function setResponse(a)
{
if(a)
{
$('#data').css('display','none');
$('#resp').css('display','block');
}
}
function validate()
{
var txt1 = document.getElementById('txt1').value || '';
var txt2 = document.getElementById('txt2').value || '';
var txt3 = document.getElementById('txt3').value || '';
var txt4 = document.getElementById('txt4').value || '';
var type = $('input[name="Type"]:checked').val();
var a = [txt1,txt2,txt3,txt4,type];
if(txt1 && txt2 && txt3 && txt4)
{
google.script.run
.withSuccessHandler(setResponse)
.getData(a);
return true;
}
else
{
alert('All fields must be completed.');
}
}
function loadTxt(from,to)
{
document.getElementById(to).value = document.getElementById(from).value;
}
function radioValue()
{
var radios = document.getElementsByName('genderS');
for (var i = 0, length = radios.length; i < length; i++)
{
if(radios[i].checked)
{
return radios[i].value;
}
}
}
console.log('My Code');
</script>
</body>
</html>
page is available here: http://macrorevolution.com/calculators/bmr/
How do I go about creating space after my input[text] box. For example, I want to create 1px spacing between the input box and "Years","ft","In"."k/cal per day".
I tried using .ipadding but that didn't work so ignore it. Also, how can I shift all of the input boxes closer to "Age", "Height", "weight"?
I am new to html/css.
<?php
$answer = "";
$agev = "";
$feetv = "";
$inchesv = "";
$weightv = "";
$sex = "";
if(isset($_POST['agev']) && isset($_POST['feetv']) && isset($_POST['inchesv']) && isset($_POST['weightv']) && isset($_POST['sex'])) {
$agev = $_POST['agev'];
$feetv = $_POST['feetv'];
$inchesv = $_POST['inchesv'];
$weightv = $_POST['weightv'];
$sex = $_POST['sex'];
$totalheightv = $inchesv + ($feetv*12);
$heightcm = $totalheightv*2.54;
$weightkg = $weightv/2.2;
if($sex=='male') $answer = round((66.47 + (13.75*$weightkg) + (5*$heightcm) - (6.75*$agev)),0);
if($sex=='female') $answer = round((665.09 + (9.56*$weightkg) + (1.84*$heightcm) - (4.67*$agev)),0);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Basal Metabolic Rate Calculator</title>
<style>
table {
border: 30px;
font-size:13px;
font-family: 'PT Sans', sans-serif;
background-color:#FFFFFF;
}
tr.spaceUnder > td
{
padding:0em 1em 1em 0em;
}
p.ss {
font-size:30px;
}
.ipadding {
padding:1px;
}
</style>
</head>
<body>
<div class="box pt20">
<p class="ss">MacroRevolution BMR Calculator</p><br>
<table width='80%' style="margin: 0 auto;">
<tr class="spaceUnder">
<td colspan="4">
BMR = Basal Metabolic Rate (similar to RMR = Resting Metabolic Rate). Your BMR represents the number of calories your body burns at rest. Regular routine of cardiovascular exercise can increase your BMR, improving your health and fitness when your body's ability to burn energy gradually slows down.
</td>
</tr>
</table>
<form method='post' action=''>
<table width='80%' style="margin: 0 auto;">
<tr class="spaceUnder">
<td>Age:</td>
<td><input type='text' name='agev' value="<?php echo $agev; ?>"/>Years</td>
</tr>
<tr class="spaceUnder">
<td>Height:</td>
<td align="justify"><input type='text' name='feetv' value="<?php echo $feetv; ?>"/>Ft<p> </p>
<input type='text' name='inchesv' value="<?php echo $inchesv; ?>"/>In</td>
</tr>
<tr class="spaceUnder">
<td>Weight:</td>
<td align="left"><input type='text' name='weightv' value="<?php echo $weightv; ?>"/>lbs</td>
</tr>
<tr class="spaceUnder">
<td colspan="2"><input type='radio' name='sex' value='male'>Male
<input type='radio' name='sex' value='female'>Female</td>
</tr>
<tr class="spaceUnder">
<td colspan="2"><input type='submit' class="button highlight small" value='Calculate'/></td>
</tr>
<tr class="spaceUnder">
<td colspan="2">Your BMR is <input type='text' style="width: 50px;" value='<?php echo $answer?>' />k/cal per day </td>
</tr>
</table>
</form>
<table border='0' width='80%' style="margin: 0 auto;">
<td colspan="4">
Formula for BMR
If you want to manually calculate your BMR, use the (Harris-Benedict formula) <br> below. <br><br>
Men: BMR=66.47+ (13.75 x W) + (5.0 x H) - (6.75 x A) <br>
Women: BMR=665.09 + (9.56 x W) + (1.84 x H) - (4.67 x A) <br><br>
W = Weight in kilograms (lbs/2.2)<br>
H = Height in centimeters (inches x 2.54)<br>
A = Age in years <br><br><br>
</td>
</table>
</div>
</body>
</html>
put a margn on the right side.
input {
margin-right:5px;
}
So many ways, one is as:
input[type="text"] {margin-right:1px;}
input[type="radio"] {margin-right:5px;}
.spaceUnder td:first-child {width:50px;}
Use :
input{
margin-right:1px;
}
For bringing textboxes near to the label put them in the same td.
See this Fiddle
just follow the image and create a new css rule and update css rule.Hope it will be helpful!
Step: 1
Step:2
I'm trying to tamper with my html table settings to set borders but I think my syntax is wrong. I've looked around online and tried multiple things with no success. Any suggestions?
For example, this code is applied to the first table but does not appear correctly on page.
<table BORDER="30" CELLPADDING="10" CELLSPACING="3" BORDERCOLOR="00FF00" width='80%' style="margin: 0 auto;">
</table>
HTML code is applied here: http://macrorevolution.com/calculators/bmr/
The only table settings that seem to work are "width='80%' style="margin: 0 auto;""
<?php
$answer = "";
$agev = "";
$feetv = "";
$inchesv = "";
$weightv = "";
$sex = "";
if(isset($_POST['agev']) && isset($_POST['feetv']) && isset($_POST['inchesv']) && isset($_POST['weightv']) && isset($_POST['sex'])) {
$agev = $_POST['agev'];
$feetv = $_POST['feetv'];
$inchesv = $_POST['inchesv'];
$weightv = $_POST['weightv'];
$sex = $_POST['sex'];
$totalheightv = $inchesv + ($feetv*12);
$heightcm = $totalheightv*2.54;
$weightkg = $weightv/2.2;
if($sex=='male') $answer = 66.47 + (13.75*$weightkg) + (5*$heightcm) - (6.75*$agev);
if($sex=='female') $answer = 665.09 + (9.56*$weightkg) + (1.84*$heightcm) - (4.67*$agev);
}
?>
<!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>Basal Metabolic Rate Calculator</title>
</head>
<body>
<div class="box pt20">
<table BORDER="30" CELLPADDING="10" CELLSPACING="3" BORDERCOLOR="00FF00" width='80%' style="margin: 0 auto;">
<td colspan="4">
<h4 style="background: #99FF99;">
<strong>BMR = Basal Metabolic Rate</strong> (similar to RMR = Resting Metabolic Rate). Your BMR represents the number of calories your body burns at rest. Regular routine of cardiovascular exercise can increase your BMR, improving your health and fitness when your body's ability to burn energy gradually slows down.
</h4>
</td>
</table>
<form method='post' action=''>
<table border='5' width='80%' font-family:Georgia; font-size:1; class="table" style="margin: 0 auto;" bgcolor="FFFFFF">
<tr class="calcheading">
<td colspan="2"><font size="10">MacroRevolution BMR Calculator</font></td>
</tr>
<tr class="calcrow">
<td>Age:</td>
<td><input type='text' name='agev' value="<?php echo $agev; ?>"/>Years</td>
</tr>
<tr class="calcrow2">
<td>Height:</td>
<td align="justify"><input type='text' name='feetv' value="<?php echo $feetv; ?>"/>Ft<input type='text' name='inchesv' value="<?php echo $inchesv; ?>"/>In</td>
</tr>
<tr class="calcrow">
<td>Weight:</td>
<td align="left"><input type='text' name='weightv' value="<?php echo $weightv; ?>"/>lbs</td>
</tr>
<tr class="gender">
<td colspan="2"><input type='radio' name='sex' value='male'>Male
<input type='radio' name='sex' value='female'>Female</td>
</tr>
<tr class="submit">
<td colspan="2"><input type='submit' class="button highlight small" value='Calculate'/></td>
</tr>
<tr class="calcrow">
<td colspan="2">Your BMR is <span style="background-color: #00CC33"><?php echo $answer?></span></td>
</tr>
</table>
</form>
<table border='0' width='80%' class="table" align="center" style="margin: 0 auto;">
<td colspan="4">
<h2 style="background: #99FF66;">Formula for BMR</h2>
<h4 style="background: #99FF66;">
If you want to manually calculate your BMR, use the (Harris-Benedict formula) <br> below. <br><br>
Men: BMR=66.47+ (13.75 x W) + (5.0 x H) - (6.75 x A) <br>
Women: BMR=665.09 + (9.56 x W) + (1.84 x H) - (4.67 x A) <br><br>
W = Weight in kilograms (lbs/2.2)<br>
H = Height in centimeters (inches x 2.54)<br>
A = Age in years
</h4>
</td>
</table>
</div>
</body>
</html>
<!-- ///////////////////////////////////////////////////////////////////////////////////////////-->
Avoid HTML attributes like border="30" cellpadding="10" cellspacing="3" bordercolor="#00ff00" and use CSS instead:
<style>
table {
border: 30px solid #00ff00;
}
</style>
Even better, move the styles to another file
<link rel="stylesheet" type="text/css" href="stylesheet.css">