I have a table tag in my Pop up window, in which the row can be dynamically inserted. I need to know how to retrieve the values correspond to the table in Parent window. Can you guys guide me to achieve this. I can retrieve the input box values, but not the rows in table.
Thanks
My pop up:
<form name="BREAKUP" method="POST" action="JavaScript:submitForm()">
<br>
<center>
<TABLE id="PDetailsTable" width="350px" border="1">
<tr>
<td>SNO</td>
<td>Team Name</td>
<td>Estimated Hours</td>
<td>Actual Hours</td>
<td>Month</td>
</tr>
<tr>
<td > 1 </td>
<TD ><INPUT id="TEAM_NME" ></TD>
<TD ><INPUT id="EST_HRS"></TD>
<TD ><INPUT id="ACT_HRS"></TD>
<TD >
<select id="MNTH" onchange="" size="1">
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
<option value="Apr">April</option>
<option value="May">May</option>
<option value="Jun">June</option>
<option value="Jul">July</option>
<option value="Aug">August</option>
<option value="Sep">September</option>
<option value="Oct">October</option>
<option value="Nov">November</option>
<option value="Dec">December</option>
</select>
</TD>
</tr>
</TABLE>
<button value="Add Details" class="submitBtn" onclick="JavaScript:addRow('PDetailsTable');">
<span> Add Details </span></button>
<TABLE>
<TR align="center" valign="top">
<TD colspan="2"><img src="<%=imagesPath %>spacer.gif" height="10"></TD>
</TR>
<TR valign="bottom">
<TD colspan="2" align="center">
<button TYPE="submit" class="submitBtn" onclick="JavaScript:submitForm();">
<span> Submit </span></button>
<button value="Reset" class="submitBtn" onclick="JavaScript:resetForm();">
<span> Reset </span></button>
</TD>
</TR>
</TABLE>
There are three javascript functions.
I am using windows.opener in submiForm Function. I don't know how to send a list of values and retrieve in the parent windows
Related
I have 2 submit buttons, one for submitting the form and the other for cancelling the submission and redirecting. When clicking the Cancel submit button, it doesn't simply cancel and go back to the processing PHP script. It requires the required fields to be filled for the cancel button to work. I don't understand what is wrong with this. Please check my code below and suggest possible solutions.
{include file="header.tpl" page_name='Amazon Order Adjustment' extra_javascript='<script language="JavaScript" src="includes/update_shipping_info.js"></script>'}
{literal}
<style type="text/css">
#loading-icon {
position: absolute;
top: 75px;
right: 250px; width:
32px; height: 32px;
display: none;
background: url('/images/lightbox/loading.gif');
}
</style>
{/literal}
{if isset($tpl_error_msg) }
<div id="message">{$tpl_error_msg}</div>
{/if}
{include file='view_order_snippet.tpl'}
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
{if !($update_shipping_info_flag)}
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
{else}
{section name=lineitems loop=$tpl_order_list}
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="{$tpl_order_list[lineitems].id}">
<input type="hidden" name="vendor_id_array[]" value="{$tpl_order_list[lineitems].vendor_fk}">
</td>
<td>{$tpl_order_list[lineitems].sku}
<td>{$tpl_order_list[lineitems].item_description}</td>
<td>{$tpl_order_list[lineitems].quantity}</td>
<td>{$tpl_order_list[lineitems].item_status}</td>
<td>{$tpl_order_list[lineitems].shipping_mode}</td>
{if $tpl_order_list[lineitems].shipping_tracking_no == ""}
<td>N/A</td>
{else}
<td>{$tpl_order_list[lineitems].shipping_tracking_no}</td>
{/if}
</tr>
{/section}
{/if}
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
{html_options options=$tpl_action_type}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
{html_options options=$tpl_adjustment_reason}
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
{html_options options=$tpl_adjustment_type}
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice">
<option value="">Select Adjustment Buyer Price Type</option>
{html_options options=$tpl_adjustment_buyer_price}
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<div class="row">
<input type="hidden" id="tpl_grand_total_box" name="tpl_grand_total_box" value="{$tpl_grand_total}">
<input type="hidden" id="tpl_tax_box" name="tpl_tax_box" value="{$tpl_tax}">
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
<input type="button" id="cancel_button" name="submit_action" value="Cancel" class="button">
</div>
</div>
</form>
{literal}
<script type="text/javascript">
$(document).ready(function() {
$('#adjustment_buyer_price').hide();
$("#adjustment_type").change(function () {
var cur_option_val = $(this).val();
if (cur_option_val == "ItemPriceAdjustments") {
$('#adjustment_buyer_price').show();
$('#AdjustmentBuyerPrice').attr("required", "required") //add required
} else {
$('#adjustment_buyer_price').hide();
$('#AdjustmentBuyerPrice').removeAttr("required") //remove required.
}
});
$(function() {
$('#cancel_button').click(function() {
$("#amazon_order_adjustment").submit();
});
});
});
</script>
{/literal}
{include file="footer.tpl"}
When your cancel button is clicked you can remove required attribute from all inputs and then submit your form in this way $_POST datas for input will also get send to server .
Demo Code :
$(function() {
$('#cancel_button').click(function() {
$("input , select ").removeAttr("required") //remove required attr
$("#amazon_order_adjustment").append("<input type='hidden' name='submit_action' value='Cancel'>") //add this to know which button click
$("#amazon_order_adjustment").submit(); //submit
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="amazon_order_adjustment" id="amazon_order_adjustment" method="post" action="amazon_order_adjustment.php?id={$id}&{$search_params}">
<div class="row">
<fieldset>
<legend>Order Line Items</legend>
<table id="table2" style="position: relative; float: left;">
<tr valign="top">
<th width="10%"></th>
<th width="10%">SKU</th>
<th width="30%">Item</th>
<th width="5%">Qty</th>
<th width="10%">Status</th>
<th width="15%">Ship Mode</th>
<th width="20%">Tracking#</th>
</tr>
<tr>
<td colspan="7" align="center">No Items to display</td>
</tr>
<tr id=row1 valign="top">
<td><input type="radio" name="check[]" value="1">
<input type="hidden" name="vendor_id_array[]" value="2">
</td>
<td>A
<td>B</td>
<td>5</td>
<td>ok</td>
<td>htm</td>
<td>N/A</td>
</tr>
<tr>
<td align="right" colspan="3">Action Type</td>
<td align="left" colspan="4">
<select id="action_type" name="action_type" required>
<option value="">Select Action</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Enter Refund Amount</td>
<td align="left" colspan="4"><input type="number" step="1" min="" id="refund_amount" name="refund_amount" value="" required /></td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Reason</td>
<td align="left" colspan="4">
<select id="AdjustmentReason" name="AdjustmentReason" required>
<option value="" selected="selected">Select Adjustment Reason</option>
<option value="">A</option>
</select>
</td>
</tr>
<tr>
<td align="right" colspan="3">Adjustment Type</td>
<td align="left" colspan="4">
<select id="adjustment_type" name="adjustment_type" required>
<option value="" selected="selected">Select Adjustment Type</option>
<option value="ItemPriceAdjustments">ItemPriceAdjustments</option>
<option value="ItemPriceAdjustments1">5</option>
</select>
</td>
</tr>
<tr id="adjustment_buyer_price">
<td align="right" colspan="3">Adjustment Buyer Price Type</td>
<td align="left" colspan="4">
<!--remove required from here-->
<select id="AdjustmentBuyerPrice" name="AdjustmentBuyerPrice">
<option value="">Select Adjustment Buyer Price Type</option>
<option value="">A</option>
</select>
</td>
</tr>
</table>
</fieldset>
</div>
<div class="row">
<input type="hidden" id="tpl_grand_total_box" name="tpl_grand_total_box" value="{$tpl_grand_total}">
<input type="hidden" id="tpl_tax_box" name="tpl_tax_box" value="{$tpl_tax}">
<input type="submit" id="save_button" name="submit_action" value="refund" class="button">
<input type="button" id="cancel_button" name="submit_action" value="Cancel" class="button">
</div>
</form>
Use <input type="button" ...> instead that <input type="submit" ...> for cancel button
i have two html table's inside a main table. I have to give the space between td of first table so that Heading one should be on top of Element1 and text box and Heading two should be on top of Element2 and select lists which are available in other table. Please suggest how can i achieve this, do i need to modify the html table structure.
Please find the fiddle:https://jsfiddle.net/x5tLdbz4/1/
Below is the css code:
td:nth-child(1) {
padding-right: 90px;
}
HTML code:
<table>
<table>
<tr>
<td class="hone" class="more-padding-on-right">
Heading One
</td>
<td class="htwo">
Heading Two
</td>
</tr>
</table>
<table>
<tr valign="top">
<td> Element1:<input id="myTest" type="text" value=""> </td>
<td>
Element2:<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
>>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>
</table>
I would merge the two tables into one, with colspan values.
Another correction, it should be valign="middle" not center.
http://jsfiddle.net/w8kvm0d9/
.hone, .htwo {
background-color: #EEEEEE;
font-weight:bold;
color:red;
font-size:12px;
height:15px;
}
td {
border: 1px solid silver;
}
td:nth-child(2) {
border: 0;
width: 80px;
}
td select {
vertical-align: top;
}
<table>
<tr>
<td class="hone" class="more-padding-on-right">Heading One</td>
<td> </td>
<td class="htwo" colspan="3">Heading Two</td>
</tr>
<tr>
<td valign="top">Element1:<input id="myTest" type="text" value=""/></td>
<td> </td>
<td valign="top">
Element2:
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="middle">>></td>
<td valign="top">
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>
I would recommend putting everything into a single table. When you have two separate tables but you want to the columns to align you'll find it nearly impossible to ensure that they always do (especially when a user resizes the browser window). You could also add <thead> and <tbody> tags to distinguish between the header rows and body rows. Also, since you've got 3 columns in the second table you'll need to use the colspan attribute for the second column of the header to tell it span 2 columns, thus allowing the columns to fit in (or, if I didn't understand the alignment you want you might need the colspan on the first header column instaed).
<table>
<thead>
<tr>
<th class="hone" class="more-padding-on-right">
Heading One
</th>
<th class="htwo" colspan="2">
Heading Two
</th>
</tr>
</thead>
<tbody>
<tr valign="top">
<td> Element1:<input id="myTest" type="text" value=""> </td>
<td>
Element2:<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
>>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</tbody>
</table>
you can use one table structure and it'll look something like this:
http://jsfiddle.net/swm53ran/267/
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Element 1<input type="text"/>
</td>
<td>
Element 2
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
>>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</tbody>
</table>
A better way (if sticking with tables) is to use a single table for this:
<table>
<tr>
<td class="hone" class="more-padding-on-right">Heading One</td>
<td class="htwo">Heading Two</td>
<td></td>
<td class="hthree">Heading Three</td>
</tr>
<tr valign="top">
<td>Element1:
<input id="myTest" type="text" value="">
</td>
<td>Element2:
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
>>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>
https://jsfiddle.net/rcj1xgur/3/
I have a number of select as below.
<form method="post" name="form1" action="addpp.php" enctype="multipart/form-data" onSubmit="return validateForm();">
<table width="100%">
<tr>
<td>
<select name="leftProcess" size="5">
<option value="1">Process 1</option>
<option value="2">Process 2</option>
<option value="3">Process 3</option>
</select>
</td>
<td>
<button onclick="moveRight('leftProcess','rightProcess')">>></button><br/>
<button onclick="moveLeft('rightProcess','leftProcess')"><<</button>
</td>
<td>
<select name="rightProcess" size="5">
</select>
</td>
</tr>
<tr>
Sub process for Process 1
<td>
<select name="leftSubProcess1" size="5">
<option value="1">Sub 1_1</option>
<option value="2">Sub 1_2</option>
<option value="3">Sub 1_3</option>
</select>
</td>
<td>
<button onclick="moveRight('leftSubProcess1','rightSubProcess1')">>></button><br/>
<button onclick="moveLeft('rightSubProcess1','leftSubProcess1')"><<</button>
</td>
<td>
<select name="rightSubProcess1" size="5">
</select>
</td>
</tr>
<tr>
Sub process for Process 2
<td>
<select name="leftSubProcess2" size="5">
<option value="1">Sub 2_1</option>
<option value="2">Sub 2_2</option>
<option value="3">Sub 2_3</option>
</select>
</td>
<td>
<button onclick="moveRight('leftSubProcess2','rightSubProcess2')">>></button><br/>
<button onclick="moveLeft('rightSubProcess2','leftSubProcess2')"><<</button>
</td>
<td>
<select name="rightSubProcess2" size="5">
</select>
</td>
</tr>
<tr>
Sub process for Process 3
<td>
<select name="leftSubProcess3" size="5">
<option value="1">Sub 3_1</option>
<option value="2">Sub 3_2</option>
<option value="3">Sub 3_3</option>
</select>
</td>
<td>
<button onclick="moveRight('leftSubProcess3','rightSubProcess3')">>></button><br/>
<button onclick="moveLeft('rightSubProcess3','leftSubProcess3')"><<</button>
</td>
<td>
<select name="rightSubProcess3" size="5">
</select>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="Add" value="Add" style="width:80px; height:25px;"></input>
<input type="button" name="Preview" onclick="javascript:openChildWindow();" value="Preview" style="width:80px; height:25px;"/>
<input type="reset" name="reset" value="Cancel" style="width:80px; height:25px;"/>
</td>
</tr>
</table>
</form>
The first select will be all the process so user can choose and push them to the right select box. Accordingly the 3 below select are for sub process for the all the process above. User can also pick and choose which one they would desire.Once I cick the preview button I would the user to view their selection in this format. For e.g. use pickProcess 3 followed by Process 2 and Process 1. So then below must first show all the sub_proces3 then sub_process2 and sub_process1. What is best was to select and show these sort of data must I like save into a temp table? The idea is to give them a preview what they have select before the final submission into database.
<input type="submit" id="Display" name="Display" value="Display" />
<br/><br/>
<input type="submit" id="Update" name="Update" value="Update" />
<br/><br/>
<table border=1 width=90% height=30% align=center cellpadding=1 cellspacing=1>
<tr>
<th>Select</th>
<th>Name</th>
<th>Current Value</th>
<th>New Value</th>
</tr>
<c:forEach items="${abc}" var="map">
<tr>
<td align="center"><input type="checkbox" id="selectedItems" value="${map.key}" name="selectedItems" />
</td>
<td align="center">${map.key}</td>
<td align="center">${map.value}</td>
<td align="center">
<select name="val" id="val" >
<option value="">Select New Value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</c:forEach>
</table>
I am constructing a dynamic table based upon the values I get in map object 'abc' on click of Display Button. Now the next step is to check one or more rows and update them by selecting a new value from dropdown. How can I capture the ${map.key} and the selected new value per row in a new map on click of 'Update'? I am able to capture the checked ${map.key} but not the corresponding selected new value from dropdown. Any help would be appreciated.
This will do i believe..!!
<c:forEach items="${abc}" var="map" varStatus="rowNumber">
<tr>
<td align="center"><input type="checkbox" id="selectedItems${rowNumber.index}" value="${map.key}" name="selectedItems[${rowNumber.index}]" />
</td>
<td align="center">${map.key}</td>
<td align="center">${map.value}</td>
<td align="center">
<select name="val" id="val" >
<option value="">Select New Value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
</c:forEach>
The idea is that you must use some array for storing value for each
checkbox. By giving the name as selectedItems[${rowNumber.index}]
you can save the value of first checkbox at selectedItems[0], 2nd
at 1 etc. All you need to do is to create an array inside the bean an
create getters and setters.
varStatus="rowNumber" is used to get the current iteration index,
like i in the for loop. You can use this index to differentiate each
row.
<input type="submit" id="Display" name="Display" value="Display" />
<br/><br/>
<input type="submit" id="Update" name="Update" value="Update" />
<br/><br/>
<table border=1 width=90% height=30% align=center cellpadding=1 cellspacing=1>
<tr>
<th>Select</th>
<th>Name</th>
<th>Current Value</th>
<th>New Value</th>
</tr>
<c:forEach items="${abc}" var="map" varStatus="rowNumber">
<tr>
<td align="center"><input type="checkbox" id="selectedItems" value="${map.key}=${rowNumber.index}" name="selectedItems" />
</td>
<td align="center">${map.key}</td>
<td align="center">${map.value}</td>
<td align="center">
<select name="val" id="val" >
<option value="=${rowNumber.index}">Select New Value</option>
<option value="1=${rowNumber.index}">1</option>
<option value="2=${rowNumber.index}">2</option>
<option value="3=${rowNumber.index}">3</option>
</select>
</td>
</tr>
</c:forEach>
</table>
Thank you Dileep, you idea helped. Here is how I did it. Now I can track for a particular row, what dropdown value was selected and create a map from it.
I have a student profile form, where student fills information about their education.
My code is
<script language="JavaScript">
var imCount = 0;
function addRow(r, tdCount) {
alert(tdCount);
alert(r.innerHTML);
var root = r.parentNode.parentNode.parentNode; //the root
var allRows = root.getElementsByTagName('tr'); //the rows' collection
var cRow = root.insertRow(7);
var cRow = allRows[tdCount + imCount].cloneNode(true)//the clone of the 1strow
cRow.setAttribute('name', cRow.getAttribute('name') + '_' + (allRows.length + 1 + imCount)); //change the selecet's name
var cLbl = cRow.getElementsByTagName('label')[0];
cLbl.setAttribute("style", "visibility: collapse");
var cInp = cRow.getElementsByTagName('input'); //the inputs' collection of the 1st row
for (var i = 0; i < cInp.length; i++) {//changes the inputs' names (indexes the names)
cInp[i].setAttribute('name', cInp[0].getAttribute('name') + '_' + (allRows.length + 1 + imCount))
}
var cSel = cRow.getElementsByTagName('select')[0];
cSel.setAttribute('name', cSel.getAttribute('name') + '_' + (allRows.length + 1 + imCount)); //change the selecet's name
//root.appendChild(cRow);//appends the cloned row as a new row
allRows[tdCount + imCount].parentNode.insertBefore(cRow, allRows[tdCount + imCount].nextSibling)
imCount++;
alert(imCount);
}
</script>
<form method="post" action="">
<table width="100%">
<tr>
<td>
<div id="Education">
<table class="Studentprofile" id="tblEducation">
<tr>
<td colspan="2"><br/> Education Details</td>
</tr>
<tr id="schoolRow" name="schoolRow">
<td class="studentprofileupdateHead" >
<label for="schools">Schools:</label>
</td>
<td class="studentprofileupdateBody" id="schools">
<input type="text" id="s1" name="s1" title="S1"></input>
<select name="selSYear">
<option value="0">-Select-</option>
<option value="1">2010</option>
<option value="2">2009</option>
<option value="3">2008</option>
<option value="4">2007</option>
<option value="5">2006</option>
<option value="6">2005</option>
<option value="7">2004</option>
<option value="8">2001</option>
<option value="8">2000</option>
<//select>
</td>
</tr>
<tr>
<td class="studentprofileupdateHead" >
</td>
<td class="studentprofileupdateBody">
Add Shools
</td>
</tr>
<tr>
<td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
</tr>
<tr id="highschoolRow" name="highschoolRow">
<td class="studentprofileupdateHead" >
<label for="highschool">High School:</label>
</td>
<td class="studentprofileupdateBody" id="highschool">
<input type="text" id="hs1" name="hs11" title="HS1" />
<select name="selHSYear">
<option value="0">-Select-</option>
<option value="1">2010</option>
<option value="2">2009</option>
<option value="3">2008</option>
<option value="4">2007</option>
<option value="5">2006</option>
<option value="6">2005</option>
<option value="7">2004</option>
<option value="8">2001</option>
<option value="8">2000</option>
<//select>>
<br><br/>
<hr class="profileSubSection"/>
</td>
</tr>
<tr>
<td class="studentprofileupdateHead" >
</td>
<td class="studentprofileupdateBody">
Add High Schools
</td>
</tr>
<tr>
<td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
</tr>
<tr id="collegeRow" name="collegeRow">
<td class="studentprofileupdateHead" >
<label for="college">College:</label>
</td>
<td class="studentprofileupdateBody" id="college">
<input type="text" id="co1" name="co1" title="CO1"/>
<select name="selColYear">
<option value="0">-Select-</option>
<option value="1">2010</option>
<option value="2">2009</option>
<option value="3">2008</option>
<option value="4">2007</option>
<option value="5">2006</option>
<option value="6">2005</option>
<option value="7">2004</option>
<option value="8">2001</option>
<option value="8">2000</option>
<//select>
<br><br/>
<hr class="profileSubSection"/>
</td>
</tr>
<tr>
<td class="studentprofileupdateHead" >
</td>
<td class="studentprofileupdateBody">
Add College
</td>
</tr>
<tr>
<td colspan="2"><br/><hr class="profileUpdate"/><br/></td>
</tr>
<tr>
<td class="studentprofileupdateHead" >
</td>
<td class="studentprofileupdateBody">
<input type="submit" id="saveStudentEducationInfo" name="saveStudentEducationInfo" title="Save Education Info" value="Save Details" />
<input type="submit" id="cancelStudentEducationInfo" name="cancelStudentEducationInfo" title="Cancel Education Info" value="Cancel" />
</td>
</tr>
<tr>
<td colspan="2"><br/><br/></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
When user click on Add School link it will call addRow() and passing two parameters addRow(r, tdCount).
Add Schools
i am passing 1 to add new elements to row 1 it works perfect
i can add multiple new element but now looking to another section,
Add High Schools
here i am passing 4 to add new elements to my form,it works perfect without adding ADD SCHOOLS. but when i add schools 2-3 times it will not add high school.
Like this
in above image you can find that i have added 3 new schools and now i want to add high school but it cant be added to the form.
How can i solve this issue?
Any way to find tr instead of hard coding values in addRow(this,4)?
I'd change your code like this (removing the onclick )
$('.studentprofileupdateBody a').click(function(){
console.log('ok');
var $tr = $(this).closest('tr').prev()
var clone = $tr.clone();
$tr.after(clone);
});
fiddle here: http://jsfiddle.net/mSRg3/