Calculate sum of textboxes inside nested grid - javascript

I have two nested grids in a GridView. Both nested grids have different number of controls (TextBoxes). I want to calculate sum of nested grid textboxes and put in a relevant textbox of relevant row parent grid.
I want to do this using jQuery.
Following is the source of grids:
<table cellspacing="0" rules="all" border="1" id="gvSPActivities" style="width:100%;border-collapse:collapse;">
<tr class="donorh1" align="left" style="height:35px;">
<th scope="col" style="width:40px;">#</th><th scope="col">Activity</th><th scope="col">Unit</th><th scope="col">Target</th><th scope="col">Benefic</th><th scope="col">Cost</th>
</tr><tr class="gridrow2">
<td>
1
</td><td>a</td><td>u1</td><td>
<input name="gvSPActivities$ctl02$txtTarget" type="text" value="100" id="gvSPActivities_txtTarget_0" class="numeric" style="width:150px;" />
</td><td>
<a class="showDetails" href="javascript:switchViews('div1', 'one');">
Show Details</a>
<input name="gvSPActivities$ctl02$txtTotalBenefic" type="text" id="gvSPActivities_txtTotalBenefic_0" />
<div class="details" id="div1" style="display: none;
left: 30px;">
<div>
<table cellspacing="0" rules="all" border="1" id="gvSPActivities_gvBenefic_0" style="border-collapse:collapse;">
<tr>
<th scope="col">Male</th><th scope="col">Female</th><th scope="col">Children</th><th scope="col">Family</th>
</tr><tr>
<td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtMaleBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtMaleBenefic_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtFemaleBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtFemaleBenefic_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtChildren" type="text" id="gvSPActivities_gvBenefic_0_txtChildren_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvBenefic$ctl02$txtFamilyBenefic" type="text" id="gvSPActivities_gvBenefic_0_txtFamilyBenefic_0" class="numeric" style="width:100px;" />
</td>
</tr>
</table>
</div>
</div>
</td><td>
<a class="showDetails" href="javascript:switchViews('div1', 'one');">
Show Details</a>
<input name="gvSPActivities$ctl02$txtTotalCost" type="text" id="gvSPActivities_txtTotalCost_0" />
<div class="details" id="div1" style="display: none;
left: 30px;">
<div>
<table cellspacing="0" rules="all" border="1" id="gvSPActivities_gvCost_0" style="border-collapse:collapse;">
<tr>
<th scope="col">Main Cost</th><th scope="col">Other Cost</th>
</tr><tr>
<td>
<input name="gvSPActivities$ctl02$gvCost$ctl02$txtMainCost" type="text" id="gvSPActivities_gvCost_0_txtMainCost_0" class="numeric" style="width:100px;" />
</td><td>
<input name="gvSPActivities$ctl02$gvCost$ctl02$txtOthercost" type="text" id="gvSPActivities_gvCost_0_txtOthercost_0" class="numeric" style="width:100px;" />
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
Thanks.

var total = 0;
$("input[id^='gvSPActivities']", "#gvSPActivities").each(function() {
total = total+this.value;
});
$(someInputElement).val(total);

Related

Copy button not working on HTML template

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();
}

Checkboxlist check uncheck not working in javascript

I want to show/Hide the div on the basis of selection of checkbox values from the list.
Here is what I tried:-
function valueChanged() {
if ($('#ddlStatus_1').is(":checked"))
$("#divExpense").hide();
else
$("#divExpense").show();
}
and the html is
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status" onchange="valueChanged()">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" /><label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" /><label for="ddlStatus_1">Registration
/ Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" /><label for="ddlStatus_2">7/12
Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" /><label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" /><label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="div1">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>
But it is not working for me.
Add the change event to #ddlStatus_1 instead of table like following.
$('#ddlStatus_1').change(function() {
$("#divExpense").toggle(!this.checked);
})
Here is a running version of the code in my comment. You do not want to add the change to the table tag. If you need all checkboxes in the form to toggle something, then add a class to them and use data-attributes to see what to toggle
Note I changed div1 to divExpense
$(function() {
$('#ddlStatus_1').on("click", function() {
$("#divExpense").toggle(!this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<div style="overflow-y: scroll; width: 320px; height: 100px;">
<table id="Table1" name="Status">
<tr>
<td>
<input id="ddlStatus_0" type="checkbox" name="ddlStatus$0" value="20" />
<label for="ddlStatus_0">Agreement</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_1" type="checkbox" name="ddlStatus$1" value="30" />
<label for="ddlStatus_1">Registration / Conveyance Deed</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_2" type="checkbox" name="ddlStatus$2" value="40" />
<label for="ddlStatus_2">7/12 Transfer on Name</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_3" type="checkbox" name="ddlStatus$3" value="50" />
<label for="ddlStatus_3">Sold</label>
</td>
</tr>
<tr>
<td>
<input id="ddlStatus_4" type="checkbox" name="ddlStatus$4" value="60" />
<label for="ddlStatus_4">Cancelled</label>
</td>
</tr>
</table>
</div>
<br />
<div id="divExpense">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Expense Information :
</td>
</tr>
</table>
</div>
<div id="divPayment">
<table cellpadding="0" cellspacing="2" width="100%">
<tr>
<td class="otab">
This is test Payment Information :
</td>
</tr>
</table>
</div>

How can I hide/show a form when a button is clicked using javascript?

I actually need help to correct my code. I have watched a video from youtube but in that video, he use checkbox instead of button. so i'm having problem with the if else statement of the javascript. i have already checked the previous post that have same problem but couldn't find the one that can solve my problem. please help me. Thank you so much.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/tabMenu.css" rel="stylesheet" type="text/css" />
<style>
.hidden {
display:none;}
</style>
<script type="text/javascript">
function showHide()
{
var button = document.getElementById("butt");
var hiddeninput = document.getElementByClassName("hidden");
if(button.click)
{
hiddeninput.style.display = "block";
}
else
{
hiddeninput.style.display = "none";
}
}
</script>
</head>
<body>
<div id="navbar">
<div id="holder">
<ul>
<li>Employer Database</li>
<li>Company Presence</li>
<li>Company Promotion</li>
</ul>
</div><!--end of holder div -->
</div><!--end of navbar div -->
</br>
<p id="p1"><u>Employer List</u></p>
</br>
<table width="1345" height="113" border="1" id="table1">
<tr id="tr1">
<th width="46" height="35" scope="col">No.</th>
<th width="93" scope="col">Title</th>
<th width="157" scope="col">First Name</th>
<th width="171" scope="col">Last Name</th>
<th width="128" scope="col">Position</th>
<th width="130" scope="col">Sector</th>
<th width="178" scope="col">Company Name</th>
<th width="107" scope="col">Country</th>
<th width="97" scope="col">Email</th>
<th width="78" scope="col">Phone</th>
<th width="84" scope="col">Action</th>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
<input name="addbutton" type="button" value="Add Employer" id="butt" onclick="showHide()"/>
<br/>
<br/>
<br/>
<form id="form1" action="add_employer.php" method="post" class="hidden">
<p align="left"><u><strong>Add Employer Detail</strong></u></p>
<br/>
<br/>
<TABLE cellpadding="5" cellspacing="2" align="center">
<TR>
<td><strong>Title </strong></td>
<td><strong>:
<input name="title" value="" type="text" size="50" maxlength="50">
</strong></td>
</TR>
<TR>
<td><strong>First Name </strong></td>
<td><strong>:
<input name="first_name" value="" type="text" size="50" maxlength="50">
</strong></td>
</TR>
<TR>
<td><strong>Last Name</strong></td>
<TD><strong>:
<input name="last_name" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Position</strong></td>
<TD><strong>:
<input name="position" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Sector</strong></td>
<TD><strong>:
<input name="sector" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Company Name</strong></td>
<TD><strong>:
<input name="company_name" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Country</strong></td>
<TD><strong>:
<input name="country" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Email</strong></td>
<TD><strong>:
<input name="email" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Phone</strong></td>
<TD><strong>:
<input name="phone" value="" type="text" size="50" maxlength="50">
</strong></TD>
</TR>
<TR>
<td><strong>Action</strong></td>
<TD><strong>:
<input name="action" value="" type="text" size="50" maxlength="50">
</strong>
<input name="addbutton" type="button" value="Add Employer"/>
<input name="clear" type="button" value="Clear"/>
</TD>
</TR>
</TABLE>
<br/>
<br/>
</form>
</body>
</html>
You can target the form using id and add remove class to show hide the form.
<style>
.hidden {
display:none;}
</style>
<script type="text/javascript">
function showHide() {
var hiddeninput = document.getElementById("form1");
if (hiddeninput.classList.contains("hidden")) {
hiddeninput.classList.remove("hidden");
}
else {
hiddeninput.classList.add("hidden");
}
}
</script>
Given that you're hiding the element with a class, you can show and hide it by removing and re-adding the class. The classList.toggle method* will do that:
function hide(id) {
var el = document.getElementById(id);
if (el && el.classList) {
el.classList.toggle('hidden');
}
}
<style type="text/css">
.hidden {
display: none;
}
</style>
<body>
<input id="foo"><br>
<button onclick="hide('foo')">Hide input</button>
</body>
* Note that the reference to MDN includes a polyfill for Element.classList to support older browsers.
how about this... ??
function showHide() {
var button = document.getElementById("butt");
var hiddeninput = document.getElementsByClassName("hidden");
var form1 = document.getElementById("form1");
if (form1 && form1.style.display=="none") {
form1.style.display = "block";
} else {
form1.style.display = "none";
}
}
<div id="navbar">
<div id="holder">
<ul>
<li>Employer Database
</li>
<li>Company Presence
</li>
<li>Company Promotion
</li>
</ul>
</div>
<!--end of navbar div -->
</br>
<p id="p1"><u>Employer List</u>
</p>
</br>
<table width="1345" height="113" border="1" id="table1">
<tr id="tr1">
<th width="46" height="35" scope="col">No.</th>
<th width="93" scope="col">Title</th>
<th width="157" scope="col">First Name</th>
<th width="171" scope="col">Last Name</th>
<th width="128" scope="col">Position</th>
<th width="130" scope="col">Sector</th>
<th width="178" scope="col">Company Name</th>
<th width="107" scope="col">Country</th>
<th width="97" scope="col">Email</th>
<th width="78" scope="col">Phone</th>
<th width="84" scope="col">Action</th>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="34"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br/>
<input name="addbutton" type="button" value="Add Employer" id="butt" onclick="showHide()" />
<br/>
<br/>
<br/>
<form id="form1" action="add_employer.php" method="post" style="display: none;">
<p align="left"><u><strong>Add Employer Detail</strong></u>
</p>
<br/>
<br/>
<TABLE cellpadding="5" cellspacing="2" align="center">
<TR>
<td><strong>Title </strong>
</td>
<td><strong>:
<input name="title" value="" type="text" size="50" maxlength="50">
</strong>
</td>
</TR>
<TR>
<td><strong>First Name </strong>
</td>
<td><strong>:
<input name="first_name" value="" type="text" size="50" maxlength="50">
</strong>
</td>
</TR>
<TR>
<td><strong>Last Name</strong>
</td>
<TD><strong>:
<input name="last_name" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Position</strong>
</td>
<TD><strong>:
<input name="position" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Sector</strong>
</td>
<TD><strong>:
<input name="sector" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Company Name</strong>
</td>
<TD><strong>:
<input name="company_name" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Country</strong>
</td>
<TD><strong>:
<input name="country" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Email</strong>
</td>
<TD><strong>:
<input name="email" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Phone</strong>
</td>
<TD><strong>:
<input name="phone" value="" type="text" size="50" maxlength="50">
</strong>
</TD>
</TR>
<TR>
<td><strong>Action</strong>
</td>
<TD><strong>:
<input name="action" value="" type="text" size="50" maxlength="50">
</strong>
<input name="addbutton" type="button" value="Add Employer" />
<input name="clear" type="button" value="Clear" />
</TD>
</TR>
</TABLE>
<br/>
<br/>
</form>
You can use jQuery for that.
For hiding do that in the onClick event on the button.
$( ".target" ).hide();
For showing
$( ".target" ).show();

Scroll to the top of a scrollable pop div atomaticaly using jquery

First thing first, I am having a popup div, which contains a form
Here's is my div
<div class="addnewrule" id="add_message_0">
<form method="post" action="" id="frmadd">
<input type="hidden" name="filter" value="1">
<input name="rule_id" type="hidden" value="0">
<table class="table-responsive" width="100%" border="0" cellspacing="0" cellpadding="10" id="" style="text-align:center; margin-top:0px;">
<tr>
<td colspan="2" align="left"><div id="display_msg_0"></div></td>
</tr>
<tr>
<td width="40%" align="left">Name:</td>
<td width="60%" align="left"><input class="input_field" name="rule_name" type="text"></td>
</tr>
<tr>
<td align="left">Type:</td>
<td align="center">
<input type="radio" name="rule_type" value="0" style="display:none;" />
<input type="radio" name="rule_type" value="1" checked="checked" style="display:none;" />
<div class="btn-group equal_btn">
<button id="block_click" class="btn btn-default" type="button" onclick="setRules(0);">Block Clicks</button>
<button id="filter_click" class="btn btn-default active" type="button" onclick="setRules(1);">Filter Clicks</button>
</div></td>
</tr>
<tr>
<td align="left">Rule Active:</td>
<td align="center">
<input type="radio" id="active_0" name="active" value="1" checked="checked" style="display:none;" />
<input type="radio" id="inactive_0" name="active" value="0" style="display:none;" />
<div class="btn-group">
<button type="button" id="status_enb_0" class="btn btn-default active_btn active" onclick="setruleStatus(0,1);">Enable</button>
<button type="button" id="status_dis_0" class="btn btn-default inactive_btn" onclick="setruleStatus(0,0);">Disable</button>
</div></td>
</tr>
<tr>
<td align="left">Campaign ID:</td>
<td align="left"><input class="input_field" name="camp_id" type="text" /></td>
</tr>
<tr>
<td align="left" id="rRange">Filter IP Ranges:</td>
<td align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:0;" width="45%"><input class="input_field" name="start_ip" type="text" /></td>
<td width="10%" align="center">To</td>
<td style="padding:0;" width="45%" align="right"><input class="input_field" name="end_ip" type="text" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" id="rUAs">Filter users agents that contains:</td>
<td align="left"><input class="input_field" name="user_agent" type="text" /></td>
</tr>
<tr>
<td align="left" id="rRefs">Filter referers that contains:</td>
<td align="left"><input class="input_field" name="referer" type="text" /></td>
</tr>
<tr id="rUrl" style="display:none;">
<td align="left">Send Blocked Clicks to:</td>
<td align="left"><input class="input_field" type="text" id="rule_url" name="rule_url" value="" /></td>
</tr>
<tr>
<td align="left" colspan="2"><table class="copypaste" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Apply <a href="javascript:void(0)" class="btn orange_button tab2" onclick="cancel_popup('add_new_rule')" >Cancel</a></td>
</tr>
</table></td>
</tr>
</table>
</form>
</div>
Now, here is the jquery ajax function given below.. It checks for the validation and displays the validation message in a message div...
function submitRule(frmId,rule_id)
{
var data=$('#'+frmId).serializeArray();
$.ajax({
type:'POST',
url:'ajax/rule_update_process.php',
data: data,
dataType:'json',
success:function(jData)
{
if(jData.status==1)
{
$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);
}
else
{
window.location.href='settings_rules.php';
}
}
});
}
Since the popup is a scrollable div, i want to scroll(only within the popup div) to the top so that i can show the message div with the error message..
here'sw how i am getting the screens,.
I used this piece if code to scroll to the top of the popup div to show the error message div,
but this piece of code doesn't seem to work..
What am i doing wrong??
$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);
replace ur last line of code with this
parent_div.scrollTop(0,0);
I will suggest a very simple apprach:
$("#apply_button").click(function () {
var error_message = $("#your_error_message").css("display");
if (error_message != "none") {
$("#add_message_0").scrollTop(0);
};
});
Code speaks for itself.
BR
You can use css only brother. Example this is your form.
<div>
<form class="has-error">
<p>error</p>
<input name="" value="">
</form>
<div>
you can use the class .has-error to set a css codes. your css codes will only use if the error message is displayed.
div{ overflow-y: scroll; }
div .has-error{ height: 400px; }
height will defend your current section height with errors message.
Something like this on fiddle demo
if the message is not visible on button click, add this to your click function code
$( '#add_message_1' ).delay( 200 ).animate({scrollTop: 0 }, 300);}

Add input from a form to a table in the same page without reloading

Im trying to make the input from the user in a html form be added to a table that adds up the total price of all the products in the same page all of this without reloading.
here is my html form and table code
Thank you in advance
<h1>Instructions</h1>
<section>
<p>Please enter the desired product/services in the following table to create an order.</p>
<section style="width:300px; margin-left:20px">
<form action="" name="order" method="POST" autocomplete="off">
<table width="300" border="0" cellspacing="5" cellpadding="2">
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input name="product" id="product" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" placeholder="Product name" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input name="quantity" id="quantity" required type="number" title="Enter item quantity" placeholder="Product quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input name="price" id="price" required pattern="[0-9]" title="Please enter only numeric characters" placeholder="Product price" size="28" />
</td>
</tr>
</table>
<br>
<div id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!" onclick="">
<br style="clear:both;">
</div>
</form>
</section>
</section>
<table width="416" border="0" cellspacing="5" cellpadding="2">
<tr>
<th width="115" scope="col">Products</th>
<th width="112" scope="col">Quantity</th>
<th width="92" scope="col">Price</th>
<th width="56"></th>
</tr>
<tr>
<td scope="col"> </th>
<td scope="col">
</th>
<td scope="col"> </th>
<th>Total</th>
</tr>
</table>
This is a simple update to what you have that works. Part of your question was to avoid page reloading, so you will notice the FORM no longer does a POST action and your SUBMIT BUTTON is no longer an input but a standard button with an onClick action. This will allow everything to execute without navigating away from the page. For the sake of time I put the results addition in a separate table, feel free to style how you wish.
<html>
<head>
<title>Order</title>
<script type="text/javascript">
var qtyTotal = 0;
var priceTotal = 0;
function updateForm() {
var product = document.getElementById("product").value;
var qty = document.getElementById("quantity").value;
qtyTotal = qtyTotal + parseInt(qty);
document.getElementById("qtyTotals").innerHTML=qtyTotal;
var price = document.getElementById("price").value;
priceTotal = priceTotal + parseInt(price);
document.getElementById("priceTotals").innerHTML=priceTotal;
var table=document.getElementById("results");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=product;
cell2.innerHTML=qty;
cell3.innerHTML=price;
}
</script>
</head>
<body>
<form name="order" id="order">
<table>
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input id="product" name="product" title="Please enter only alphabetic characters" type="text" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input id="quantity" name="quantity" title="Enter item quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input id="price" name="price" title="Please enter only numeric characters" size="28" />
</td>
</tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<button type="button" onClick="updateForm();"/>Add To Table</button>
</form>
<br>
<table id="results" width="360">
<thead>
<tr>
<th scope="col" width="120">Products</th>
<th scope="col" width="120">Quantity</th>
<th scope="col" width="120">Price</th>
</tr>
</thead>
</table>
<table id="resultTotals" width="360">
<tr>
<td scope="col" width="120">Totals</td>
<td scope="col" width="120"><div id="qtyTotals"></div></td>
<td scope="col" width="120"><div id="priceTotals"></div></td>
</tr>
</table>
</body></html>
Here is JS Fiddle Example of above code.
<section>
<p>Please enter the desired product/services in the following table to create an order.</p>
<section style="width:300px; margin-left:20px">
<form action="" name="order" method="POST" autocomplete="off">
<table id="cart" width="300" border="0" cellspacing="5" cellpadding="2">
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input name="product" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" placeholder="Product name" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input name="quantity" required type="number" title="Enter item quantity" placeholder="Product quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input name="price" required pattern="[0-9]" title="Please enter only numeric characters" placeholder="Product price" size="28" />
</td>
</tr>
</table>
<br>
<div id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!" onclick="">
<br style="clear:both;">
</div>
</form>
</section>
</section>
<table width="416" border="0" cellspacing="5" cellpadding="2" id="cart">
<tr>
<th width="115" scope="col">Products</th>
<th width="112" scope="col">Quantity</th>
<th width="92" scope="col">Price</th>
<th width="56"></th>
</tr>
<tr>
<td id="items">
</td>
</tr>
<tr>
<td scope="col"> </th>
<td scope="col">
</th>
<td scope="col"> </th>
<th>Total</th>
<td id="total">0</td>
</tr>
</table>
<script>
$(document).ready(function(){
var form = document.order;
var $checkout = $('#cart');
// Listen for form submit
$(form).on('submit', function(e){
// Prevent browser from sending form
e.preventDefault();
// this is a row thats nt yet attached to the document
var $row = $('<tr class="item">');
/*
* Loop through fields and add 'product','quantity','price'
* to $row. we store the data on the node as well
*/
$.each(['product','quantity','price'],function(index, key){
var $td = $('<td>');
var value = form[key].value;
$td.addClass(key).text(value);
$row.data(key, value);
$row.append($td);
});
// Attach the $row to the document
$('#items').append($row);
// Update the totals
$checkout.trigger('change');
});
// Update totals when cart changes
$checkout.on('change',function(){
var total = 0;
$(this).find('.item').each(function(){
var quant = parseFloat($(this).data('quantity'));
var price = parseFloat($(this).data('price'));
total = total + (quant * price);
});
$('#total').text(total);
});
});
</script>

Categories