Dynamic generated textboxs values sum

Dynamic generated textboxs values sum - javascript

How sum of all dynamic generated text boxes?
This is my JavaScript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
var i=1; function addRow() {
var tbl = document.getElementById('table1');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'items_' + i;
el.id = 'items_' + i;
el.size = 20;
el.maxlength = 20;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'stock_' + i;
el2.id = 'stock_' + i;
el2.class = 'stock' + i;
el2.size = 20;
el2.maxlength = 20;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'unit_rate_' + i;
el3.id = 'unit_rate_' + i; el3.class = 'unit_rate' + i;
el3.size = 20;
el3.maxlength = 20;
thirdCell.appendChild(el3);
var fourthCell = row.insertCell(3);
var el4 = document.createElement('input');
el4.type = 'text';
el4.name = 'per_item_' + i;
el4.id = 'per_item_' + i; el3.class = 'per_item' + i;
el4.size = 20;
el4.maxlength = 20;
fourthCell.appendChild(el4);
// alert(i);
i++;
frm.h.value=i; // alert(i);
}//AUTO GNERATE INPUTBOX PRANTHESE var a=1; $().ready(function () {
$(".stock, .unit_rate" ).on("change", function () {
$(".unit_rate, .stock").each(function(){ var totalcost = parseFloat($(".unit_rate").val()) / parseFloat($(".stock").val()) ; $(".per_item").val(totalcost); });
});
});
</script>
This is my HTML:
<!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></head>
<body>
<form action="stocksubmit.php" method="post" name="frm" id="frm">
<table width="40%" border="2" cellpadding="0" cellspacing="0" id="table1"> <tr>
<td><strong>ITEMS</strong></td>
<td><strong>STOCK</strong> </td>
<td><strong>UNIT RATE</strong> </td>
<td><strong>PER ITEM</strong> </td> </tr> <tr>
<td><input name="items_0" type="text" id="items_0" size="20" class="item" maxlength="20" /></td>
<td><input name="stock_0" type="text" id="stock_0" size="20" class="stock" maxlength="20" /></td>
<td><input name="unit_rate_0" type="text" id="unit_rate_0" class="unit_rate" size="20" maxlength="12" /></td>
<td><input name="per_item_0" type="text" id="per_item_0" class="per_item" size="20" maxlength="12" /></td>
</tr>
</table> <input type="button" value="Add" onclick="addRow();" /> <input name="submit" type="submit" value="submit" /> <label> <input name="h" type="hidden" id="h" value="0" /> </label>
</form> </body> </html>

Is this what you want??
$('#addbutt').click(function() {
$(":text").each(function(){
test_asd += parseInt($(this).val());
});
alert(test_asd);
});
edit:
Link to prove this works with dynamically added elements using drag and clone

Related

Javascript writing into Table not working

I just decided to code a little html file which should create a multiplication table with integers from "start" to "end". Start and End are set before in a HTMl Form...
I can give 2 numbers as input and the tr and td elements are create but accessing them by ClassName and filling them with innerHTML does somehow not work.
Here is the Code:
<html>
<head>
<title>Das groࠥ 1x1</title>
<meta charset="utf-8">
</head>
<script type="text/javascript">
function malnehmen(Wert1, Wert2) {
Ausgabe = Wert1 * Wert2;
return Ausgabe;
}
function tabelle() {
var start = document.forms["printer"].anfang.value;
var end = document.forms["printer"].ende.value;
for(i = start; i < end+1; i++) {
Reihe = document.createElement("tr");
att = document.createAttribute("class");
att.value = i + "a";
Reihe.setAttributeNode(att);
document.getElementById("Darein").appendChild(Reihe);
for(ii = start; ii < end+1; ii++) {
Feld = document.createElement("td");
att2 = document.createAttribute("class");
att2.value = malnehmen(i, ii);
Feld.setAttributeNode(att2);
Reihe.appendChild(Feld);
}
}
}
function ausfuellen() {
tabelle();
var start = document.forms["printer"].anfang.value;
var end = document.forms["printer"].ende.value;
for(a = start; a < end+1; a++) {
alert("Hier denn?");
document.getElementsByClassName(a + "a").innerHTML = a.toString();
for(aa = start; aa < end+1; aa++) {
multi = malnehmen(a, aa);
alert("Angekommen");
document.getElementsByClassName(multi).innerHTML = multi.toString();
}
}
}
</script>
<body>
<FORM name="printer">
<TABLE>
<tr>
<td>Beginnt bei:</td>
<td>
<input type="number" name="anfang" size="3">
</td>
</tr>
<tr>
<td>Endet bei:</td>
<td>
<input type="number" name="ende" size="3">
</td>
</tr>
<tr>
<td>
<input type="button" name="wassolldas" value="Erstellen" onclick="javascript: tabelle();">
</td>
</tr>
</TABLE>
</FORM>
<br>
<TABLE id="Darein" border="1">
</TABLE>
</body>
Does anybody know what I did wrong?
I built in 2 alerts just to see if the javascript part reaches the for loop but there is no pop up in browser.

Spring AutoPopulatingList not binding to modelAttribute

I am creating a application that could dynamically add rows to my html/jsp page and when clicked submit, data will be saved on the database. I am using javascript in order to add rows dynamically.When I enter data and hit submit , my modelAttribute does not bind to the fields in form page. To avoid array Index out of bound exception made use of autopopulating list.
Below is the form page
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
<title>Add/Remove dynamic rows</title>
<SCRIPT lang="javascript">
function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var counts = rowCount - 1;
var cell1 = row.insertCell(0);
var ldap = document.createElement("input");
ldap.type = "text";
ldap.id="incident"+counts+".ldap"
ldap.name = "incident[" + counts + "].ldap";
cell0.appendChild(ldap);
var cell2 = row.insertCell(1);
var ticket = document.createElement("input");
ticket.type = "text";
ticket.id = "incident"+ counts +".ticket";
ticket.name = "incident[" + counts + "].ticket";
cell2.appendChild(ticket);
var cell3 = row.insertCell(2);
var status = document.createElement("select");
status.type = "text";
status.id = "incident"+ counts +".status";
status.name = "incident[" + counts + "].status";
var opt=document.createElement("option");
opt.text="Pending";
opt.value="Pending";
status.options.add(opt);
var opt=document.createElement("option");
opt.text="Completed";
opt.value="Completed";
status.options.add(opt);
cell3.appendChild(status);
var cell4 = row.insertCell(3);
var comment = document.createElement("input");
comment.type = "text";
comment.id = "incident"+ counts +".comment
comment.name = "incident[" + counts + "].comment";
cell4.appendChild(comment);
var cell5=row.insertCell(4);
var time=document.createElement("input");
time.type="date";
time.id="incident"+ counts +".time";
time.name="incident["+ counts +"].time";
cell5.appendChild(time);
var cell6=row.insertCell(5);
var time=document.createElement("input");
effort.type="text";
effort.name="incident["+ counts +"].effort";
cell6.appendChild(effort);
}
</SCRIPT>
</HEAD>
<BODY>
<div align="center" style="border:1px solid black">
<h>AGILE</h>
</div>
<form action="saveIncident" modelAttribute="incidentList" method="post">
<div align="center">
<TABLE id="incidentTable">
<TR>
<TD>Ldap</TD>
<TD>Ticket No</TD>
<TD>Status</TD>
<TD>Comment</TD>
<TD>Date</TD>
<TD>Effort</TD>
</TR>
<TR>
<TD><input type="text" id="incident0.ldap" name="incident[0].ldap"/></TD>
<TD><INPUT type="text" id="incident0.ticket" name="iincident[0].ticket" /></TD>
<TD><select name="incident[0].status" id="ncident0.status">
<option value="Pending">Pending</option>
<option value=Completed">Completed</option>
</select></TD>
<TD><INPUT type="text" id="incident0.comment" name="incident[0].comment" /></TD>
<TD><input type="date" id="incident0.time" name="incident[0].time"/></TD>
<TD><INPUT type="text" id="incident0.effort" name="incident[0].effort" /></TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('incidentTable')" />
<input type="submit" value="SUBMIT" />
</div>
</form>
</BODY>
</HTML>
Below is the controller:
package com.syed.agile;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.util.AutoPopulatingList;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
#Controller
public class HomeController {
#Autowired
private EmpIncidentDao empIncidentDao;
#RequestMapping(value={"/"})
public ModelAndView newIncident(ModelAndView model)
{
//IncidentList incidentList=new IncidentList();
//model.addObject("incidentList",incidentList);
model.setViewName("/index");
return model;
}
#RequestMapping(value="/newIncident")
public ModelAndView newIncident1(ModelAndView model)
{
IncidentForm incidentList=new IncidentForm();
incidentList.setIncidentForm(new AutoPopulatingList(Incident.class) );
model.addObject("incidentList",incidentList);
model.setViewName("/Incident");
return model;
}
#RequestMapping(value="/saveIncident", method=RequestMethod.POST)
public ModelAndView saveIncident(#ModelAttribute() IncidentForm incidentList)
{ System.out.println("In Controller");
empIncidentDao.saveOrUpdate(incidentList);
return new ModelAndView("redirect:/");
}
}
Anyhelp on this will be appreciated.

You had some typos, try now and remember that on server side you receive keys-values for each cell of the table, so appropriate processing is most likely needed.
EDIT:
That's beacause your IncidentForm leaves something to be desidered, as I already told you keep in mind that:
on server side you receive keys-values for each cell of the table, so
appropriate processing is most likely needed.
If you are getting exception that means that you have to correct the way you are processing those keys-values.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
<title>Add/Remove dynamic rows</title>
<SCRIPT lang="javascript">
function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var counts = rowCount - 1;
var cell1 = row.insertCell(0);
var ldap = document.createElement("input");
ldap.type = "text";
ldap.id="incident"+counts+".ldap"
ldap.name = "incident[" + counts + "].ldap";
cell1.appendChild(ldap);
var cell2 = row.insertCell(1);
var ticket = document.createElement("input");
ticket.type = "text";
ticket.id = "incident"+ counts +".ticket";
ticket.name = "incident[" + counts + "].ticket";
cell2.appendChild(ticket);
var cell3 = row.insertCell(2);
var status = document.createElement("select");
status.type = "text";
status.id = "incident"+ counts +".status";
status.name = "incident[" + counts + "].status";
var opt=document.createElement("option");
opt.text="Pending";
opt.value="Pending";
status.options.add(opt);
var opt=document.createElement("option");
opt.text="Completed";
opt.value="Completed";
status.options.add(opt);
cell3.appendChild(status);
var cell4 = row.insertCell(3);
var comment = document.createElement("input");
comment.type = "text";
comment.id = "incident"+ counts +".comment";
comment.name = "incident[" + counts + "].comment";
cell4.appendChild(comment);
var cell5=row.insertCell(4);
var time=document.createElement("input");
time.type="date";
time.id="incident"+ counts +".time";
time.name="incident["+ counts +"].time";
cell5.appendChild(time);
var cell6=row.insertCell(5);
var effort=document.createElement("input");
effort.type="text";
effort.id ="incident["+ counts +"].effort";
effort.name = "incident["+ counts +"].effort";
cell6.appendChild(effort);
}
</SCRIPT>
</HEAD>
<BODY>
<div align="center" style="border:1px solid black">
<h2>AGILE</h2>
</div>
<form action="saveIncident" modelAttribute="incidentList" method="post">
<div align="center">
<TABLE id="incidentTable">
<TR>
<TD>Ldap</TD>
<TD>Ticket No</TD>
<TD>Status</TD>
<TD>Comment</TD>
<TD>Date</TD>
<TD>Effort</TD>
</TR>
<TR>
<TD><input type="text" id="incident0.ldap" name="incident[0].ldap"/></TD>
<TD><INPUT type="text" id="incident0.ticket" name="iincident[0].ticket" /></TD>
<TD><select name="incident[0].status" id="ncident0.status">
<option value="Pending">Pending</option>
<option value=Completed">Completed</option>
</select></TD>
<TD><INPUT type="text" id="incident0.comment" name="incident[0].comment" /></TD>
<TD><input type="date" id="incident0.time" name="incident[0].time"/></TD>
<TD><INPUT type="text" id="incident0.effort" name="incident[0].effort" /></TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('incidentTable')" />
<input type="submit" value="SUBMIT" />
</div>
</form>
</BODY>
</HTML>

How to place the value in cloned input type file field

When i click + sign, new row will be cloned. I have already done the some work, for that copy the first row value and placed that value in cloned row. Everything will be fine, but file upload values are not palced in new row.
function insRow()
{
var x=document.getElementById('scrolltable');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
var code=document.getElementById('code1').value;
var product=document.getElementById('product1').value;
var first=document.getElementById('first1').value;
var additn=document.getElementById('additn1').value;
var qty=document.getElementById('qty1').value;
var oldfname=document.getElementById('oldfilename1').value;
var lastIndex = oldfname.lastIndexOf("\\");
if (lastIndex >= 0) {
oldfname = oldfname.substring(lastIndex + 1);
}
var inp1 = new_row.cells[0].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = code;
inp1.setAttribute('readonly', 'readonly');
var inp2 = new_row.cells[1].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = product;
inp2.setAttribute('readonly', 'readonly');
var inp3 = new_row.cells[2].getElementsByTagName('input')[0];
inp3.id += len;
inp3.value = first;
inp3.setAttribute('readonly', 'readonly');
var inp4 = new_row.cells[3].getElementsByTagName('input')[0];
inp4.id += len;
inp4.value = additn;
inp4.setAttribute('readonly', 'readonly');
var inp5 = new_row.cells[4].getElementsByTagName('input')[0];
inp5.id += len;
inp5.value = qty;
inp5.setAttribute('readonly', 'readonly');
var inp6 = new_row.cells[5].getElementsByTagName('input')[0];
inp6.id += len;
//inp6.value = oldfname;
inp6.setAttribute("type", "file");
var button = new_row.cells[6].getElementsByTagName('input')[0];
button.value = "#";
button.onclick = function() {editRow(this)};
var button = new_row.cells[6].getElementsByTagName('input')[1];
button.value = "-";
button.disabled=false;
x.appendChild( new_row );
document.getElementById('code1').value='';
document.getElementById('product1').value='';
document.getElementById('first1').value='';
document.getElementById('additn1').value='';
document.getElementById('qty1').value='';
document.getElementById('oldfilename1').value='';
document.getElementById('code1').focus();
}
html code is,
<table id="scrolltable" class="table">
<thead>
<tr>
<th>Code</th>
<th>Product</th>
<th>First</th>
<th>Add</th>
<th>Qty</th>
<th>File</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr><td><input type="text" name="code" id="code1" /> </td>
<td><input type="text" name="product[]" value="" class="input-medium" id="product1" /> </td>
<td><input type="text" name="first[]" value="" class="input-small" id="first1"/></td>
<td><input type="text" name="additn[]" value="" class="input-small" id="additn1" /></td>
<td><input type="text" name="qty[]" value="" class="input-small" id="qty1" /></td>
<td><input type="file" name="oldfilename[]" value="" class="input-small" id="oldfilename1" /></td>
<td><input type="button" id="addmorePOIbutton" style="width:25px;" value="+" onClick="insRow()"/>
<input type="button" id="delPOIbutton" style="width:25px;" value="-" onClick="deleteRow(this)" disabled />
</td></tr>
</tbody>
</table>
my fiddle file is http://jsfiddle.net/c9dccnua/

add/remove multiple rows using checkbox with JQUERY

I have snippet in javascript that add/remove multiple rows within a table. I would like to implement the same thing into JQUERY. At the moment, the checkboxes does'nt work, but I would like them to work for the sake of userbility. I got no clue on jquery at moment. Would you help on the implementation.
Fiddle:http://jsfiddle.net/ronn_nasso/qN2Z8/
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<link rel="stylesheet" type="text/css" href="addRemove.css"/>
<script language="JavaScript" type="text/javascript">
function hasClass(el, cssClass) {
return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);
}
var rowNumber = 1;
function addRow(tableID) {
var counter = document.getElementById(tableID).rows.length-1;
var row = document.getElementById(tableID);
var newRow0 = row.rows[1].cloneNode(true);
var newRow1 = row.rows[counter].cloneNode(true);
// Increment
rowNumber ++;
newRow0.getElementsByTagName('td')[1].innerHTML = rowNumber;
// Update the child Names
var items = newRow0.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var refRow = row.getElementsByTagName('tbody')[0];
refRow.insertBefore(newRow0, refRow.nextSibling);
refRow.insertBefore(newRow1, refRow.nextSibling);
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var i = table.rows.length - 1;
while (2 < i && !hasClass(table.rows[i], 'row-parent')) {
table.deleteRow(i)
i--;
}
if (2 < i) {
table.deleteRow(i)
rowNumber --;
}
}
function addChildRow(e, tableID) {
var table = document.getElementById(tableID);
var newRow = table.rows[0].cloneNode(true);
// Increment
if (e > 0)
if (!isNaN(table.rows[e-1].getElementsByTagName('td')[4].innerHTML))
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)
else
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[1].innerHTML)
newRow.getElementsByTagName('td')[1].innerHTML = counter + 1;
// Update the child Names
var items = newRow.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
var parent = table.rows[i].getElementsByTagName('td');
parent[0].rowSpan = counter+2;
parent[1].rowSpan = counter+2;
parent[2].rowSpan = counter+2;
var refRow = table.getElementsByTagName('tr')[e-1];
refRow.parentNode.insertBefore(newRow, refRow.nextSibling);
}
function deleteChildRow(e, tableID) {
var table = document.getElementById(tableID);
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
if (e-1 > i)
table.deleteRow(e-1)
}
</script>
</HEAD>
<BODY>
<form action="Untitled-2.php" name="dataTable" method="post">
<table width="760" id="dataTable" border="1">
<tr>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr class="row-parent">
<td width="22" rowspan="2">
<input type="checkbox" name="chk" />
</td>
<td width="12" rowspan="2">1</td>
<td width="149" rowspan="2">
<input type="text" name="txtbox[]" />
</td>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr>
<td width="20"> </td>
<td width="12"> </td>
<td>
<input type="button" value="Add Row" onClick="addChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
<input type="button" value="Delete Row" onClick="deleteChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
</td>
<td width="146"> </td>
<td width="188"> </td>
</tr>
</table>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
</form>
</BODY>
</HTML>
Fiddle:http://jsfiddle.net/ronn_nasso/qN2Z8/

$("#ADD").click(function(){
$("table").append($("tr:last").clone(true));
//clone the last row and add it to table
$("tr:last input").val("");
//reset all the inputs in the last row
});
$("#DEL").click(function(){
$("table tr input:checked").parents('tr').remove();
//find the rows with checked check boxes in them and remove them
});
SAMPLE

updated your code to this:
$("#btnAddRow").on("click",function(){
addRow('dataTable');
});
$("#btnDelRow").on("click",function(){
deleteRow('dataTable');
});
$("#btnAddChildRow").on("click",function(){
var index = $(this).closest('tr').index();
addChildRow(index,'dataTable');
});
$("#btnDelChildRow").on("click",function(){
var index = $(this).closest('tr').index();
deleteChildRow(index,'dataTable');
});
working fiddle here: http://jsfiddle.net/qN2Z8/5/ (check this fiddle)
i hope it helps.

Try following code
<input type="button" id="addPOIbutton" value="Add POIs"/><br/><br/>
<table id="POITable" border="1">
<tr>
<td>1</td>
<td><input type="checkbox" id="chck"/></td>
<td><input size=25 type="text" id="latbox"/></td>
<td><input size=25 type="text" id="lngbox" readonly=true/></td>
<td><input type="button" id="delPOIbutton" value="Delete Row" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmorePOIbutton" value="Add Row" onclick="insRow()"/></td>
</tr>
</table>
<script>
function deleteRow(row)
{
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('POITable').deleteRow(i);
}
function insRow()
{
var x=document.getElementById('POITable');
var new_row = x.rows[0].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
x.appendChild( new_row );
}
</script>
Link to fiddle here

submit two form contents onto one action page

i have two Forms to be submitted to a single destination page.
<form name= "form1" id="form1" action="final.php">
<input type="box1" name="box1" value="" >
</form>
<form name ="form2" id="form2" action="final.php">
<table>
<input type ="text" id="txt_1" name ="txt_1" value="">
...
</table>
</form>
<input type= "button" name="mybutton" id="mybutton" onclick="somefunction();">
here ,
form1 has some satic contents
and
form2 has a table which is dynamically generated by js...
problem is ...i want to submitted values from both the forms to same page final.php ...how cud i do it .....pls avoid jquery/ajax...
simple javascript welcomed ...
thanks in advance !
this is the js for generating dynamic table in form2
<script type="text/javascript">
function viewsource() {
alert(document.body.innerHTML);
}
</script>
<script type="text/javascript">
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var frm=document.form2;
if (!frm.ary) frm.ary=[frm.t1_1,frm.t1_2,frm.t1_3];
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// numberd row
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// Item row
var cellRight1 = row.insertCell(1);
var el1 = document.createElement('input');
frm.ary.push(el1);
el1.type = 'text';
el1.value = '';
el1.name = 't' + iteration + '_1';
el1.id = 't' + iteration + '_1';
el1.size = 13;
el1.onkeyup=Calc;
el1.onblur=Calc;
cellRight1.appendChild(el1);
// Price row
var cellRight2 = row.insertCell(2);
var el2 = document.createElement('input');
frm.ary.push(el2);
el2.type = 'text';
el2.value = '';
el2.name = 't' + iteration + '_2';
el2.id = 't' + iteration + '_2';
el2.size = 10;
el2.onkeyup=Calc;
el2.onblur=Calc;
cellRight2.appendChild(el2);
// Price row
var cellRight3 = row.insertCell(3);
var el3 = document.createElement('input');
frm.ary.push(el3);
el3.type = 'text';
el3.value = '0';
el3.name = 't' + iteration + '_3';
el3.id = 't' + iteration + '_3';
el3.size = 10;
cellRight3.appendChild(el3);
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 3) tbl.deleteRow(lastRow - 1);
}
function formReset()
{
document.getElementById("form2").reset();
}
</script>
<script type="text/javascript">
function Calc(){
var frm=document.form2;
if (!frm.ary){ frm.ary=[frm.t1_1,frm.t1_2,frm.t1_3];}
for (var zxc0=0;zxc0<frm.ary.length;zxc0+=3)
{
var total =1;
if (frm.ary[zxc0].value.length>0&&!isNaN(frm.ary[zxc0].value))
{
total =frm.ary[zxc0].value*1* frm.ary[zxc0+1].value;
}
frm.ary[zxc0+2].value =total;
}
var sum1 =0;
for (var zxd0=0;zxd0<frm.ary.length;zxd0+=3)
{
if (frm.ary[zxd0+2].value.length>0&&!isNaN(frm.ary[zxd0+2].value))
{
sum1 +=parseInt(frm.ary[zxd0+2].value);
}
}
frm.sum.value = sum1;
}
</script>
<form action="final.php" method="post" name="form2" id="form2">
<imput type ="text" name ="temp" id="temp" >
<table border="2" border-color="#000000" border-type="solid" id="tblSample"
align="center" font-size="20">
<tr>
<th>
<input type="button" value="Add " onclick="addRowToTable();"></th><th>
<input type="button" value="Remove " onclick="removeRowFromTable();" /></th>
<th> <input type="button" value="Reset" onclick="formReset();">
</th>
</tr><br>
<tr id="cloneid" >
<td>
1.
</td>
<td>
<input type="text" name="t1_1" id="t1_1" size="16" value="0" onkeyup="Calc();"
onblur="Calc();">
</td>
<td>
<input type="text" name="t1_2" id="t1_2" size="16" value="0" onkeyup="Calc();"
onblur="Calc();">
</td>
<td>
<input type="text" name="t1_3" id="t1_3" value= "0" size="16">
</td>
</tr>
</table>
<table border="2" border-color="#000000" align="center">
<tr>
<td colspan="3" align="center">
Sum: <input type="text" name="sum" id="sum">
</td>
</tr>
</table>
</form>
<input type="button" name = "mybutton" id ="mybutton" value="set"
onclick="somefunction();">
}
and
form1 is same as mentioned including jquery for datetimepickers along witha couple of text boxes...

u can use Java Script
function button1click() {
yourForm.action = "Final.php";
yourForm.submit();
}
n in HTML
<form action='' method='post'>
..
</form>

We Keep Coding

JavaScript is the programming language of the Web.

Dynamic generated textboxs values sum - javascript

Is this what you want?? $('#addbutt').click(function() { $(":text").each(function(){ test_asd += parseInt($(this).val()); }); alert(test_asd); }); edit: Link to prove this works with dynamically added elements using drag and clone

Related

Javascript writing into Table not working

Spring AutoPopulatingList not binding to modelAttribute

How to place the value in cloned input type file field

add/remove multiple rows using checkbox with JQUERY

submit two form contents onto one action page

Categories

Resources