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
Related
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>
VIEW PAGE
<table>
<thead>
<tr>
<th><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th>Stipendiary Type</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Stipendiary ₹</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="1" /><input type="hidden" name="amount[]" value="500" tabindex ="-1" />
</td>
<td>1</td>
<td>Jeinbai Nesamony</td>
<td>Poor Pension</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">500.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="2" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>2</td>
<td>Chellammal Kochimoni</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="3" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>3</td>
<td>Thasammal Thangaiah</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="4" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>4</td>
<td>Roselet</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " name="bene_id[]" value="5" /><input type="hidden" name="amount[]" value="400" tabindex ="-1" />
</td>
<td>5</td>
<td>Kamalam Chellam R.</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus[]" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein">400.00</td>
</tr>
</tbody>
MY REQUIREMENT
I want to save bellowed data's to table
1. bene_id
2. Bonus ₹
3. Stipendiary ₹
I've fetch this table data form existing Beneficiary Table. So Bene_id and Stipendiary ₹ value get from that tabel. Bonus ₹ will be an input.
Now i want to save table data to the payment table.
I'm trying to post the value by array. it's working fine.
now i've an issue with the check box. i want to neglect the row value that unchecked. That means i want row value which was checkbox : checked
i'm expecting jquery for passing checkbox : checked row value to hidden input array.
As i told you in the comments section, you can use normal HTML forms to submit to the action method on your controller, but you need to modify your form a little bit, this is the easiest solution.
Despite of option one simplicity i decided to give you another approach to solve this problem, so first look at the code of HTML and JavaScript:
<table>
<thead>
<tr>
<th><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th>Stipendiary Type</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Stipendiary ₹</th>
</tr>
</thead>
<tbody id="details">
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="1" />
</td>
<td>1</td>
<td>Jeinbai Nesamony</td>
<td>Poor Pension</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">500.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="2" />
</td>
<td>2</td>
<td>Chellammal Kochimoni</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount" >400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="3" />
</td>
<td>3</td>
<td>Thasammal Thangaiah</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount" >400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="4" />
</td>
<td>4</td>
<td>Roselet</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" name="bonus" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">400.00</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" checked="checked" class="chkclass " id="bene_id" value="5" />
</td>
<td>5</td>
<td>Kamalam Chellam R.</td>
<td>Poor Aid</td>
<td class="text-right box" id="hideshow">
<input type="text" id="bonus" value="" class="tbl-input-cus bonus" tabindex ="1" />
</td>
<td class="text-right wagein" id="amount">400.00</td>
</tr>
</tbody>
</table>
<button id="submit">Submit</button>
<script type="text/javascript" src="<?= base_url(assets/js/jquery.min.js) ?>"></script>
<script type="text/javascript">
function jsonify(){
var rows = $('#details tr');
var a = [];
rows.each(function(){
if($(this).find('#bene_id').is(':checked'))
{
var bene_id = $(this).find('#bene_id').val();
var stipendiary = $(this).find('#amount').html();
var bonus = $(this).find('#bonus').val();
var x = {
bene_id:bene_id,
stipendiary:stipendiary,
bonus:bonus
};
a.push(x);
}
});
var c = JSON.stringify(a);
return c;
}
$(function(){
$('#submit').click(function(){
$data = jsonify();
$.ajax({
type:'POST',
url:'<?= base_url('controller/method_name') ?>',
data:{details:data},
success:function(response)
{
//if you data save successfuly, do sth here..
}
});
});
});
The following code is a PHP code of the action method on the specified controller:
public function method_name()
{
$details = json_decode($this->input->post('details'));
foreach($details as $det ){
$bene_id = $det->bene_id;
$stipendiary = $det->stipendiary;
$bonus = $det->bonus;
// your logic goes here
}
}
In this solution i didn't considered the validation and security issues, because i wanted to make it simple, so before you put it in your production server you must deal with these issues.
I hope it helps.
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;
}
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 am trying to implement a registration page where fields can be different based on user type.
Here is my JSP page
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$(".Alumni").hide();
$('#selectType').change(function () {
var val = $(this).val();
if (val == "ALUMNI") {
$('.Alumni').show();
}
});
});
</script>
<style>
.error {
color: #ff0000;
}
.errorblock {
color: #000;
background-color: #ffEEEE;
border: 3px solid #ff0000;
padding: 8px;
margin: 16px;
}
</style>
</head>
<body>
<h2>Registration </h2>
<form:form method="POST" action="register" modelAttribute ="user">
<form:errors path="*" cssClass="errorblock" element="div" />
<table>
<tr>
<td>First Name :</td>
<td><form:input path="fName" />
</td>
<td><form:errors path="fName" cssClass="error" />
</td>
</tr>
<tr>
<td>Last Name :</td>
<td><form:input path="lName" />
</td>
<td><form:errors path="lName" cssClass="error" />
</td>
</tr>
<tr>
<td>Middle Name :</td>
<td><form:input path="mName" />
</td>
<td><form:errors path="mName" cssClass="error" />
</td>
</tr>
<tr>
<td>User Name :</td>
<td><form:input path="username" />
</td>
<td><form:errors path="username" cssClass="error" />
</td>
</tr>
<tr>
<td>Password :</td>
<td><form:input path="password" type="password"/>
</td>
<td><form:errors path="password" cssClass="error" />
</td>
</tr>
<tr>
<td>Password Confirmation:</td>
<td><form:input path="confPassword" type="password" />
</td>
<td><form:errors path="confPassword" cssClass="error" />
</td>
</tr>
<tr>
<td>Email Address:</td>
<td><form:input path="email" />
</td>
<td><form:errors path="email" cssClass="error" />
</td>
</tr>
<tr>
<td>Type :</td>
<td><form:checkboxes id="selectType" items="${typeList}"
path="type" /></td>
<td><form:errors path="type" cssClass="error" />
</td>
</tr>
<tr>
</tr>
<tr>
<td>Address :</td>
</tr>
<tr>
<td>Country :</td>
<td><form:input path="country" />
</td>
<td><form:errors path="country" cssClass="error" />
</td>
</tr>
<tr>
<td>State :</td>
<td><form:input path="state" />
</td>
<td><form:errors path="state" cssClass="error" />
</td>
</tr>
<tr>
<td>City :</td>
<td><form:input path="city" />
</td>
<td><form:errors path="city" cssClass="error" />
</td>
</tr>
<tr>
<td>Street :</td>
<td><form:input path="street" />
</td>
<td><form:errors path="street" cssClass="error" />
</td>
</tr>
<tr class="Alumni">
<td >Year of Graduation :</td>
<td><form:input path="yOfGrad" />
</td>
<td><form:errors path="yOfGrad" cssClass="error" />
</td>
</tr>
<tr>
<td colspan="3"><input type="submit" value="Submit Registration Request" /></td>
</tr>
</table>
</form:form>
I have looked around for some example but unfortunately I couldn't accomplish what I am trying to do.
Can anyone please tell me what am I doing wrong?
Your help is appreciated.
load your jQuery plugin in the page
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
demo