How i can I take print by default landscape mode. If I give in landscape mode also its printning as a portrait mode only.
I tried the following code. That one also not working.
#media print{#page {size: landscape}}
Please find the image. How can I resolve this issue. I want to show only the text what I have entered in the textbox. Please help me how can I resolve this issue.
jsfiddle
$scope.print = function(divName,secondDiv){
$timeout(function () {
var printContents = document.getElementById(divName).innerHTML;
var printContents1 = document.getElementById(secondDiv).innerHTML;
console.log(printContents);
var w = window.open();
w.document.open();
$timeout(function(){
w.document.onreadystatechange=function(){
if(this.readyState==='complete'){
this.onreadystatechange=function(){};
w.focus();
w.print();
w.close();
}
}
},1000);
w.document.write('<!doctype html><html><head><title>');
w.document.write('</title><link rel="stylesheet" type="text/css" href="css/main.css" /><link rel="stylesheet" type="text/css" href="css/docs.css" /><link rel="stylesheet" type="text/css" href="css/angular-material.css" /></head><body onload="window.print();window.close()" style="font-size:14px;" ng-app="app" class="" ng-controller="mainController" >');
w.document.write(printContents+printContents1); //only part of the page to print, using jquery
w.document.write('</body></html>');
w.document.write('<style>#media print { input { border: none !important;text-align:right!important;font-size:12px!important;margin-top:2px!important; } th,td{height:3px!important;position:relative;} }</style>');
w.document.close(); //this seems to be the thing doing the trick
}, 1000);
}
<div ng-hide="true" class="rec_wrapper" id="printableArea"
style="margin-top: 0px; width: 100%;">
<table class="makeWidth" border="1" style="border-collapse:collapse;">
<tr>
<td>
<table class="first" width="782" border="1" style="border-collapse:collapse;height:10px;">
<tr>
<td width="702">
<div align="center"><strong><b>Challan For Cash Deposit in Any Branch Of SBI (Power Jyothi)</b></strong></div>
<p style="text-align:center">CUSTOMER COPY</p>
</td>
</tr>
</table></br>
<p style="margin-top:1px;"><strong><b> Bank Of </b> <b><u>Branch Coimbatore</u></b></strong> Branch</p>
<p style="margin-top:0px;"><strong>Date <b><u> </u> </b> </strong></p>
<p style="margin-top:0px;">For the Credit of <strong><b></strong></b></p>
<p style="margin-top:0px;">Depositor's Name : <strong><u> <input type="text" class="input printText1" ng-model="depositorName" style="font-weight:900;font-size:10px" value={{depositorName}} placeholder="Depositor Name"></u></strong> </p>
<p style="margin-top:0px;">Depositor's Mobile No :<strong><u> <input id="depositNum" type="number" class="input printText" ng-model="depositorNo" style="font-weight:900;font-size:10px" value={{depositorNo}} placeholder="Depositor mobile number"></u></strong> </p>
<p style="margin-top:0px;">Amount in Rs :<strong><b><u></u></b></strong> </p>
<p style="margin-top:0px;">Amount ( in Words) : <strong><b><u></u></b></strong> </p>
</hr>
<hr>
<table id="cashDetails" border="1" style="border-collapse:collapse;">
<tr>
<th colspan="3" style="text-align:center">Details of Cash</th>
</tr>
<tr>
<td style="text-align:center;">Cash Notes</td>
<td style="text-align:center;">Amount in Rs.</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount" id="textBox2" value={{amount}}>X 2000</td>
<td style="text-align:center">{{ (+amount) * 2000}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount1" id="textBox2" value={{amount1}}>X 500</td>
<td style="text-align:center">{{ (+amount1) * 500}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount2" id="textBox2" value={{amount2}}>X 200</td>
<td style="text-align:center">{{ (+amount2) * 200}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount3" id="textBox2" value={{amount3}}>X 100</td>
<td style="text-align:center">{{ (+amount3) * 100}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount4" id="textBox2" value={{amount4}}>X 50</td>
<td style="text-align:center">{{ (+amount4) * 50}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount5" id="textBox2" value={{amount5}}>X 20</td>
<td style="text-align:center">{{ (+amount5) * 20}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount6" id="textBox2" value={{amount6}}>X 10</td>
<td style="text-align:center">{{ (+amount6) * 10}}</td>
</tr>
<tr>
<td style="text-align:left;">Coins</td>
<td></td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount7" id="textBox2" value={{amount7}}>X 10</td>
<td style="text-align:center">{{ (+amount7) * 10}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount8" id="textBox2" value={{amount8}}>X 5</td>
<td style="text-align:center">{{ (+amount8) * 5}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()" ng-model="amount9" id="textBox2" value={{amount9}}>X 2</td>
<td style="text-align:center;width:48%">{{ (+amount9) * 2}}</td>
</tr>
<tr>
<td><input class="input printText" type="number" ng-change="calcTotal()"ng-model="amount10" id="textBox2" value={{amount10}}>X 1</td>
<td style="text-align:center">{{ (+amount10) * 1}}</td>
</tr>
<tr>
<td style="text-align:left;height:10px;">Total</td>
<td style="text-align:center;height:20px">{{total}}</td>
</tr>
</table></br></br></br></br></br>
<label style="margin-left:7px;">Cashier</label>
<label style="margin-left:90px;">Cash/Passing Officer</label>
<label style="margin-left:20px;">Depositor's Signature</label>
</td>
</tr></table>
</div></br></br></br>
Try this it might work..
#page {
size: A4 landscape;
}
Related
Issue: Word is wrapping when I am typing in the html page. But, after downloading the form as PDF, it is not showing the word as wrapped. Please see the screenshot below:
Before downloading
After downloading
// download contents of the page
document.getElementById("download").addEventListener("click", () => {
const formBox = document.getElementById("formBox");
var opt = {
margin: 0,
filename: "caseFile" + request + ".pdf",
html2canvas: {
scale: 2
},
jsPDF: {
unit: 'in',
format: 'letter',
orientation: 'portrait'
}
};
html2pdf().from(formBox).set(opt).save();
})
<form id="formBox">
<table id="caseInfo">
<tr>
<th colspan="2">Case Info</th>
</tr>
<tr>
<td>Date of Offense</td>
<td>
<input type="date" id="dateOffense">
</td>
</tr>
<tr>
<td>Time of Offense</td>
<td><input type="time" id="timeOffense"></td>
</tr>
<tr>
<td>Location of Offense</td>
<td><input type="text" id="locationOffense"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text" id="caseCity"></td>
</tr>
<tr>
<td>Zip</td>
<td><input type="text" id="caseZip"></td>
</tr>
<tr>
<td>Type of Offense</td>
<td><input type="text" id="typeOffense"></td>
</tr>
</table>
<br>
<div class="row">
<table class="column" id="caseAuthorizedBy">
<tr>
<th colspan="2">Case Authorized By</th>
</tr>
<tr>
<td>Consent</td>
<td>
<input type="radio" name="search" id="consent">
</td>
</tr>
<tr>
<td>Search Warrant</td>
<td><input type="radio" name="search" id="searchWarrant"></td>
</tr>
<tr>
<td>Deceased</td>
<td><input type="radio" name="search" id="Deceased"></td>
</tr>
<tr>
<td>Other(Specify)</td>
<td><input type="radio" name="search" id="otherSearch"></td>
</tr>
</table>
<br>
<table class="column" id="custodyInformation">
<tr>
<th colspan="2">Custody Info</th>
</tr>
<tr>
<td>In-Custody</td>
<td> <input type="radio" name="custody" id="inCustody"></td>
</tr>
<tr>
<td>Not In-Custody</td>
<td><input type="radio" name="custody" id="notInCustody"></td>
</tr>
</table>
</div>
<br><br>
<div id="root0"></div>
<!-- <hr> -->
<br><br>
<div id="analysisDiv">
<table id="analysisTable">
<tr>
<th colspan="1">Analysis</th>
</tr>
<tr>
<td><textarea id="analysis" rows="15" cols="20" wrap="hard" name="text" /></textarea>
</td>
</tr>
</table>
</div>
<br>
</form>
<!--PDF download button-->
<div class="downloadButton">
<button class="button-15" id="download">Download PDF</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I need help with this. I have tried many examples I found online. But couldn't find anything helpful. I am new to JavaScript, so I don't know any effective way of doing this. If my javascript is incorrect or not an effective way of doing it feel free to provide new code or way of doing this. I am totally lost. Help would be appreciated. Thanks!
I want to change the total price when the count or unit price of the products are changed on the website. I know I should use the onChange function, but I have no idea about how to write the JavaScript code.
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true" >
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true" >
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true" >
<input id="productCount" type="text" name="countList" onchange="update()" class="layui-input count"
th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true" >
<input id="normalPrice" type="text" name="priceList" onchange="update()" class="layui-input price"
th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price"
th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
<a href="javascript:void(0)" class="delBtn redType" onclick='delColumns(this)'>Del</a>
</td>
</tr>
</tbody>
</table>
I hope that the totalPrice = count*price could refresh whenever the user changes one of those values.
You can easily monitor the pointed input fields (#productCount and #normalPrice) and change the value of #total according to it. In the code below, I use the input event and I'm not using inline event handlers, but rather the function addEventListener() (know why).
const productCountInput = document.querySelector('#productCount');
const productPriceInput = document.querySelector('#normalPrice');
const totalPriceInput = document.querySelector('#total');
function updateTotalPrice() {
totalPriceInput.value = (parseFloat(productCountInput.value) * parseFloat(productPriceInput.value)) || 0;
}
productCountInput.addEventListener('input', updateTotalPrice);
productPriceInput.addEventListener('input', updateTotalPrice);
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true">
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true">
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true">
<input id="productCount" type="text" name="countList" class="layui-input count" th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true">
<input id="normalPrice" type="text" name="priceList" class="layui-input price" th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price" th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
Del
</td>
</tr>
</tbody>
</table>
I'm working on a project and what i want to achieve is when the value is textfield2 is lesser than the value in textfield1, the button must be enabled and i know jquery or javascript will be needed to make this happen
<table width="50%" border="0" align="center" cellpadding="8" cellspacing="8">
<tr>
<td width="89" bgcolor="#F9F9F9" class="blacktext">Textfield 1
<div align="left"></div><label></label>
</td>
<td width="291" align="center" bgcolor="#F9F9F9" class="redtext"><div align="left">
<input name="Textfield1" type="text" class="textbox" id="Textfield1" placeholder="Enter Amount" autocomplete="off" value="10">
<div></div>
</td>
</tr>
<tr>
<td bgcolor="#F9F9F9" class="blacktext">Textfield 2</td>
<td bgcolor="#F9F9F9" class="redtext"><label for="Textfield2"></label>
<input name="Textfield2" type="password" class="textbox" id="Textfield2" placeholder="Enter your Password">
</td>
</tr>
<tr>
<td colspan="2" align="right" class="redtext"><button disabled>Submit</button></td>
</tr>
</table>
any help?
Use keyup to identify changes on the input
parseFloat parses a string argument and returns a floating point number
.prop() set one or more properties for every matched element
Try this:
$('#Textfield1,#Textfield2').on('keyup', function() {
var btn = $('button.mybutton');
if (parseFloat($('#Textfield1').val()) > parseFloat($('#Textfield2').val())) {
btn.prop('disabled', false);
} else {
btn.prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="50%" border="0" align="center" cellpadding="8" cellspacing="8">
<tr>
<td width="89" bgcolor="#F9F9F9" class="blacktext">Textfield 1
<div align="left"></div>
</td>
<td width="291" align="center" bgcolor="#F9F9F9" class="redtext">
<div align="left">
<input name="Textfield1" type="text" class="textbox" id="Textfield1" placeholder="Enter Amount" autocomplete="off" value="10">
</div>
</td>
</tr>
<tr>
<td bgcolor="#F9F9F9" class="blacktext">Textfield 2</td>
<td bgcolor="#F9F9F9" class="redtext">
<label for="Textfield2"></label>
<input name="Textfield2" type="password" class="textbox" id="Textfield2" placeholder="Enter your Password">
</td>
</tr>
<tr>
<td colspan="2" align="right" class="redtext">
<button disabled class='mybutton'>Submit</button>
</td>
</tr>
</table>
Fiddle here
function enableBtn(){
textBox1 = parseFloat($("#Textfield1").val());
textBox2 = parseFloat($("#Textfield2").val());
if(textBox1 > textBox2)
{
$(".redtext button").prop("disabled", false);
}else{
$(".redtext button").prop("disabled", false);
}
}
$('#Textfield2, #Textfield1').on('input',function(e){
enableBtn();
});
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>
<table width="50%" border="0" align="center" cellpadding="8" cellspacing="8">
<tr>
<td width="89" bgcolor="#F9F9F9" class="blacktext">Textfield 1
<div align="left"></div>
</label></td>
<td width="291" align="center" bgcolor="#F9F9F9" class="redtext"><div align="left">
<input class="amtBox" name="Textfield1" type="text" class="textbox" id="Textfield1" placeholder="Enter Amount" autocomplete="off" value="10">
</div></td>
</tr>
<tr>
<td bgcolor="#F9F9F9" class="blacktext">Textfield 2</td>
<td bgcolor="#F9F9F9" class="redtext"><label for="Textfield2"></label>
<input class="amtBox" name="Textfield2" type="text" class="textbox" id="Textfield2" placeholder="Enter Amount"></td>
</tr>
<tr>
<td colspan="2" align="right" class="redtext"><button id="butSubmit" disabled>Submit</button></td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('.amtBox').on('keyup keypress blur', function(){
var Textfield1 = $('#Textfield1').val();
var Textfield2 = $('#Textfield2').val();
console.log(Textfield1 + " :: " + Textfield2);
if (Textfield2 < Textfield1) {
$('#butSubmit').prop('disabled', false);
console.log("Less");
} else {
$('#butSubmit').prop('disabled', true);
console.log("More");
}
});
});
</script>
try this !!
try this Demo
$('#Textfield2, #Textfield1').on('keypress',function(){
var text1 = parseInt($('#Textfield1').val());
var text2 = parseInt($('#Textfield2').val());
var btn = $('.redtext > button');
if(text1 > text2){
btn.prop('disabled', false);
}else{
btn.prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="50%" border="0" align="center" cellpadding="8" cellspacing="8">
<tr>
<td width="89" bgcolor="#F9F9F9" class="blacktext">Textfield 1
<div align="left"></div>
</label></td>
<td width="291" align="center" bgcolor="#F9F9F9" class="redtext"><div align="left">
<input name="Textfield1" type="text" class="textbox" id="Textfield1" placeholder="Enter Amount" autocomplete="off" value="10">
</div></td>
</tr>
<tr>
<td bgcolor="#F9F9F9" class="blacktext">Textfield 2</td>
<td bgcolor="#F9F9F9" class="redtext"><label for="Textfield2"></label>
<input name="Textfield2" type="password" class="textbox" id="Textfield2" placeholder="Enter your Password"></td>
</tr>
<tr>
<td colspan="2" align="right" class="redtext"><button disabled>Submit</button></td>
</tr>
</table>
Try this:
HTML
<table width="50%" border="0" align="center" cellpadding="8" cellspacing="8">
<tr>
<td width="89" bgcolor="#F9F9F9" class="blacktext">Textfield 1
<div align="left"></div>
</label></td>
<td width="291" align="center" bgcolor="#F9F9F9" class="redtext"><div align="left">
<input name="Textfield1" type="text" class="textbox" id="Textfield1" placeholder="Enter Amount" autocomplete="off" value="10">
</div></td>
</tr>
<tr>
<td bgcolor="#F9F9F9" class="blacktext">Textfield 2</td>
<td bgcolor="#F9F9F9" class="redtext"><label for="Textfield2"></label>
<input name="Textfield2" type="text" class="textbox" id="Textfield2" placeholder="Enter your number"></td>
</tr>
<tr>
<td colspan="2" align="right" class="redtext"><button disabled class=
"disabledButton">Submit</button></td>
</tr>
</table>
Javascript:
$('#Textfield2').keyup(function(){
var textBox1 = $('#Textfield1').val();
var textBox2 = $('#Textfield2').val();
if(textBox2>textBox1){
$('.disabledButton').prop("disabled", false);
}
});
I have a working calculator on my website that is used for business expense savings estimation. currently the calculator auto-calculates in real time as the user inputs numbers. i would like the user to have to click a calculate button in order to see any results. could someone please help as i am having a hard time adjusting the code myself. here is the current code:
function calc() {
var cost = document.getElementById('phone').value * (.30) +
document.getElementById('energy').value * (.05) +
document.getElementById('cell').value * (.30) + document.getElementById('office').value * (.15) + document.getElementById('card').value *
(.35) + document.getElementById('waste').value * (.5) +
document.getElementById('payroll').value * (.5);
document.getElementById('cost').value = (cost * 12).toFixed(2);
}
<form name="form1" method="post" action="">
<table width="33%" align="center">
<tr>
<td valign="top" style="text-align: center"><strong>
Category</strong>
</td>
<td style="text-align: center"><strong>Monthly Expenses</strong>
</td>
</tr>
<tr>
<td valign="top"> </td>
<td> </td>
</tr>
<tr>
<td width="47%" valign="top">Telephone & Internet</td>
<td width="53%">
<input name="phone" id="phone" type="text" onchange="calc
()" />
</td>
</tr>
<tr>
<td valign="top">Energy</td>
<td>
<input name="energy" id="energy" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Cell Phone</td>
<td>
<input name="cell" id="cell" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Office Supplies</td>
<td>
<input name="office" id="office" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Merchant Card Fees</td>
<td>
<input name="card" id="card" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td valign="top">Waste Removal</td>
<td>
<input name="waste" id="waste" type="text" onchange="calc()" />
</td>
</tr>
<tr>
<td height="31" valign="top">3rd Party Payroll Fees</td>
<td>
<input name="payroll" id="payroll" type="text" onchange="calc
()" />
</td>
</tr>
<tr>
</tr>
</table>
<p> </p>
<div align="center">
<table width="33%" border="0">
<tr>
<td width="54%" height="31" valign="top"><strong>Estimated Annual
Savings:</strong>
</td>
<td width="46%">
<textarea name="cost" rows="1" id="cost" readonly style="overflow:hidden" input type="number"></textarea>
</td>
</tr>
Currently, your inputs are set up to call calc() whenever their onchange event is fired. This happens whenever the value is changed and the input is blurred (no longer in focus).
Remove the onchange="calc()" attribute on all your inputs, and add a button whever it makes sense to on your page with onclick="calc()":
<button onclick="calc()">Calculate</button>
Place button with Javascript event outside form
<button onclick="calc();">Calculate</button>
Delete all onchange="calc()" and add this html code to your page, that's it.
<button onclick="calc()">Calculate Expenses</button>
Remove the call to onchange="calc()" from all.
Put <div align="center">
<table width="33%" border="0">
<tr>
<td align="Center">
<input type="button" value="Click To Calculate" onclick="calc()" />
</td>
</tr>
</div>
I want to use a jQuery UI slider on this page, but for some reason it won't work. You will see I am busy with "Height in cm without shoes" and I will complete this form as soon as I can get this problem solved. Here is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Module Health Measurements</title>
<link rel="stylesheet" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css">
<script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.mouse.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="jquery-ui-1.10.3/demos/demos.css">
<script>
$(function() {
$( "#slider-40" ).slider({
min: 65,
max: 240,
value: 170,
slide: function( event, ui ) {
$( "#40" ).val( ui.value );
}
});
$( "#40" ).val( $( "#slider-40" ).slider( "40" ) );
});
</script>
<style type="text/css">
/*
.style2 {font-size: medium}
*/
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="550" border="1">
<tr>
<td colspan="2" bgcolor="#5ACDC7"><h3>Health Measurements</h3></td>
</tr>
<tr>
<td width="332">Height in cm without shoes</td>
<td width="202">
<label for="40"><span class="style2">Height</span>:</label>
<input type="text" id="40" style="border:0; color:#f6931f; font-weight:bold;" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="slider-40" style="height:5px;"></div>
</td>
</tr>
<tr>
<td>Weight in kg without shoes</td>
<td><label>
<input name="41" type="text" id="41" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Hip circumference in cm</td>
<td><label>
<input name="42" type="text" id="42" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Waist circumference in cm</td>
<td><label>
<input name="43" type="text" id="43" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Have you eaten in the last 7 hours?</td>
<td><label>
<select name="44" id="44">
<option>Yes</option>
<option>No</option>
</select>
</label></td>
</tr>
<tr>
<td>Systolic blood pressure mmHg</td>
<td><label>
<input name="45" type="text" id="45" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Diastolic blood pressure mmHg</td>
<td><label>
<input name="46" type="text" id="46" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Glucose mmol/l</td>
<td><label>
<input name="47" type="text" id="47" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Total Cholesterol mmol/l</td>
<td><label>
<input name="48" type="text" id="48" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" bgcolor="#5ACDC7"><h5>BP 5 Minute Follow-up</h5></td>
</tr>
<tr>
<td>Systolic blood pressure 5 min</td>
<td><label>
<input name="51" type="text" id="51" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td>Diastolic blood pressure 5 min</td>
<td><label>
<input name="52" type="text" id="52" size="7" maxlength="7" />
</label></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td><label>
<input type="submit" name="button1" id="button1" value="Submit" />
</label></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
I would appreciate if someone could just point out if you see some errors?
This works for me:
plunker
If the slider does not show up at all please check:
jquery and jquery-ui are loaded.
jquery-ui is loaded AFTER jquery