Im making a website that the user will put its (Name , LastName , Gender , Age) and it will send the text in the table data .
My first inputs is showing in first table row
I need to put the second inputs in the second table row (can someone help me !) lol
<h1 align=center>INFORMATION</h1>
Name: <input id="first_name" size="30" type="text" action="document.getElementById(f1)">
LastName: <input type="text" size="30" id="lastname">
Age:<input type="text" size="30" id="age">
Gender: <input type="text" size="30" id="gender">
<button class="okok" name="myBtn" type="submit" value="Submit Data" onClick="ajax_post();">COMPUTE </button>
<table bgcolor ="black" border="2" cellspacing=1 align=center height="100" width="600">
<br>
<tr bgcolor = "black">
<th width=20 style="color:white;">Name</th>
<th width=20 style="color:white;">Lastname</th>
<th width=20 style="color:white;">Age</th>
<th width=20 style="color:white;">Gender</th>
</tr>
<tr>
<td style="color:white;" id=f1 > </td>
<td style="color:white;" id="no1"> </td>
<td style="color:white;" id="no2"> </td>
<td style="color:white;" id="no3" > </td>
</tr>
<tr>
<td style="color:white;" id="secondtd1"> </td>
<td style="color:white;" id="secondtd2"> </td>
<td style="color:white;" id="secondtd3"> </td>
<td style="color:white;" id="secondtd4"> </td>
<td> </td>
</tr>
</font>
</table>
My script
<script>
function ajax_post(){
var fn = document.getElementById("first_name").value;
var table = document.getElementById("f1");
table.innerText = fn;
var pre = document.getElementById("lastname").value;
var table1 = document.getElementById("no1");
table1.innerText = pre;
var mid = document.getElementById("age").value;
var table2 = document.getElementById("no2");
table2.innerText = mid;
var fil = document.getElementById("gender").value;
var table3 = document.getElementById("no3");
table3.innerText = fil;
}
</script>
i have no idea how to do this .. :(
If you're looking for an example in plain Javascript, here you go. It uses Javascript's insertRow and insertCell.
Please keep in mind that this is not an "ajax_post" yet, you will still need to add an actual server request. You might also want to look into Javascript frameworks that handle this, and more, in a cleaner way.
function ajax_post(e) {
// Prevent the form from actually submitting this.
e.preventDefault();
// Save all elements/values we need later in convenient variables.
var table = document.getElementById("table");
var firstname = document.getElementById("first_name").value;
var lastname = document.getElementById("lastname").value;
var age = document.getElementById("age").value;
var gender = document.getElementById("gender").value;
// Insert a new row into our table at the position -1 (bottom).
var row = table.insertRow(-1);
// Insert 4 empty cells.
var cell_firstname = row.insertCell(0);
var cell_lastname = row.insertCell(1);
var cell_age = row.insertCell(2);
var cell_gender = row.insertCell(3);
// Fill the empty cells with the data from the form.
cell_firstname.innerHTML = firstname;
cell_lastname.innerHTML = lastname;
cell_age.innerHTML = age;
cell_gender.innerHTML = gender;
}
<h1>INFORMATION</h1>
<form>
Name: <input id="first_name" type="text"><br>
LastName: <input type="text" id="lastname"><br>
Age: <input type="text" id="age"><br>
Gender: <input type="text" id="gender"><br>
<input type="submit" value="Compute" onclick="ajax_post(event)">
</form>
<br>
<table bgcolor="black" style="color: white;" border="2" width="100%" id="table">
<tr>
<th>Name</th>
<th>Lastname</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>André</th>
<td>Eric</td>
<td>33</td>
<td>Male</td>
</tr>
</table>
Related
I am fetching the values from the form page and then validating it. I am using jquery to handle the input objects and fetch the values which are entered by the user.
My HTML code is:
<form id="userDetails">
<table class="containFormTable" cellspacing="8">
<tr>
<td class="detail">Name:</td>
<td>
<input name="name" type="text" id="name" />
</td>
</tr>
<tr>
<td class="detail">Email-Id:</td>
<td>
<input name="emailId" type="text" id="emailId">
</td>
</tr>
<tr>
<td class="detail">Phone-No:</td>
<td>
<input name="phoneNo" type="text" id="phoneNo">
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 50px">
<input type="button" value="Submit" id="submit">
</td>
</tr>
</table>
</form>
My javascript file code which is fetching the data is:
$(document).ready(function() {
$('#submit').click(function() {
var name = $('#name').find('input[name="name"]').val();
var emailId = $('#emailId').find('input[name="emailId"]').val();
var phoneNo = $('#phoneNo').find('input[name="phoneNo"]').val();
});
});
The result I am getting in the variable name or any other is "undefined".
Where am I going wrong in it?
All you need to do is get the value from the elements, like this:
var name = $('#name').val();
var emailId = $('#emailId').val();
var phoneNo = $('#phoneNo').val();
Your code was getting a reference to the form fields, then looking for child elements (which input elements don't have, hence undefined) that were the same as the element that you already found and then trying to get the value of that.
Just remove .find('input[name="name"]') from each selector
$(document).ready(function(){
$('#submit')
.click(
function() {
var name = $('#name').val();
var emailId = $('#emailId').val();
var phoneNo = $('#phoneNo').val();
console.log(name);
console.log(emailId);
console.log(phoneNo);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="userDetails">
<table class="containFormTable" cellspacing="8">
<tr>
<td class="detail">Name:</td>
<td><input name="name" type="text" id="name"/></td>
</tr>
<tr>
<td class="detail">Email-Id:</td>
<td><input name="emailId" type="text" id="emailId"></td>
</tr>
<tr>
<td class="detail">Phone-No:</td>
<td><input name="phoneNo" type="text" id="phoneNo"></td>
</tr>
<tr >
<td colspan="2" style="padding-top: 50px"><input type="button" value="Submit" id="submit"></td>
</tr>
</table>
</form>
I am able to create dynamic textboxes on one button click but now the requirement is that we have to get values of that textboxes and send it to java class where I can use those values entered in the created dynamic textboxes but I am unable to do so.I have tried my best to solve this problem but I am stuck in getting values and sending it to action class.I have referred this link where umesh awasthi sir has answered but here it is for single value but how to get values from dynamically created and pass those and get it separately in action class.
Below is my javascript code :
<script>
function addFieldForDescription() {
alert("Inside Function");
var table = document.getElementById("addTable");
var tr = document.getElementById("addTables");
var a = table.rows.length;
alert(a);
var row = table.insertRow(a);
// var cell0=row.insertCell(0);
// cell0.innerHTML=a;
var input = document.createElement("input");
input.type = "text";
input.id="addDesc"+a;
input.size="40";
var br = document.createElement("br");
tr.appendChild(br);
tr.appendChild(input);
tr.appendChild(br);
}
function addFieldForAmount() {
alert("Inside Function");
var table = document.getElementById("addTable");
var tr = document.getElementById("addTables1");
var a = table.rows.length;
alert(a);
var row = table.insertRow(a);
// var cell0=row.insertCell(0);
// cell0.innerHTML=a;
var input = document.createElement("input");
input.type = "text";
input.id="addAmount"+a;
input.size="40";
var br = document.createElement("br");
tr.appendChild(br);
tr.appendChild(input);
tr.appendChild(br);
}
function submitValues()
{
alert("Inside Submit");
var amountId=document.getElementById("addTables");
alert(amountId.value);
for(var i=0;i<amountId.rows.length;i++)
{
var temp=document.getElementById("addDesc"+i);
alert(temp.value);
}
}
</script>
and below is my jsp code
<html>
<head>
</head>
<body>
<table class="responstable3" id="addTable">
<tr>
<th></th>
<th style="width: 60%;">Description <input
type="button" name="add" value="+"
onclick="addFieldForDescription()" id="addDesc0"
class="btn btn-warning" /> <input type="button"
value="Submit" onclick="submitValues()"/></th>
<th data-th="Amount"><span>Amount <input
type="button" name="add" value="+"
onclick="addFieldForAmount()" id="addAmount"
class="btn btn-warning" /></span></th>
</tr>
<tr>
<td> </td>
<td id="addTables"><input type="text" id="add" size="40" /><br></td>
<td id="addTables1"><input type="text" id="addAmount"
size="40" /><br></td>
</tr>
<tr>
<td colspan="2" style="padding: 0px;">
<table class="responstable4">
<tr>
<td style="text-align: left;">Pan No. :<input
type="text" name="invoiceVar.panNumber"
class="profarma_formtextbox1" /></td>
<td style="text-align: left;">Net Amount :</td>
</tr>
<tr>
<td style="text-align: left;">Service Tax No. :<input
type="text" name="invoiceVar.serviceTaxNumber"
class="profarma_formtextbox1" /></td>
<td style="text-align: left;">Service Tax # 14.00%</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td style="text-align: left;">SBC # 0.50%</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td style="text-align: left;">Total Amount</td>
</tr>
</table>
</td>
<td style="padding: 0px;">
<div ng-app>
<table class="responstable4">
<tr>
<td><input type="text" name="invoiceVar.netAmount"
class="profarma_formtextbox2" ng-model="a" /></td>
</tr>
<tr>
<td><input type="text" name="invoiceVar.serviceTax"
class="profarma_formtextbox2" value="{{a*0.14}}" /></td>
</tr>
<tr>
<td><input type="text" name="invoiceVar.sbcTax"
class="profarma_formtextbox2" value="{{a*0.005}}" /></td>
</tr>
<tr>
<td><input type="text"
name="invoiceVar.invoiceTotalAmount"
class="profarma_formtextbox2"
value="{{a--(a*0.14)--(a*0.005)}}" /></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: left;">Total Amount in
Words :</td>
</tr>
</table>
</body>
</html>[![error][2]][2]
and here it is how it looks like.yellow plus button will add textboxes in description and amount column and I have to call those values in action class.
Any help would be greatly appreciated .thank you :)
By using javascript i have added new rows to the table dynamically. but i don't know how to access the data from those dynamically created rows in PHP so that i can insert them into database.
i here by giving html and java script please help me to write PHP code to extract data from dynamically created table. i can extract data from static table by using DOM object.
<form name="frmtransport" method="post" action="transportation.php" id="Form1">
<table id="Table1" name="transport">
<tr >
<td colspan="8" >
Transportation
</td>
</tr>
<tr style="height: 36px;">
<td colspan="2" Date
</td>
<td colspan="6" >
<input type="text" id="jQueryDatePicker1" name="trdate" value="25/02/2015">
</td>
</tr>
<tr>
<td>
location
</td>
<td>
no.of boxes
</td>
<td>
Gf.no
</td>
<td>
invoice no
</td>
<td>
invoice date
</td>
<td>
lorryno
</td>
<td>
vat no
</td>
</tr>
<tr>
<td >
<select name="cmblocation" size="1" id="Combobox1" style="position:relative;width:170px;height:36px;z-index:1;">
<option value="volvo">
Volvo
</option>
<option value="saab">
Saab
</option>
<option value="mercedes">
Mercedes
</option>
<option value="audi">
Audi
</option>
</select>
</td>
<td >
<input type="text" id="Editbox1" name="txtnoofboxes">
</td>
<td >
<input type="text" id="Editbox2" name="txtgrno" >
</td>
<td >
<input type="text" id="Editbox3" name="txtinvoiceno" >
</td>
<td >
<input type="text" id="Editbox4" name="txtinvoiceno" >
</td>
<td >
<input type="text" id="Editbox5" name="txtinvoiceno" >
</td>
<td >
<input type="text" id="Editbox6" name="txtinvoiceno" >
</td>
<td >
<input type="button" id="Button1" onclick="myFunction();" name="cmdadd" value="Add" >
</td>
</tr>
<tr>
<td colspan="8">
<input type="submit" value="Save" name="btnsave" id="Button1"
</td>
</tr>
</table>
</form>
JavaScript Code:
function myFunction() {
var table = document.getElementById("Table1");
//var rowc=table.rows.length;
var row = table.insertRow(4);
row.className = "rowstyle";
var cell0 = row.insertCell(0);
var element = document.getElementById("Combobox1");
var op = element.options[element.selectedIndex].text;
document.getElementById("Combobox1").value = "";
cell0.innerHTML = op;
var cell1 = row.insertCell(1);
cell1.innerHTML = document.getElementById("Editbox1").value;
document.getElementById("Editbox1").value = "";
var cell2 = row.insertCell(2);
cell2.innerHTML = document.getElementById("Editbox2").value;
document.getElementById("Editbox2").value = "";
var cell3 = row.insertCell(3);
cell3.innerHTML = document.getElementById("Editbox3").value;
document.getElementById("Editbox3").value = "";
var cell4 = row.insertCell(4);
cell4.innerHTML = document.getElementById("jQueryDatePicker2").value;
document.getElementById("jQueryDatePicker2").value = "";
var cell5 = row.insertCell(5);
cell5.innerHTML = document.getElementById("Editbox5").value;
document.getElementById("Editbox5").value = "";
var cell6 = row.insertCell(6);
cell6.innerHTML = document.getElementById("Editbox6").value;
document.getElementById("Editbox6").value = "";
var cell7 = row.insertCell(7);
cell7.innerHTML = '<input type="button" id="Button1" style="width:45px;height:35px;" value="Delete" onclick="deleteRow(this)"/>';
/* cell1.innerHTML = document.getElementsByName("txtnoofboxes").value;
cell2.innerHTML = document.getElementsByName("txtnoofboxes");*/
}
When you submit the form, only data from input fields in the form will be submitted to the server. Your code takes the entered values out of the input fields and places them in table cells, effectively removing them from the submitted data.
You need to add the values of the created rows to input fields (or use AJAX as Deepak Kamat suggested). When you add the values to an input field is up to you. You can do it:
When the user clicks add (This has the benefit of editable fields).
When the user clicks save.
The second option requires form submission via JavaScript form.submit(), but it allows you to keep the table unencumbered by lots of input fields, if that is a concern to you.
(Also, look into catching for null values so you don't create empty rows on accident)
<form>
<table width="660" border="0" class="DarkButtonStyleMedium">
<tr>
<td width="299"> </td>
<td width="332" rowspan="11"><img src="Images/PCD-HOLES.png" width="350" height="353"
class="ButtonStyleMedium"/></td>
</tr>
<tr>
<td>
<div align="right">PITCH CIRCLE <span
class="GeneralPageTextWhite">DIAMETER (PCD):</span><span
class="GeneralPageText">:
<input name="diameter" type="Number" class="ButtonStyleMedium" id="diameter"
value="" size="12"/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="right"><span class="GeneralPageTextWhite"> NUMBER OF HOLES:
<input name="number" type="Number" class="ButtonStyleMedium" id="number"
value="" size="12"/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="right"><span class="GeneralPageTextWhite">START ANGLE (A):
<input name="startangle" type="Number" class="ButtonStyleMedium" id="startangle"
value="" size="12"/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="right"><span class="GeneralPageText">
<input type="button" class="ButtonStyleMedium" onclick="calculateAll();" value='SOLVE'/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="right"><span class="GeneralPageText">
<input type="button" class="ButtonStyleMedium" onclick="clearAll();clearTable();" value='RESET'/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<p> </p>
<div class="ButtonStyleAnswer">
<table id="resultTable" width=600 border="0.5">
<colgroup>
<col width=200>
</colgroup>
<tr>
<th>
<div align="left" width=200 >HOLE NUMBER</div>
</th>
<th>
<div align="left" width=200 >X CO-ORDINATE</div>
</th>
<th>
<div align="left" width=200 >Y CO-ORDINATE</div>
</th>
</tr>
<tr>
<td height="19" colspan="3">
<div align="center"></div>
<div align="center"></div>
<div align="center"></div>
</td>
</tr>
</table>
</div>
<p> </p>
</form>
<p> </p>
</div>
<script>
function calculateAll() {
var diameter = Number(document.getElementById("diameter").value);
var number = Number(document.getElementById("number").value);
var startangle = Number(document.getElementById("startangle").value);
do {
var holenumber = 0;
var boltholenumber = holenumber + 1;
var radius = diameter / 2;
var k = (holenumber * (360 / number)) + startangle;
var xresult = radius * Math.cos(k);
var yresult = radius * Math.sin(k);
var table = document.getElementById("resultTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(1);
cell2.innerHTML = xresult.toFixed(5);
cell3.innerHTML = yresult.toFixed(5);
cell1.innerHTML = boltholenumber.toFixed(0);
holenumber++;
}
while (holenumber > number);
}
function clearAll() {
document.getElementById("diameter").value = "";
document.getElementById("number").value = "";
document.getElementById("startangle").value = "";
document.getElementById("boltholenumber").value = "";
document.getElementById("xresult").value = "";
document.getElementById("yresult").value = "";
}
function clearTable() {
var elmtTable = document.getElementById('resultTable');
var tableRows = elmtTable.getElementsByTagName('tr');
var rowCount = tableRows.length;
for (var x = rowCount - 1; x > 0; x--) {
elmtTable.removeChild(tableRows[x]);
}
}
</script>
Hi
I have a two part question but I'm not sure if this allowed.
The first part being I can only get one row of outputs from the do/while loop, is this because I am writing to the same cells although I am using table.insertRow(-1) within the loop.
The second part is I cannot clear the one row of results from the table using the clearAll function, i cannot see why. I have used Jsfiddle and get no hints.
All,
I have table which I am cloning on clicking on button and after cloning table I need to do few calculation in the cloned table as well as in parent table. My problem is that I am not able to do calculation on each appended(clone) table. I mean I wrote a on blur function to do calculation with textbox value but when I am cloning table since class name is same for all textbox, in parent and cloned table my result showing in all textbox instead of corresponding part of the table. Here is my table and my jquery code which I am following.
<html>
<body>
<table>
<tbody>
<tr><td>
<table width="95%" border="0" cellspacing="5" cellpadding="5" style="margin-left:10px;" id="product">
<thead><tr>
<td class="mandatory"> * Product Name </td>
<td class="label"> Qty.in Stock</td>
<td class="mandatory">* Qty </td>
<td class="mandatory">* Unit Price</td>
<td class="mandatory">* List Price</td>
<td class="mandatory">* Total</td>
</tr>
</thead>
<tbody class="product_details" id="tbody_product">
<tr class="tr_product_details">
<td>
<input type="text" name="txtproductName[]" id="product-name" />
<a href="">
<img width="17" height="16" src="images/Products_small.gif"> </a>
<input type="hidden" name="productid[]" id="productid" />
</td>
<td>
<input type="text" name="txtqtyStock[]" id="productstock" />
</td>
<td>
<input type="text" name="txtQty" id="product-quatity" class="product-qty" value="3" />
</td>
<td>
<input type="text" name="txtUnitPrice[]" id="product-price" />
</td>
<td>
<input type="text" name="txtListPrice[]" id="product-list-price" class="product-list-price"
/>
</td>
<td><div style="margin-left:120px;">
<input type="text" name="txtTotal[]" size="10" class="total-price" />
</div>
</td>
</tr>
<tr>
<td colspan="5"> <img width="17" height="16" src="images/spacer.gif">Product Description </td>
</tr>
<tr>
<td colspan="5"><textarea style="width:65%" maxlength="250" rows="3" cols="30" name="txtProductDescription[]" id="textarea-product-description"></textarea>
</td>
<td colspan="1" class="tbl">
<table >
<tr>
<td>Discount: </td>
<td> <input type="text" name="txtProductDiscount[]" size="10" class="product-discount" /></td>
</tr>
<tr>
<td class="label">Total After Discount: </td>
<td> <input type="text" name="txtAfterDiscount[]" size="10" class="total-after-discount" /></td>
</tr>
<tr>
<td> Tax: </td>
<td><input type="text" name="txtProductTax[]" size="10" />
</td>
</tr>
<tr>
<td class="label"> Net Total: </td>
<td><input type="text" name="txtNetTotal[]" size="10" class="net-total" /> </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table align="left" style="margin-left:20px;">
<tr>
<td><input type="button" id="btnaddProduct" value="Add Product" class="button"/> </td>
</tr>
</table>
</body>
</html>
And my script which I am using :
<script type="text/javascript">
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr+" .product-qty").bind("blur change",function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
// alert( $(this).children().children().attr("class"));
// $(this).children().children().attr("class");
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function() {
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
return false;
});
});
</script>
$("#"+qty_attr+" .product-qty")
Comes out empty (no element selected) because you already added .product-qty in parent_qty_id to qty_attr.
$("#"+qty_attr)
Works.
There were alot of other errors in your code which made the blur/change routine run twice etc. I've sanitized it some into this:
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr).blur(function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function(e) {
e.preventDefault();
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
});
});
Further tweaking is probably needed.