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)
Related
I have a table, I am cloning a table row on icon.
For now What I have done is below:
<h3 class="table-add glyphicon glyphicon-plus"></h3>
<table class="table">
<tr id= "1">
<td> <input name = "textfield" type="text" class="form-control" value = "1" > </td>
<td> <input name= "numberfield" type="number" class="form-control" value = "2"> </td>
</tr>
<tr id= "3">
<td> <input name = "textfield" type="text" class="form-control" value = "1" > </td>
<td> <input name= "numberfield" type="number" class="form-control" value = "2"> </td>
</tr>
<tr id= "4">
<td> <input name = "textfield" type="text" class="form-control" value = "1" > </td>
<td> <input name= "numberfield" type="number" class="form-control" value = "2"> </td>
</tr>
<tr id = "5" class="hide">
<td> <input name = "textfield" type="text" class="form-control" value = "1" > </td>
<td> <input name= "numberfield" type="number" class="form-control" value = "2"> </td>
</tr>
</table>
Now I cloning row by getting hidden row:
var $TABLE = $('#table');
$('.table-add').click(function () {
var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
// //Assigning every table row a unique ID
var max=0;
$('table').find('tr').each(function(){
var id=parseInt($(this).attr('id'));
if (id>=max){
max = id;
}
});
//cloning row with new ID
$clone.attr('id', parseInt(max)+1);
$clone.find('input.myinput').tagsinput('removeAll');
$TABLE.find('table').append($clone);
});
This is what I am doing- cloning a hidden row, and append to table by removing hidden class from $clone cloned row which somehow good approach as well. But I don't want something like this, I want to clone a hidden row that will be made visible now and cloned row of hidden row must
be hidden now. how to go for that.
Thanks
I don't know what do you do exactly... But, I would suggest to use a jQuery plugin to achieve that more easy. Below I put one that I used some time ago.
jQuery Plugin to duplicate Elements:
https://github.com/fire1/DuplicateElement
Live Demo:
http://fire1.eu/DuplicateElement/
I would like to ask if you can help me fix my code. I built an HTML grid and have a button that should automatically add a new row. The function associated with the button doesn't work.
Here's the HTML code
<html>
<head>
<script src="test.js"></script>
</head>
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Advertiser</th>
<th>Formato</th>
<th>Tipo</th>
<th>Autoplay</th>
<th>Audio</th>
</tr>
<tr id="row1">
<td id="advertiser_row1">
<select name="client">
<option value="Mcvities">Mcvities</option>
<option value="Enel">Enel</option>
<option value="Brita">Brita</option>
</select>
</td>
<td id="formato_row1">
<select name="formato">
<option value="intro shaa">intro shaa</option>
<option value="intro xaxis">intro xaxis</option>
<option value="carousel">carousel</option>
<option value="mid-strip">mid-strip</option>
</select>
</td>
<td id="tipo_row1">
<select name="tipi">
<option value="video">video</option>
<option value="immagine">immagine</option>
</select>
</td>
<td id="audio_row1">
<select name="audio">
<option value="video">yes</option>
<option value="immagine">no</option>
</select>
</td>
<td id="tipo_row1">
<select name="autoplay">
<option value="video">yes</option>
<option value="immagine">no</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" id="new_cl"></td>
<td><input type="text" id="new_fo"></td>
<td><input type="text" id="new_ti"></td>
<td><input type="text" id="new_au"></td>
<td><input type="text" id="new_at"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
</body>
</html>
here my js:
function add_row()
{
var new_ad=document.getElementById("new_cl").value;
var new_im=document.getElementById("new_fo").value;
var new_cp=document.getElementById("new_ti").value;
var new_st=document.getElementById("new_au").value;
var new_en=document.getElementById("new_at").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='advertiser_row"+table_len+"'>"+new_cl+"</td><td id='formato_row"+table_len+"'>"+new_fo+"</td><td id='tipo_row"+table_len+"'>"+ti_cp+"</td><td id='audio_row"+table_len+"'>"+au_cl+"</td><td id='autoplay_row"+table_len+"'>"+new_at+"</td>;
document.getElementById("new_cl").value="";
document.getElementById("new_fo").value="";
document.getElementById("new_ti").value="";
document.getElementById("new_au").value="";
document.getElementById("new_at").value="";
}
Try this:
Change: <table id="myTable">
function add_row()
{
var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell3.innerHTML = "NEW CELL3";
cell4.innerHTML = "NEW CELL4";
}
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>
I am trying to add the values the user enteres into the Slots cell in each row. I want to get the totals and place it in the SlotsTotals field. But, the code is not working at all.
function checkRow(){
var table = document.getElementById('tblSample');
for (var i = 0, row; row = table.rows[i]; i++){
document.getElementById('SlotsTotals').value += document.getElementById('txtSlots' + i).value;
}
}
I'm dynamically adding rows to a table. The user will input values into the slots field. I want to loop through the table to get a total of all the values and add then total to the SlotsTotal field.
Here is my some of my html to add the rows.
function addRow() {
//function ValidateRow(){alert('error');}
//function insertRow();
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
//var iteration = lastRow;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cell5 = row.insertCell(6);
var element5 = document.createElement('input');
element5.type = 'text';
element5.name = 'txtSlots' + iteration;
element5.id = 'txtSlots' + iteration;
element5.size = 10;
cell5.appendChild(element5);
}
could you post some of your html code please
maybe try
document.getElementById('SlotsTotals').innerHTML
http://www.w3schools.com/jsref/met_doc_getelementbyid.asp
__
maybe this can help :)
<table id='tblSample' style='border: 1pt, solid, black;'>
<tr>
<td>
...A1
</td>
<td>
...A2
</td>
<td>
...A3
</td>
<td>
...A4
</td>
<td>
...A5
</td>
<td>
<input type='text' id='txtSlots1'>
</td>
</tr>
<tr>
<td>
...B1
</td>
<td>
...B2
</td>
<td>
...B3
</td>
<td>
...B4
</td>
<td>
...B5
</td>
<td>
<input type='text' id='txtSlots2'>
</td>
</tr>
<tr>
<td>
...C1
</td>
<td>
...C2
</td>
<td>
...C3
</td>
<td>
...C4
</td>
<td>
...C5
</td>
<td>
<input type='text' id='txtSlots3'>
</td>
</tr>
<tr>
<td>
...D1
</td>
<td>
...D2
</td>
<td>
...D3
</td>
<td>
...D4
</td>
<td>
...D5
</td>
<td>
<input type='text' id='txtSlots4'>
</td>
</tr>
<tr>
<td>
...E1
</td>
<td>
...E2
</td>
<td>
...E3
</td>
<td>
...E4
</td>
<td>
...E5
</td>
<td>
<input type='text' id='txtSlots5'>
</td>
</tr>
</table>
<input type='button' onclick="test();" value="test">
<input type='text' id='SlotsTotals'>
<script>
function test(){
var table = document.getElementById('tblSample');
res = document.getElementsByTagName('input');
sum = 0
for (var i = 0; i < res.length; i++){
s = res[i].id
if((String(s).indexOf("txtSlots") > -1)&&(res[i].type == 'text'))
{
sum += parseInt(res[i].value)
}
}
document.getElementById('SlotsTotals').value = sum
}
</script>
I have a dialog pop up with drop down selects, an input box and a save button. This save button updates the parent table with the user drop down/input values, but at at end of the table. I need these values to go under the chosen father part of the table. My drop down for the father has independent IDs, I'm just not sure how to implement it. I've tried to strip my code to work in jsfiddle, but the demo won't add values to the table. Here's my code for the dialog pop up:
<script>
$("#save").click(function () {
for(var j=0;j<document.getElementsByName("select1").length;j++) {
updateParent1(document.getElementsByName("select1").item(j).value + ' ' +
document.getElementsByName("text1").item(j).value + ' - ' +
document.getElementsByName("select2").item(j).value,
document.getElementsByName("chooseFather").item(j).value);
}
});
</script>
<form method="post" name="shoreInfo">
<table>
<tr>
<td>
<select name="select1" value="1">
<option selected value="undefined">Select...</option>
<option value="Value 1 (option1)">Value 1 (option1)</option>
<option value="Value 1 (option2)">Value 1 (option2)</option>
</select>
</td>
<td>
<select name="chooseFather" value="4">
<option selected value="undefined">Select...</option>
<option id="father3">Choose to add this information under father3 row.</option>
<option id="father4">Choose to add this information under father4 row.</option>
</select>
</td>
<td>
<select name="select2" value="3">
<option selected value="undefined">Select...</option>
<option value="Value 2 (option1)">Value 2 (option1)</option>
<option value="Value 2 (option2)">Value 2 (option2)</option>
</select>
</td>
<td>
<input type="text" name="text1" value="2" class="text94 apni"/>
</td>
<td><input type="button" value="Add values to table" id="save" />
</td>
</tr>
</table>
</form>
And here's the code for the parent page:
<script>
function updateParent1(value1) {
var table = document.getElementById("shore_tab");
var rowCount = table.rows.length;
//alert(rowCount);
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = "";
var cell2 = row.insertCell(1);
cell2.innerHTML = value1;
var cell3 = row.insertCell(2);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell3.innerHTML = "<img title='remove' src='images/delete-row-icon1.png' class='sub_icon remove'/> ";
cell3.appendChild(element1);
}
</script>
<table id="shore_tab" border="1">
<tr class="row_blue_bold father" id="father3">
<td colspan="2" class="father_header">Category 3</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son3">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father3, category 3)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son3">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father3, category 3)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold father" id="father4">
<td colspan="2" class="father_header">Category 4</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son4">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father4, category 4)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son4">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father4, category 4)</td>
<td class="cell_50"> </td>
</tr>
</table>