I have a joomla 3.0.3. (upgraded from 2.5). But the joomla keeps changing my html code when I save a custom html module.
I am using the JCK editor and have tried "none" editor as well but that doesn't change it. I have also switched the text filter permissions in the global settings to "no filtering"... no change ether.
This is the code I am entering (an image and a table):
<p style="text-align: center;">
<img alt="En verden af skønne og skæve blomster" src="images/Content/General/skoenneogskaeveblomster.png" style="width: 428px; height: 39px;" /></p>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td style="text-align: center; vertical-align: top; width: 20%;">
<strong>Nyhedsmail</strong></td>
<td style="text-align: center; vertical-align: top; width: 20%;">
<strong>Adresse</strong></td>
<td style="text-align: center; vertical-align: top; width: 20%;">
<strong>Kontakt</strong></td>
<td style="text-align: center; vertical-align: top; width: 20%;">
<strong>Bankoplysninger</strong></td>
<td colspan="2" rowspan="1" style="text-align: center; vertical-align: top; width: 20%;">
<strong>Åbningstider</strong></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: top; width: 20%;">
<p>
Gå ikke glip af tilbud og arangmenter.</p>
<p>
<a href="http://blomstergalleriet-viborg.dk/>Tilmeld dig vores nyhedsmail.</a></p>
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
<p>
Blomster Galleriet</p>
<p>
Li. Sct. Mikkelsgade 19</p>
<p>
8800 Viborg</p>
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
<p>
Tlf: 86 84 86 84</p>
<p>
Email: someemail</p>
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
<p>
Reg. nr: 2783</p>
<p>
Konto nr: 4380 1656 49</p>
</td>
<td style="text-align: right; vertical-align: top; width: 10%;">
<p>
Mandag - Fredag:</p>
<p>
Lørdag:</p>
</td>
<td style="text-align: center; vertical-align: top; width: 10%;">
<p>
9:30 - 17:30</p>
<p>
9:30 - 13:00</p>
</td>
</tr>
<tr>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td colspan="2" rowspan="1" style="vertical-align: top; width: 10%; text-align: center;">
<strong>Specielle åbningstider</strong></td>
</tr>
<tr>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td style="text-align: center; vertical-align: top; width: 20%;">
</td>
<td style="text-align: right; vertical-align: top; width: 10%;">
<p>
Store bededag:</p>
<p>
Mors dag:</p>
<p>
Pinse dag:</p>
<p>
2. Pinse dag:</p>
<p>
Uge 29-30:</p>
</td>
<td style="text-align: center; vertical-align: top; width: 10%;">
<p>
9:30 - 13:00</p>
<p>
7:00 - 14:00</p>
<p>
Lukket</p>
<p>
Lukket</p>
<p>
Ferielukket</p>
</td>
</tr>
</tbody>
Webmaster og designer: Me
But when I have saved it looks like this:
<p>
<p center;\"=""> <img af="" alt="\"En" nne="" og="" src="\"images/Content/General/skoenneogskaeveblomster.png\"" ve="" verden="" /></p>
<p>
Nyhedsmail</p>
<table border="\"0\"" cellpadding="\"0\"" cellspacing="\"0\"" td="">
<tbody>
<tr>
<td a="" af="" dig="" glip="" href="\"http://blomstergalleriet-viborg.dk/" ikke="" og="" td="" tilbud="" tilmeld="" vores="">
<p>
Blomster Galleriet</p>
<p>
Li. Sct. Mikkelsgade 19</p>
<p>
8800 Viborg</p>
</td>
<td 84="" 86="" a="" href="\"mailto:someemail?subject=Blomster%20Galleriet\"" td="">
<p>
Reg. nr: 2783</p>
<p>
Konto nr: 4380 1656 49</p>
</td>
<td -="" mandag="" td="">
<p>
9:30 - 17:30</p>
<p>
9:30 - 13:00</p>
</td>
</tr>
<tr>
<td td="">
</td>
<td td="">
</td>
<td colspan="\"2\"" rowspan="\"1\"" specielle="" td="">
</td>
<td td="">
</td>
<td td="">
<p>
Store bededag:</p>
<p>
Mors dag:</p>
<p>
Pinse dag:</p>
<p>
2. Pinse dag:</p>
<p>
Uge 29-30:</p>
</td>
<td -="" 7:00="" 9:30="" p="">
<em><span 9px;\"="">Webmaster og designer: Me</em></td>
</tr>
</tbody>
As you can see the following changes:
* Image doesn't load
* links changing
* text size changes
* table changes
I hope someone knows what to do.
Did you toggle the editor off (show the HTML source) when entering the HTML tags? Otherwise the editors usually assume you want to enter some text and changes the HTML tags so it's safe to show.
Or your server does some funny things on its own.
I got it to Work now. I think it was something about the magic quotes setting on the PHP setup.
Related
I am using the Laravel Dompdf for converting my view to pdf . Everything is works properly before I add the image to the view . After retrieving an image its shows an error of:
Maximum execution time of 60 seconds exceeded
Here is my code
public function GeneratePDF($code)
{
# Retrieve Record for the select Beneficiaries
$beneficiary = Beneficiary::where('code', $code)->firstOrFail();
$mytime = Carbon::now();
$beneficiaryimage = $beneficiary->profile_photo;
$orgimage = $beneficiary->charitableOrganization->profile_photo;
// $familymember = BeneficiaryFamilyInfo::where('beneficiary_id',$beneficiary->id)->get();
if($beneficiary->charitable_organization_id == Auth::user()->charitable_organization_id)
{
// return view('charity.main.beneficiaries.BackupPdf', compact('beneficiary','mytime'));
$pdf = PDF::loadView('charity.main.beneficiaries.BackupPdf', compact('beneficiary','mytime','beneficiaryimage','orgimage'));
return $pdf->download($beneficiary->charitableOrganization->name.'-'.$beneficiary->last_name . ', ' . $beneficiary->first_name . '.pdf');
}
else
{
$toastr = array(
'message' => 'Users can only access their own charity records.',
'alert-type' => 'error'
);
return redirect()->back()->with($toastr);
}
}
My view Page
<!DOCTYPE html>
<html>
<head>
<title>Backup Beneficiary Data as PDF</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<style>
.tableinformation {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
border-style: none;
}
.tableinformation td
{
border:none;
outline:none;
}
.tableinformation :nth-child(odd) {
width: 40%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.organization {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 50px ;
margin-bottom: 50px;
}
.organization td
{
border:none;
outline:none;
}
.family
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 50px ;
margin-bottom: 50px;
}
.family th
{
text-align: center;
}
.family td
{
text-align: center;
}
.tableinformation2 {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
}
.tableinformation2 td ,th
{
border:none;
outline:none;
}
.prepareandnoted
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 75%;
margin-left: auto;
margin-right: auto;
margin-top: 50px ;
margin-bottom: 50px;
}
.prepareandnoted td
{
text-align: center ;
border:none;
outline:none;
}
.page-break {
page-break-after: always;
}
</style>
<body>
<table class="organization" >
<tr>
<td style="width:30%"><img src="{{ ($beneficiary->charitableOrganization->profile_photo)?url('upload/charitable_org/profile_photo/'.$beneficiary->charitableOrganization->profile_photo):url('upload/charitable_org/profile_photo/no_avatar.png') }}" alt="Charity Organization Profile Photo" width="100px" height="100px"></td>
<td style="text-align: center; font-size: 150%;">{{$beneficiary->charitableOrganization->name}}</td>
</tr>
</table>
<table class="organization">
<tr>
<td > Date: <span style="text-decoration:underline;">{{$mytime->isoFormat('MMMM d, YYYY')}}</span>
<br>
<span>Time: </span><span style="text-decoration:underline;">{{$mytime->format('g:i A');}}</span>
</td>
<td style="width:30%"><img src=" {{ ($beneficiary->profile_photo)?url('upload/charitable_org/beneficiary_photos/'. $beneficiary->profile_photo):url('upload/avatar_img/no_avatar.png') }}" alt="beneficiaries photo" width="150px" height="150px"></td>
</tr>
</table>
<table class="tableinformation">
<tr>
<th colspan="2">I. Identifying Information</th>
</tr>
<tr>
<td>Full name</td>
<td>{{$beneficiary->last_name. ', '.$beneficiary->first_name.' '. $beneficiary->middle_name}}</td>
</tr>
<tr>
<td>Nickname :</td>
<td>{{$beneficiary->nick_name}}</td>
</tr>
<tr>
<td>Date of Birth :</td>
<td>{{Carbon\Carbon::parse($beneficiary->brith_date)->isoFormat('MMMM d, YYYY')}}</td>
</tr>
<tr>
<td>Age During interview :</td>
<td>{{ Carbon\Carbon::parse($beneficiary->birth_date)->diff(Carbon\Carbon::parse($beneficiary->interviewed_at))->y }}
</td>
</tr>
<tr>
<td>Place of Birth :</td>
<td>{{$beneficiary->birth_place}}</td>
</tr>
<tr>
<td>Religion :</td>
<td>{{$beneficiary->religion}}</td>
</tr>
<tr>
<td>Present Address :</td>
<td>{{$beneficiary->presentAddress->region. ' '.$beneficiary->presentAddress->province
.' '.$beneficiary->presentAddress->city.' '.$beneficiary->presentAddress->barangay
.' '.$beneficiary->presentAddress->postal_code}}
</td>
</tr>
<tr>
<td>Permanent Address :</td>
<td>{{$beneficiary->permanentAddress->region. ' '.$beneficiary->permanentAddress->province
.' '.$beneficiary->permanentAddress->city.' '.$beneficiary->permanentAddress->barangay
.' '.$beneficiary->permanentAddress->postal_code}}
</td>
</tr>
<tr>
<td>Provincal Address :</td>
<td>{{$beneficiary->provincialAddress->region. ' '.$beneficiary->provincialAddress->province
.' '.$beneficiary->provincialAddress->city.' '.$beneficiary->provincialAddress->barangay
.' '.$beneficiary->provincialAddress->postal_code}}
</td>
</tr>
<tr>
<td>Educational Attainment :</td>
<td>{{$beneficiary->educational_attainment}}</td>
</tr>
<tr>
<td>Last School Attended :</td>
<td>{{$beneficiary->last_school_year_attended}}</td>
</tr>
<tr>
<td>Contact No. :</td>
<td>{{$beneficiary->contact_no}}</td>
</tr>
</table>
<table class="family">
<tr>
<th colspan="8" style="text-align: left;" >II. Family Composition</th>
</tr>
<tr>
<td>Name</td>
<td>Age</td>
<td>Relationship</td>
<td>Civil Status</td>
<td>Education</td>
<td>Occupation</td>
<td>Income</td>
<td>WhereAbout</td>
</tr>
#foreach ($beneficiary->families as $item)
<tr>
<td style="width: 20%">{{$item->last_name.', '.$item->first_name}}</td>
<td>{{Carbon\Carbon::parse($item->birth_date)->age;}}</td>
<td>{{$item->relationship}}</td>
<td>{{$item->civil_status}}</td>
<td>{{$item->education}}</td>
<td>{{$item->occupation}}</td>
<td>{{$item->income}}</td>
<td> {{ ($item->where_abouts)? $item->where_abouts:'---' }}</td>
</tr>
#endforeach
</table>
<table class="tableinformation2">
<tr>
<th >III. Presented Problem </th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->problem_presented}}
</td>
</tr>
<tr>
<th>IV. Background Information</th>
</tr>
<tr>
<th style=" padding-left: 8%;">
A. The Client
</th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->about_client}}
</td>
</tr style="margin-bottom:10px;">
<tr>
<th style=" padding-left: 8%;">
B. The Family
</th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->about_family}}
</td>
</tr>
<tr>
<th style=" padding-left: 8%;">
C. The Environment
</th>
</tr>
<tr>
<td style=" padding-left: 10%;">
{{$beneficiary->bg_info->about_community}}
</td>
</tr>
<tr>
<th>V. Assessment And Recommendation</th>
</tr>
<tr>
<td>
{{$beneficiary->bg_info->assessment}}
</td>
</tr>
</table>
<table class="prepareandnoted">
<tr >
<td>Prepared By</td>
<td>Noted By</td>
</tr>
<tr>
<td style="text-decoration: underline;">{{$beneficiary->prepared_by}}</td>
<td style="text-decoration: underline;">{{$beneficiary->noted_by}}</td>
</tr>
</table>
</body>
</html>
Ideally , I want to export the file within 5 seconds , is there a way to improve the speed? This is my first time to use something like this to convert pdf . Any answer are appreciated . Thankyou.
This question already has answers here:
Equal sized table cells to fill the entire width of the containing table
(4 answers)
Closed 5 years ago.
I'm trying to control the images inside the table and keep them on the same level and same width when screen size down. This will be used for email, so I would avoid global styles like td width so other elements in the email wont be effected.
The code I am using is:
#media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
}
<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
<tr>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4>
<img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4>
<img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4>
<img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
</tr>
</table>
Just apply width: 33.33%; to the table cells.
And if you want the images be aligned to the bottom, add vertical-align: bottom; to the cells and apply display: block to the images:
td {
width: 33.33%;
vertical-align: bottom;
}
td img {
display: block;
}
#media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
}
<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
<tr>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4>
<img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4>
<img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>
<td style="text-align: center;">
<h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4>
<img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
</tr>
</table>
The part that was breaking the layout was the text above the images. Try moving it above the images on its seperate row, give it a height and everything works.
#media only screen and (max-width:414px) {
.mobile {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
}
<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
<tr>
<td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4></td>
<td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4></td>
<td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4></td>
</tr>
<tr>
<td width="33%" style="text-align: center;">
<img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>
<td width="33%" style="text-align: center;">
<img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>
<td width="33%" style="text-align: center;">
<img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
</tr>
</table>
Let me know if this works for you.
hitting a wall when trying to find a working xpath for this block of code
i have tried
//a[contains(text(),'SmartTrak')]//a[2] ->doesnt work
//td[contains(text(),'123123123')]//a[2] ->doesnt work
//td[contains(text(),'123123123')]/following::a ->clicks on the wrong link
I am trying to click the SmartTrak link associated with "123123123"
any help is appreciated!
<td class="BlackSmall" align="left" style="padding-left: 15px; padding-right: 5px;">123123123</td>
<td class="BlackSmall" align="right" style="padding-left: 15px; padding-right: 5px;">.99</td>
<input id="bp_0" type="hidden" value="N" name="bp_0">
<td class="BlackSmall" align="left" style="padding-left: 15px; padding-right: 5px;">Mail</td>
<td class="BlackSmall" align="right" style="padding-left: 15px; padding-right: 5px;">0.00</td>
<td class="BlackSmall" align="left" style="padding-left: 15px; padding-right: 5px;">INVOICE</td>
<td class="BlackSmall" align="center" style="white-space: nowrap">
<a class="hovsml" target="_blank" href="/retrievethis.php?c=hdhdhddhd=dsdsdsddds">ViewPDF</a>
<span style="width:20px; display:inline-block;"></span>
<a class="HovSml" href="JavaScript: INVDetails(xxxx)">SmartTrak</a>
You can do it in one go with a single XPath expression:
//td[. = '123123123']/following-sibling::td/a[. = 'SmartTrak']
Here we are locating the td element with 123123123 text, getting the following td sibling element having an a element with SmartTrak text as a direct child.
I'm trying to create table with three equal columns
Table width is set to 100%
When I'm trying to set width: 33% on TABLE TD element dompdf generates 1+ blank page(s) before generates the table. The table generates as expected only those blank pages are present in pdf document.
PDF FILE with width: 33%: http://www.docdroid.net/b5cf/with-width.pdf.html
I need to have equal columns on this table and cant achive it with width="33%" or style="table-layout: fixed" without geting the blank pages befor the table.
The HTML looks like this
<table class="outer_tab">
<tbody>
<tr class="outer_tr">
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">I.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">II.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">III.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
CSS looks like this:
<style type="text/css">
#page { margin: 1cm; }
body {
background-image: url('<?php echo 'module/Application/assets/pdf/images/faktury-tlo-small.png'; ?>');
background-repeat: no-repeat;
background-size: 20%;
background-position: center center;
}
table.outer_tab, table.inner_tab { border-spacing: 0; width: 100% }
table.inner_tab th { text-align: center; background: #BDC0BF; font-size: 15px; font-weight: bold; padding: 2px 0; }
td.outer_td { border-top: 1px solid #BDC0BF; border-left: 1px solid #BDC0BF; /*width: 33%;*/ border-bottom: 1px solid #BDC0BF; }
td.outer_td:last-of-type { border-right: 1px solid #BDC0BF; }
tr.outer_tr:last-of-type td.outer_td { border-bottom: 1px solid #BDC0BF; }
span.lp { padding-left: 10px; display: block; }
span.inner_td_text { /*padding-right: 10px;*/ }
span.separator { font-weight: bold; text-align: center; font-size: 15px; padding-bottom: 10px; display: block; }
.footer { position: fixed; bottom: 0px; width: 100%; font-size: 11px; }
</style>
The line cosing problems is:
td.outer_td { border-top: 1px solid #BDC0BF; border-left: 1px solid #BDC0BF; /*width: 33%;*/ border-bottom: 1px solid #BDC0BF; }
If in this td.outer_td has width: 33% the PDF has blank pages before the table
Anyone has any idea why this is happening?
Any solutions to this problem?
I have 7 text boxes. I want to add the value of 7 and insert the total in to another textbox. How can i achieve that with out postback. I have also tried to update panel but it is not working. my code is as follows. ANy suggestions in this regards would be much appreciable
If Page.IsPostBack Then
Dim A1 As Double
A1 = A_SAtxt.Text
Dim A2 As Double
A2 = A_SStxt.Text
Dim A3 As Double
A3 = A_RAtxt.Text
Dim A4 As Double
A4 = A_CAtxt.Text
Dim A5 As Double
A5 = A_OItxt.Text
Dim A6 As Double
A6 = A_ICtxt.Text
Dim A7 As Double
A7 = A_Otxt.Text
Dim ATotal = A1 + A2 + A3 + A4 + A5 + A6 + A7
End If
I working in asp.net with VB. textbox code in asp.net is as follows
<table width="100%">
<tr>
<td align="left" style="border:1px solid #cccccc; text- align: right; background-color: #F0F0F0;"
valign="top" class="style7" width = "400px">
<asp:Label ID="Label154" runat="server" Text="Savings account $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_SAtxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="25"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: right; background-color: #F0F0F0;"
valign="top">
<asp:Label ID="Label155" runat="server" Text="Stock and securities $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_SStxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="25"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: right; background-color: #F0F0F0;"
valign="top">
<asp:Label ID="Label156" runat="server" Text="Retirement accounts $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_RAtxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="25"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: right; background-color: #F0F0F0;"
valign="top">
<asp:Label ID="Label157" runat="server" Text="Checking account $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_CAtxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="25"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: right; background-color: #F0F0F0;"
valign="top">
<asp:Label ID="Label158" runat="server" Text="Other investments $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_OItxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="25"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: right; background-color: #F0F0F0;"
valign="top">
<asp:Label ID="Label159" runat="server" Text="Insurace cash-in-value $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_ICtxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="25"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: right; background-color: #F0F0F0;"
valign="top">
<asp:Label ID="Label160" runat="server" Text="Other $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_Otxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="30"></asp:TextBox>
<asp:Label ID="Label188" runat="server" Text="specify:" Font-Italic="true"></asp:Label>
<asp:TextBox ID="A_OStxt" runat="server" CssClass="DrpItems10"
style="text-align: left" Width="250px" MaxLength="100"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: right; background-color: #F0F0F0;"
valign="top">
<asp:Label ID="Label161" runat="server" Text="Total assets $"></asp:Label>
</td>
<td align="center" class="style7"
style="border:1px solid #cccccc; text-align: left; background-color: #F0F0F0;"
valign="top">
<asp:TextBox ID="A_TAtxt" runat="server" CssClass="DrpItems10"
style="text-align: left" MaxLength="25"></asp:TextBox>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
I have even tried doing this but it doesn't seems to work
Dim sb As New System.Text.StringBuilder()
sb.Append("<script type = 'text/javascript'>")
sb.Append(" $(document).ready(function() {")
sb.Append(" var numberInput = $('#A_SAtxt, #A_SStxt, #A_RAtxt, #A_CAtxt,
#A_OItxt, #A_ICtxt, #A_Otxt');")
sb.Append(" numberInput.on('change', function() {")
sb.Append(" var total = 0;")
sb.Append("else{")
sb.Append(" numberInput.each(function() {")
sb.Append(" if ($(this).val() !== '') {")
sb.Append(" total += parseFloat($(this).val());")
sb.Append(" }")
sb.Append(" });")
sb.Append(" $('#A_TAtxt').val(total);")
sb.Append(" });")
sb.Append(" });")
sb.Append("}};</script>")
ClientScript.RegisterClientScriptBlock(Me.GetType(), "function", sb.ToString())
You can use jQuery or javascript to calculate the sum of the 7 input boxes and insert the value into another input on the client side.
JAVASCRIPT
var total = 0;
$('#A_SAtxt, #A_SStxt, #A_RAtxt, #A_CAtxt, #A_OItxt, #A_ICtxt, #A_Otxt').each(function() {
if ($(this).val() !== '') {
total += parseFloat($(this).val());
}
});
$('#A_TAtxt').val(total);
DEMO
Here is an example of this code in action:
http://jsfiddle.net/AWGsw/2/
*EDIT 1*
To call this function on page load and to immediately add values on input blur, do the following:
JAVASCRIPT
$(document).ready(function() {
var numberInput = $('#A_SAtxt, #A_SStxt, #A_RAtxt, #A_CAtxt, #A_OItxt, #A_ICtxt, #A_Otxt');
numberInput.on('change', function() {
var total = 0;
numberInput.each(function() {
if ($(this).val() !== '') {
total += parseFloat($(this).val());
}
});
$('#A_TAtxt').val(total);
});
});
DEMO
http://jsfiddle.net/AWGsw/4/