I'm having issues multiply two columns of a table, outputing the result in to the 3rd column, then adding the totals into the subtotal.
I've got it where it can ADD the input fields but not MULTIPLY. Below is a jsFiddle where I attempt to multiply but it doesn't work
I assume that the issue has to do with multiplying by zero, but I'm not sure exactly where I am going wrong
My code:
$('table input').on('input', function() {
var $tr = $(this).closest('tr');
var total = 0;
$('input:not(:last)', $tr).each(function() {
total *= Number($(this).val()) || 0;
console.log(total)
});
$('td:last input', $tr).val(total);
subTotalPrice();
}).trigger('input');
function subTotalPrice() {
var total = 0;
$(".amount").each(function() {
total += parseFloat($(this).val() || 0);
});
$("#subTotalResult").text(total);
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="0" valign="TOP" style="background-color:#fff;">
<tbody align="left">
<tr>
<td colspan="5" class="tablzag2">
From Our Smoker
</td>
</tr>
<tr class="tablzag3">
<td colspan="2" class="tablzag3">
Menu Items
</td>
<td align="center" class="tablzag3">
Servings
</td>
<td align="center" class="tablzag3">
Per Servings
</td>
<td align="center" class="tablzag3">
Ext Cost
</td>
</tr>
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
BBQ Beef Brisket
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--pulled pork row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Pulled Pork
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Boneless/Skinless Chicken Breast-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Boneless/Skinless Chicken Breast
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Smoked Leg Quarter Row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Smoked Leg Quarter
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--1/2 Cornish Hen-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
1/2 Cornish Hen
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Buffet Ham-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Buffet Ham
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Mild or Hot Links in BBQ Sauce-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Mild or Hot Links in BBQ Sauce
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--BBQ Pork Spareribs-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
BBQ Pork Spareribs
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Bratwurst Row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Bratwurst
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--subtotal for "from our smoker" row-->
<tr>
<td colspan="4" align="right" valign="middle" class="subTotalResult">
Subtotal for "From our Smoker" :
</td>
<td align="right" valign="middle" class="subTotalResult" style="padding-right:10px;">
<span id="subTotalResult">
0.00
</span>
</td>
</tr>
</tbody>
</table>
<style>
.tablzag3 {
padding: 5px;
height: 20px;
background-color: #75A3D3;
font-family: Tahoma, Helvetica, Sans-serif;
margin: 0px;
color: #fff;
font-weight: normal;
}
.tablzag2 {
padding: 5px;
height: 20px;
background-color: #4C759F;
font-family: Tahoma, Helvetica, Sans-serif;
margin: 0px;
color: #fff;
font-weight: normal;
}
.tablechet {
padding: 2px 5px 2px 5px;
height: 24px;
color: #627484;
}
.tablcheta {
padding: 2px 5px 2px 5px;
height: 24px;
color: #627484;
font-weight: bold;
text-decoration: underline;
}
.subTotalResult {
height: 24px;
background-color: #E4EEF8;
margin: 0px;
color: #627484;
font-weight: bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
</style>
If you're multiplying a series of numbers, you need to initialize the product with 1, not 0. Multiplying by zero produces zero, multiplying by one produces the same value.
You should also use toFixed() to discard extra fractional digits that often occur when dealing with floating point numbers.
You also had a typo: maxlenght should be maxlength.
$('table input').on('input', function() {
var $tr = $(this).closest('tr');
var total = 1;
$('input:not(:last)', $tr).each(function() {
total *= Number($(this).val()) || 0;
});
$('td:last input', $tr).val(total.toFixed(2));
subTotalPrice();
}).trigger('input');
function subTotalPrice() {
var total = 0;
$(".amount").each(function() {
total += parseFloat($(this).val() || 0);
});
$("#subTotalResult").text(total.toFixed(2));
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="0" valign="TOP" style="background-color:#fff;">
<tbody align="left">
<tr>
<td colspan="5" class="tablzag2">
From Our Smoker
</td>
</tr>
<tr class="tablzag3">
<td colspan="2" class="tablzag3">
Menu Items
</td>
<td align="center" class="tablzag3">
Servings
</td>
<td align="center" class="tablzag3">
Per Servings
</td>
<td align="center" class="tablzag3">
Ext Cost
</td>
</tr>
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
BBQ Beef Brisket
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlength="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--pulled pork row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Pulled Pork
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="3.95" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Boneless/Skinless Chicken Breast-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Boneless/Skinless Chicken Breast
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Smoked Leg Quarter Row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Smoked Leg Quarter
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--1/2 Cornish Hen-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
1/2 Cornish Hen
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Buffet Ham-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Buffet Ham
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Mild or Hot Links in BBQ Sauce-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Mild or Hot Links in BBQ Sauce
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--BBQ Pork Spareribs-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
BBQ Pork Spareribs
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--Bratwurst Row-->
<tr valign="middle">
<td width="50%" align="left" class="tablchet">
<div align="left">
<!--need to add in descending container script later-->
<a href="javascript:show_desc_incomplete;" class="tablchet">
<span class="tablcheta">
Bratwurst
</span>
</a>
</div>
</td>
<td alight="left" class="tablchet">
<div align="center">
</div>
</td>
<!--quantity input-->
<td width="10%" align="center">
<input type="text" maxlenght="5" class="quantity" style="width:100%; text-align:right" value="0.00">
</td>
<!--unit price-->
<td width="15%" align="right">
<!--need to add in ability to have currency listed in value and then key out currency-->
<input type="text" name="Per Serving" value="2.99" class="unit" readonly="">
</td>
<!--Ext Cost-->
<td align="right" valign="middle" class="tablechet" style="padding-right:10px;">
<input type="text" class="amount" value="0.00" readonly="">
</td>
</tr>
<!--subtotal for "from our smoker" row-->
<tr>
<td colspan="4" align="right" valign="middle" class="subTotalResult">
Subtotal for "From our Smoker" :
</td>
<td align="right" valign="middle" class="subTotalResult" style="padding-right:10px;">
<span id="subTotalResult">
0.00
</span>
</td>
</tr>
</tbody>
</table>
<style>
.tablzag3 {
padding: 5px;
height: 20px;
background-color: #75A3D3;
font-family: Tahoma, Helvetica, Sans-serif;
margin: 0px;
color: #fff;
font-weight: normal;
}
.tablzag2 {
padding: 5px;
height: 20px;
background-color: #4C759F;
font-family: Tahoma, Helvetica, Sans-serif;
margin: 0px;
color: #fff;
font-weight: normal;
}
.tablechet {
padding: 2px 5px 2px 5px;
height: 24px;
color: #627484;
}
.tablcheta {
padding: 2px 5px 2px 5px;
height: 24px;
color: #627484;
font-weight: bold;
text-decoration: underline;
}
.subTotalResult {
height: 24px;
background-color: #E4EEF8;
margin: 0px;
color: #627484;
font-weight: bold;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
</style>
Related
I want to place the check boxes and the tables next to each other with a proper alignment. I can seem to put the three check boxes that I've created beside each other in the same row but I am unable to align them all properly and neatly. I find some difficulties in formatting them by using Notepad++ as my developing tool.
Need help on this one.
Here is the CSS and HTML codes. Under this HTML section, the check boxes consist of respective table created in them. I have separated all the codes with the comment 'Scenario 1,2,3 and Main'.
td.left {
text-align: left;
}
th {
border: 1.5px solid #4682B4;
text-align: center;
padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed<br>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 1-->
<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed<br>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 2-->
<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output<br>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>Headcount II</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>
<!--Main-->
<form id="radioForm2" method="get" align="center">
<table style="width:30%" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
</form>
<!--End of Form-->
<br><br><br>
I put the corrected input in an answer to show how it should look like. The comment is not the right place for html snippets. But this answer did still not resolve the view problem.
td.left {
text-align: left;
}
th {
border: 1.5px solid #4682B4;
text-align: center;
padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed</td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" id="numDays" /></td>
</tr>
<tr>
<td>Head Count</td>
<td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 1-->
<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed</td>
</tr>
<tr>
<td>Number of Head Count</td>
<td class="left"><input type="text" id="numHeadC" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td class="left"><input type="text" name="days" id="days" /> Days</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 2-->
<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
<table style="width:20%" align="left">
<tr>
<td colspan="2"><input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output</td>
</tr>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>Headcount II</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>
<!--Main-->
<form id="radioForm2" method="get" align="center">
<table style="width:30%" align="center">
<tr>
<td>Total</td>
<td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
</tr>
<tr>
<td>Standard Hour</td>
<td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
</tr>
<tr>
<td>Earn Hour</td>
<td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
</tr>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
</form>
<!--End of Form-->
<br><br><br>
Can I please ask for assistance, im new to html and css i barely know this things though im trying to learn, here's what i made so far but i cant seem to get the copy button fixed .. can someone help me out please
im trying to create a template, im sorry im really trying hard to learn but im clueless..
<form id="tickettemplate" name="tickettemplate">
<table width="700">
<tbody>
<tr>
<td colspan="4" align="center">
<div align="center">
<p style="font-size: 14pt;" align="center">
<strong>Shin's Template</strong>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table style="font-size: 12pt; height: 164px;" width="697">
<tbody>
<tr>
<td valign="middle">
D/SESA
</td>
<td>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Caller’s name:
</td>
<td>
<input id="Email" name="Email" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Callback number:
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
E-mail address:
</td>
<td>
<input id="ctystate0" name="E-mail Address" size="50"
type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Related case#s (history):
</td>
<td>
<input id="phonenumber_singleuser" name=
"phonenumber_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Location,remote/hotel/office:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
</tbody>
</table><br />
<div>
<br />
<table style=
"font-size: 12pt; border: 0px solid gray; height: 44px;" width=
"758" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="middle">
Application name:
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Number of Users Affected:
</td>
<td>
<select id="Number of Users Affected:0" name=
"Number of Users Affected:" size="1">
<option value="Single User">
Single User
</option>
<option value="Less than 5 users">
Less than 5 users
</option>
<option value="5 or more users">
5 or more users
</option>
</select>
</td>
</tr>
</tbody>
</table><br />
<table style="font-size: 12pt; height: 255px;" width="604">
<tbody>
<tr>
<td valign="middle">
What is the problem:
</td>
<td>
<p>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</p>
</td>
</tr>
<tr>
<td valign="middle">
When did the issue/problem begin:
</td>
<td>
<input id="Email" name="Email" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
Logon id: :
</td>
<td>
<input id="WinId_singleuser0" name="WinId_singleuser0"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Error message (if any):
</td>
<td>
<input id="ctystate0" name="Error message (if any):"
size="50" type="text" />
</td>
</tr>
<tr>
<td valign="middle">
When was the last time it worked properly:
</td>
<td>
<input id="phonenumber_singleuser" name=
"phonenumber_singleuser" size="50" type="text" />
</td>
</tr>
<tr>
<td valign="top">
Have there been any changes to your PC since the last
time it worked properly:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="middle">
Have you changed your password recently:
</td>
<td>
<input id="callername_singleuser" name=
"callername_singleuser" size="50" type="text" />
</td>
</tr>
</tbody>
</table><br />
<table style="font-size: 12pt;">
<tbody>
<tr>
<td valign="middle">
Trouble shooting steps (Detailed):
<textarea cols="50" rows="2">
</textarea>
</td>
</tr>
<tr>
<td valign="middle">
Additional Detail (links, screenshots etc...):
<textarea cols="50" rows="2">
</textarea>
</td>
</tr>
</tbody>
</table>
<div>
<br />
<table style=
"font-size: 12pt; border: 1px solid gray; height: 92px;"
width="612" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">
Problem:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Cause:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Action:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td valign="top">
Resolution:
</td>
<td>
<input id="client1" name="client1" size="50" type=
"text" />
</td>
</tr>
<tr>
<td align="right" width="150">
<input name="Reset" type="reset" value=
"Clear Template" />
</td>
<td align="right" width="450">
<input name="copyform" type="button" value=
"Copy" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Here is a solution that uses a few lines of JS.
HTML
<p id="p1">Text</p>
<button onclick="copyToClipboard('#p1')">Copy TEXT</button>
JS
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
I have a data entry form on my site which contains multiple checkboxes, two radio buttons and a text fields. I want to make the text field show if "cheque" radio buttons is selected and hide that text box with value of Cheque text box's if "cash" radio button is selected.
The radio buttons and text area are as follows:
<tr>
<td valign="top" width="300">Balance Amount:</td>
<td valign="top" width="300" align="left">
<input type="number" class="k-textbox" name="balance_amount" id="balance_amount" placeholder="" size="30" value=" <?php echo $balance_amount; ?>" readonly ></input>
</td>
</tr>
<tr>
<td valign="top" width="300">Mode Of Payement :</td>
<td valign="top" width="300" align="left">
Cheque :<input type="radio" name="mode_of_payment" id="cheq" value="1" >
Cash :<input type="radio" name="mode_of_payment" id="cash" value="2" checked >
</td>
</tr>
<tr id="bankName">
<td valign="top" width="300">Bank Name :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="bank_name" id="bank_name" placeholder=""/>
</td>
</tr>
<tr id="branch">
<td valign="top" width="300">Branch :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="branch_name" id="branch_name" placeholder="" />
</td>
</tr>
<tr id="Acc_No">
<td valign="top" width="300">Account No :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="account_no" id="account_no" placeholder="" />
</td>
</tr>
<tr id="chq_no">
<td valign="top" width="300">Cheque No</td>
<td valign="top" width="300" align="left">
<input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
</tr>
<tr id="chq_date">
<td valign="top" width="300">Cheque Date</td>
<td valign="top" width="300" align="left">
<input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>" type="text" ></input></td>
</tr>
<tr id="pay_at">
<td valign="top" width="300">Payable At</td>
<td valign="top" width="300" align="left">
<input id="payable_at" name="payable_at" class="k-textbox" type="text" ></input></td>
</tr>
<tr>
<td valign="top" width="300">Paid Amount</td>
<td valign="top" width="300" align="left">
<input type="number" id="paid_amount" name="paid_amount" class="k-textbox" placeholder="Enter Digit" required validationMessage="Please Enter the Amount"/></td>
</tr>
<tr>
<td valign="top" width="300">Amount In Words</td>
<td valign="top" width="300" align="left">
<input type="number" id="amount_in_words" name="amount_in_words" class="k-textbox" placeholder="Enter Words" required validationMessage="Please Enter Amount In Words"/></td>
</tr>
Try a change handler for the radio buttons.
Also add a class cheque to the cheque specific rows like
<tr id="chq_no" class="cheque">
<td valign="top" width="300">Cheque No</td>
<td valign="top" width="300" align="left">
<input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
</tr>
<tr id="chq_date" class="cheque">
<td valign="top" width="300">Cheque Date</td>
<td valign="top" width="300" align="left">
<input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>" type="text" ></input></td>
</tr>
then
jQuery(function(){
$('input[name="mode_of_payment"]').change(function(){
$('.cheque').toggle(this.checked && this.value==1)
}).change()
})
Demo: Fiddle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#chq_no").hide();
$("#chq_date").hide();
$(":radio").click(function(e) {
switch($(this).val()){
case "1":
$("#chq_no").show();
$("#chq_date").show();
break;
case "2":
$("#chq_no").hide();
$("#chq_date").hide();
break;
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td valign="top" width="300">Balance Amount:</td>
<td valign="top" width="300" align="left">
<input type="number" class="k-textbox" name="balance_amount" id="balance_amount" placeholder="" size="30" value=" <?php echo $balance_amount; ?>" readonly ></input>
</td>
</tr>
<tr>
<td valign="top" width="300">Mode Of Payement :</td>
<td valign="top" width="300" align="left">
Cheque :<input type="radio" name="mode_of_payment" id="cheq" value="1" >
Cash :<input type="radio" name="mode_of_payment" id="cash" value="2" checked >
</td>
</tr>
<tr id="bankName">
<td valign="top" width="300">Bank Name :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="bank_name" id="bank_name" placeholder=""/>
</td>
</tr>
<tr id="branch">
<td valign="top" width="300">Branch :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="branch_name" id="branch_name" placeholder="" />
</td>
</tr>
<tr id="Acc_No">
<td valign="top" width="300">Account No :</td>
<td valign="top" width="300" align="left">
<input type="text" class="k-textbox" name="account_no" id="account_no" placeholder="" />
</td>
</tr>
<tr id="chq_no">
<td valign="top" width="300">Cheque No</td>
<td valign="top" width="300" align="left">
<input type="number" id="cheque_number" name="cheque_number" class="k-textbox" placeholder="Enter Cheque No" /></td>
</tr>
<tr id="chq_date">
<td valign="top" width="300">Cheque Date</td>
<td valign="top" width="300" align="left">
<input id="cheque_date" name="cheque_date" value="<?php echo $cheque_date; ?>" type="text" ></input></td>
</tr>
<tr id="pay_at">
<td valign="top" width="300">Payable At</td>
<td valign="top" width="300" align="left">
<input id="payable_at" name="payable_at" class="k-textbox" type="text" ></input></td>
</tr>
<tr>
<td valign="top" width="300">Paid Amount</td>
<td valign="top" width="300" align="left">
<input type="number" id="paid_amount" name="paid_amount" class="k-textbox" placeholder="Enter Digit" required validationMessage="Please Enter the Amount"/></td>
</tr>
<tr>
<td valign="top" width="300">Amount In Words</td>
<td valign="top" width="300" align="left">
<input type="number" id="amount_in_words" name="amount_in_words" class="k-textbox" placeholder="Enter Words" required validationMessage="Please Enter Amount In Words"/></td>
</tr>
</table>
</body>
</html>
Try This
$(document).ready(function () {
$('input[name=mode_of_payment]').change(function () {
$('#chq_no').toggle(this.checked && this.value == 1);
$('#chq_date').toggle(this.checked && this.value == 1);
}).change();
});
i think you have to try show() and hide() function of java script and also use Css property like display:block and display:hidden for hide and show text box.
#namrata shrivas
hi i wanted to include a calender in my web page and after googling it i found this code
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<table>
<tr>
<td>
DOB</td><td> <input id="datepicker" readonly/></td>
</tr>
</table>
</body>
</html>
now i wanted to add this in my web page.so within the head i wrote
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
and in input field i wrote
but calender is not opening when i click on the field.If you want my full code then it is as follows
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body> <script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header > <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>Personal Information</li>
<li>Medical History</li>
<li>Insurance Information</li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Personal Information</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
</td>
<td>
<input type="text" name="lastname" id="twoo" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<input id="datepicker" readonly/>
</td>
</tr>
<tr>
<td height="30">
<b>Gender</b>
</td>
<td >
Male<input type="radio" name="lastname" value="male"/>
Female<input type="radio" name="lastname" value="male"/>
</td>
</tr>
<tr>
<td height="30">
<b>Occupation</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Race</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Mobile</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Height</b>
</td>
<td>
<input type="textbox" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Weight</b>
</td>
<td>
<input type="textbox" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
<td height="30">
<b>BP</b>
</td>
<td>
<input type="textbox" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
<td height="30">
<b>Blood Group</b>
</td>
<td>
<input type="textbox" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
</table><div align="center" style="padding-top: 30px">
</div>
</div>
</div>
</div>
</article>
<!-- Article 1 end -->
<!-- Article 2 start -->
<div class="line"></div>
<div class="space"></div> <div class="space"></div> <div class="space"></div> <div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<article id="article2">
<h2>Medical History</h2>
<div class="line"></div>
<div class="articleBody clear"><!--
<figure>
<img src="medical.jpg" width="620" height="440" /></a>
</figure>
<p><div align="center" style="padding-top: 30px">
<table cellspacing="10" cellpadding="10">
<tr>
<td width="200" height="30"><h5>Old Password</h5></td>
<td height="30"><input name="old" type="password"></td>
</tr>
<tr>
<td height="30"><h5>New Password</h5></td>
<td height="30"><input name="newPsw" type="password"></td>
</tr>
<tr>
<td height="30"><h5>Confirm Password</h5></td>
<td height="30"><input name="confirm" type="password"></td>
</tr>
</table>
</div> -->
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Diabetes</b>
</td>
<td>
<input type="radio" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Insulin</b>
</td>
<td>
<input type="radio" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Obesity</b>
</td>
<td>
<input type="radio" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Hypertension</b>
</td>
<td >
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Pancreatis</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Renal Problems</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Neuropathy</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Amputations</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>GERD</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Cardiac Problem</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Retinal Problem</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Sleep Arnoea</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Erectile Dysfunction</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Thyroid Problem</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Liver Problem</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Constipation</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Asthma</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>TB</b>
</td>
<td>
<input type="textbox" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Diet Control</b>
</td>
<td>
<input type="radio" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
<td height="30">
<b>Craving for Sweets</b>
</td>
<td>
<input type="radio" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
<td height="30">
<b>Smoking</b>
</td>
<td>
<input type="radio" name="lastname" value="" height="10" width="10"/>
</td>
</tr>
</table>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<article id="article3">
<h2>Insurance Information</h2>
<div class="line"></div>
<div class="articleBody clear"><!-- -->
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td height="30">
<b>Insurance Company Name</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Policy Name</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Policy No</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Validity</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td height="30">
<b>Constipation</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>Asthma</b>
</td>
<td>
<input type="text" name="lastname" value=""/>
</td>
</tr>
<tr>
<td height="30">
<b>TB</b>
</td>
<td>
<input type="textbox" name="lastname" value=""/>
</td>
</tr>
</tr>
</table>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
Go UP
spanwave
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
i have been trying to sort out the error since last one hour but could not fix it.
it is because your input field is readonly
<input id="datepicker" readonly/>
//----^^^^---here
so the click on input won't fire thus.. not firing the datepicker , removing that(readonly) should work
Just remove the last two scripts you have included in bottom .You have already included jquery script at top.It will work fine
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="script.js"></script>
I want to cancel the second line item instead of the first.
Below is some sample code for the 2 line items:
<div class="screenlet-body">
<form name="updateItemInfo" method="post" action="/ordermgr/control/updateOrderItems">
<input type="hidden" name="orderId" value="140070"/>
<input type="hidden" name="orderItemSeqId" value=""/>
<input type="hidden" name="shipGroupSeqId" value=""/>
<input type="hidden" name="supplierPartyId" value="10964"/>
<input type="hidden" name="orderTypeId" value="PURCHASE_ORDER"/>
<table class="basic-table order-items" cellspacing="0">
<tr class="header-row">
<td width="25%">Product</td>
<td width="10">Part Condition</td>
<td width="25%">Status</td>
<td width="5%" class="align-text">Quantity</td>
<td width="10%" class="align-text">Unit Price</td>
<td width="10%"> </td>
<td width="10%" class="align-text">Sub Total</td>
<td width="2%"> </td>
<td width="3%"> </td>
</tr>
<tr><td colspan="8"><hr/></td></tr>
<tr>
<td valign="top">
<div>
10588 -
NAS516-1A
- ZERk FITTING
</td>
<td>
<select name="icon_00001">
<option/>
<option value="ARM">As Removed</option>
<option value="INP">Inspected/ Tested</option>
<option value="NES">New Surplus</option>
<option value="NEW">New</option>
<option value="OVH">Overhauled/ Remanufactured</option>
<option value="RPR">Repaired/ Serviceable</option>
<option value="UNK">Unknown</option>
</select>
</td>
<td>
Current Created<br/>
2011-03-11 09:16:57.0 Created<br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
Ordered 5 <br/>
Cancelled: 0 <br/>
Remaining: 5 <br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
<input type="text" size="8" name="ipm_00001" value="10"/>
<input type="checkbox" name="opm_00001" value="Y"/>
</td>
<td> </td>
<td class="align-text" valign="top" nowrap="nowrap">
$50.00
<tr><td colspan="8"> </td></tr>
<tr>
<td align="right"><span class="label">Ship Group</span></td>
<td align="left"> [00001] 2920 E. Chambers St.</td>
<td align="right"><span class="label">Quantity</span></td>
<td align="right">
<input type="text" name="iqm_00001:00001" size="6" value="5"/>
<input type="checkbox" name="selectedItem" value="00001">
</td>
<td>
</td>
<td colspan="2"> </td>
<td align="right">
<a id="cancel_00001" name="cancel_00001 "href="javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00001';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()" class="buttontext">Cancel</a>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Comments</span>
</td>
<td colspan="7" align="left">
<input type="text" name="icm_00001" value="" size="30" maxlength="60"/>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Delivery Date</span>
</td>
<td colspan="7" align="left" colspan="7">
<input type="text" name="iddm_00001" value="2011-03-31 12:49:16.000" size="25" maxlength="30"/>
<img src="/images/cal.gif" width="16" height="16" border="0" alt="Click here For Calendar"/>
</td>
</tr>
<div>
10602 -
MS21075L3N
- NUTPLATE
</td>
<td>
<select name="icon_00002">
<option/>
<option value="ARM">As Removed</option>
<option value="INP">Inspected/ Tested</option>
<option value="NES">New Surplus</option>
<option value="NEW" selected>New</option>
<option value="OVH">Overhauled/ Remanufactured</option>
<option value="RPR">Repaired/ Serviceable</option>
<option value="UNK">Unknown</option>
</select>
</td>
<td>
Current Created<br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
Ordered 1 <br/>
Cancelled: 0 <br/>
Remaining: 1 <br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
<input type="text" size="8" name="ipm_00002" value="100"/>
<input type="checkbox" name="opm_00002" value="Y"/>
</td>
<td> </td>
<td class="align-text" valign="top" nowrap="nowrap">
$100.00
<tr><td colspan="8"> </td></tr>
<tr>
<td align="right"><span class="label">Ship Group</span></td>
<td align="left"> [00001] 2920 E. Chambers St.</td>
<td align="right"><span class="label">Quantity</span></td>
<td align="right">
<input type="text" name="iqm_00002:00001" size="6" value="1"/>
<input type="checkbox" name="selectedItem" value="00002">
</td>
<td>
</td>
<td colspan="2"> </td>
<td align="right">
<a id="cancel_00002" name="cancel_00002 "href="javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00002';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()" class="buttontext">Cancel</a>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Comments</span>
</td>
<td colspan="7" align="left">
<input type="text" name="icm_00002" value="This is a comment." size="30" maxlength="60"/>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Delivery Date</span>
</td>
<td colspan="7" align="left" colspan="7">
<input type="text" name="iddm_00002" value="" size="25" maxlength="30"/>
<img src="/images/cal.gif" width="16" height="16" border="0" alt="Click here For Calendar"/>
</td>
</tr>
<td colspan="7"> </td>
<td><input type="submit" value="Update Items" class="buttontext"/> </td>
What I need to do is cancel the second line item on the order.
There is 4 large windows showing code.
The second large one is the first line item and the fourth large one is the second line item.
I need to cancel the second.
Thanks in advance.
I actually figured out a way to do it using this line of code:
browser.link(:url, "javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00002';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()").click
The way it works is I specify the first value to reflect the line item number which will cancel out the specified line item.
Thanks for your help guys.