I would like to be able to send multiple dropdown values with the same name to insert them in the database
can somebody help me??
<?php
session_start();
require_once('Connections/koneksi.php');
if($_REQUEST['submit'] == "Submit")
{
$name = $_POST["user"];
$masukdatabase = "INSERT INTO `com`(`user`) Values('$ame')";
}
?>
<html>
<head>
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cant delete all rows");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="adduser.php">
<table id="dataTable" width="auto" style="margin:-4px 0 0 0;" cellspacing="0px">
<tr>
<td style="width:20px;"><INPUT type="checkbox" name="chk" /></td>
<td><select name="user" id="user">
<option value="tono">tono</option>
<option value="tini">tini</option>
</select></td>
</tr>
</table>
<INPUT type="button" value="Add row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete row" onclick="deleteRow('dataTable')" />
</form>
</body>
</html>
What you need to do to send more than 1 select with the same name is make it an array by adding [] and the end of its name name="user" becomes name="user[]". Then when you receive the variable via POST it will be an array
Using your example:
adduser.php
<?php
if($_SERVER['REQUEST_METHOD'] === 'POST')
{
foreach($_POST['user'] as $name)
{
$masukdatabase = "INSERT INTO `com`(`user`) Values('${name}')";
}
}
?>
index.html
<html>
<head>
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cant delete all rows");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="adduser.php">
<table id="dataTable" width="auto" style="margin:-4px 0 0 0;" cellspacing="0px">
<tr>
<td style="width:20px;"><INPUT type="checkbox" name="chk" /></td>
<td><select name="user[]" id="user">
<option value="tono">tono</option>
<option value="tini">tini</option>
</select></td>
</tr>
</table>
<INPUT type="button" value="Add row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete row" onclick="deleteRow('dataTable')" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Related
I have a form where
<form method="post" id="insert_form">
<div class="table-repsonsive">
<span id="error"></span>
<table class="css-serial" class="table table-bordered" id="item_table">
<thead>
<h5>Package Name:-<input type="text" name="packname" /><input type="hidden" id="packname" name="packname" value="<?php $packname;?>" /></h5>
<tr>
<th>sl.no</th>
<th>Service Type</th>
<th>Service Name</th>
<th>Sessions</th>
<th><button type="button" name="add" class="btn btn-success btn-xs add"><span class="glyphicon glyphicon-plus"></span>Add Services</button></th>
</tr>
</thead>
<tbody></tbody>
</table>
<div align="center">
<input type="submit" name="submit" class="btn btn-info" value="Save" />
</div>
</div>
</form>
with the script
$(document).ready(function(){
var count = 0;
$(document).on('click', '.add', function(){
count++;
var html = '';
html += '<tr>';
html += '<td> </td>';
html += '<input type="hidden" name="item_name[]" class="form-control item_name" />';
html += '<td><select name="item_category[]" class="form-control item_category" data-sub_category_id="'+count+'"><option value="">Select Service Type</option><?php echo fill_select_box($connect, "0"); ?></select></td>';
html += '<td><select name="item_sub_category[]" class="form-control item_sub_category" id="item_sub_category'+count+'"><option value="">Select Service Name</option></select></td>';
html +='<td><input type="text" name="nosessions[]" class="form-control nosessions" /></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-xs remove"><span class="glyphicon glyphicon-minus"></span></button></td>';
$('tbody').append(html);
});
$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});
$(document).on('change', '.item_category', function(){
var category_id = $(this).val();
var sub_category_id = $(this).data('sub_category_id');
$.ajax({
url:"fill_sub_category.php",
method:"POST",
data:{category_id:category_id},
success:function(data)
{
var html = '<option value="">Select Sub Category</option>';
html += data;
$('#item_sub_category'+sub_category_id).html(html);
}
})
});
$('#insert_form').on('submit', function(event) {
event.preventDefault();
var error = '';
$('.item_category').each(function() {
var count = 1;
if($(this).val() == '')
{
error += '<p>Select Item Category at '+count+' row</p>';
return false;
}
count = count + 1;
});
$('.item_sub_category').each(function(){
var count = 1;
if($(this).val() == '') {
error += '<p>Select Item Sub category '+count+' Row</p> ';
return false;
}
count = count + 1;
});
$('.nosessions').each(function(){
var count = 1;
if($(this).val() == '') {
error += '<p>Select no of sessions '+count+' Row</p> ';
return false;
}
count = count + 1;
});
var form_data = $(this).serialize();
if(error == '') {
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data) {
if(data == 'ok') {
$('#item_table').find('tr:gt(0)').remove();
$('#error').html('<div class="alert alert-success">Item Details Saved</div>');
}
}
});
} else {
$('#error').html('<div class="alert alert-danger">'+error+'</div>');
}
});
});
I need to get packname to the inser table insert.php please anybody help i dont understand ajax much . how to send the packname it is the overall name given to all other services so i need to pass packname in that array for every entry.Packname is single one for all these entries done and it should enter in each row inserted .
The FormData class provides a way to easily construct a set of key/value pairs representing form fields and their values.
After using it your script would look like:
<script>
$(document).ready(function(){
var count = 0;
$(document).on('click', '.add', function(){
count++;
var html = '';
html += '<tr>';
html += '<td> </td>';
html += '<input type="hidden" name="item_name[]" class="form-control item_name" />';
html += '<td><select name="item_category[]" class="form-control item_category" data-sub_category_id="'+count+'"><option value="">Select Service Type</option><?php echo fill_select_box($connect, "0"); ?></select></td>';
html += '<td><select name="item_sub_category[]" class="form-control item_sub_category" id="item_sub_category'+count+'"><option value="">Select Service Name</option></select></td>';
html +='<td><input type="text" name="nosessions[]" class="form-control nosessions" /></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-xs remove"><span class="glyphicon glyphicon-minus"></span></button></td>';
$('tbody').append(html);
});
$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});
$(document).on('change', '.item_category', function(){
var category_id = $(this).val();
var sub_category_id = $(this).data('sub_category_id');
$.ajax({
url:"fill_sub_category.php",
method:"POST",
data:{category_id:category_id},
success:function(data)
{
var html = '<option value="">Select Sub Category</option>';
html += data;
$('#item_sub_category'+sub_category_id).html(html);
}
})
});
$('#insert_form').on('submit', function(event){
event.preventDefault();
var error = '';
$('.item_category').each(function(){
var count = 1;
if($(this).val() == '')
{
error += '<p>Select Item Category at '+count+' row</p>';
return false;
}
count = count + 1;
});
$('.item_sub_category').each(function(){
var count = 1;
if($(this).val() == '')
{
error += '<p>Select Item Sub category '+count+' Row</p> ';
return false;
}
count = count + 1;
});
$('.nosessions').each(function(){
var count = 1;
if($(this).val() == '')
{
error += '<p>Select no of sessions '+count+' Row</p> ';
return false;
}
count = count + 1;
});
var form_data = new FormData($(this)[0]);
if(error == '')
{
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
if(data == 'ok')
{
$('#item_table').find('tr:gt(0)').remove();
$('#error').html('<div class="alert alert-success">Item Details Saved</div>');
}
}
});
}
else
{
$('#error').html('<div class="alert alert-danger">'+error+'</div>');
}
});
});
</script>
In addition, you may need to change:
<h5>Package Name:-<input type="text" name="packname" /><input type="hidden" id="packname" name="packname" value="<?php $packname;?>" /></h5>
Into:
<h5>Package Name:-<input type="text" name="packname" value="<?php $packname;?>" disabled="disabled" /></h5>
<input type="hidden" id="packname" name="packname" value="<?php $packname;?>" />
I want to send variable rows to post2.php with other HTML form variable using POST or GET methods.
The below code gives an error:
Notice: Undefined index: row1 in C:\xampp\htdocs\PhpProject1\OtherUsableItems\post2.php on line 8
post1.php
<html>
<head>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
</script>
<script>
function count(tableId){
var rows = document.getElementById(tableId).getElementsByTagName("TR").length;
// window.location.href = "http://localhost/PhpProject1/OtherUsableItem /post2.php?rows=" + rows ;
// alert('Your table has ' + rows + ' rows.');
$.post("post2.php", { 'row' : rows}, function(rows){alert('rows'+rows);});
}
</script>
</head>
<body>
<form action="post2.php" method="post">
<TABLE id="dataTable" border="1">
<TR>
<TD> 1 </TD>
<TD> <INPUT name="n1[]"type="text" /> </TD>
<TD> <INPUT name="n2[]"type="text" /> </TD>
<TD><SELECT name="country[]" type="select-one">
<OPTION value="in">India</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">France</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
</SELECT></TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable');"/>
<button id="bt" onclick="count('dataTable');">Submit</button>
</form>
</body>
</html>
post2.php
<?php
$n1 = $_POST['n1'];
$n2 = $_POST['n2'];
$country = $_POST['country'];
echo $n1[0];
echo $n2[0];
echo $country[0];
$count = $_POST['row1'];
echo $count;
?>
Try changing to 'row' instead of 'row1'
$n1 = $_POST['n1'];
$n2 = $_POST['n2'];
$country = $_POST['country'];
echo $n1[0];
echo $n2[0];
echo $country[0];
$count = $_POST['row'];
echo $count;
In the future, use print_r to see the value of $_POST.
In addition to the above instructions, I would remove the 2nd <script> tag from post1.php and place the following code into the body at the start of the form:
<form action="post2.php" method="post" >
<input id="rowNumber" type="hidden" name="row" value="1"/>
Also, add the following lines to function addRow:
var rowNumber = document.getElementById('rowNumber');
rowNumber.value = parseInt( rowNumber.value ) + 1;
The problem is that you are not sending the correct Post value.
check if this line :
var rows =
document.getElementById(tableId).getElementsByTagName("TR").length;
it returns values something like: {name:'value',name2:'value2'}
after that you will be able to access via php using $_POST['name']...
and this line :
$.post("post2.php", { 'row' : rows}, function(rows){alert('rows'+rows);});
replaced with:
$.post("post2.php", rows, function(rows){alert('rows'+rows);});
else you will be accessing with $_POST['row']
I'm trying to auto submit a form,(below it's only the form, its wrapped with a while{} for each DB entry to display).
It's working for all days of the week, but I can't submit the value for $totalhours, $holidayhours, $wagegross without a js event like onfocus().
Basically I want to submit this 3 inputs without an click or any other manual action.
any idea ?
<form id="weeklysheet" name="weeklysheet" method="post" action="hourly-function.php">
<tbody>
<tr style="line-height:0px;">
<td class="large">
<p class="employee_name"><?php echo $fullname?></p>
</td>
<td class="small">
<input name="mon" id="mon" type="text" class="days_input" value="<?php echo $data['mon'];?>"onchange="this.form.submit();"/>
</td>
<td class="small">
<input name="tue" id="tue" type="text" class="days_input" value="<?php echo $data['tue'];?>"onchange="this.form.submit();"/>
</td>
<td class="small">
<input name="wed" id="wed" type="text" class="days_input" value="<?php echo $data['wed'];?>"onchange="this.form.submit();"/>
</td>
<td class="small">
<input name="thu" id="thu" type="text" class="days_input" value="<?php echo $data['thu'];?>"onchange="this.form.submit();"/>
</td>
<td class="small">
<input name="fri" id="fri" type="text" class="days_input" value="<?php echo $data['fri'];?>"onchange="this.form.submit();"/>
</td>
<td class="small">
<input name="sat" id="sat" type="text" class="days_input" value="<?php echo $data['sat'];?>"onchange="this.form.submit();"/>
</td>
<td class="small">
<input name="sun" id="sun" type="text" class="days_input" value="<?php echo $data['sun'];?>"onchange="this.form.submit();"/>
</td >
<td class="small">
<input name="totalhours" id="totalhours" type="text" class="cumul_week_input" value="<?php echo $totalhours ?>"onfocus="this.form.submit();"/>
</td>
<td class="small">
<input name="holidayhours" type="text" class="cumul_week_input" value="<?php echo $holidayhours ?>"onfocus="this.form.submit();"/>
</td>
<td class="small">
<input name="wagegross" type="text" class="cumul_week_input" value="<?php echo $wagegross ?>"onfocus="this.form.submit();"/>
</td>
<td>
<input type="submit"name="save" id="save" value="Confirm" style="display:none;" />
</tr>
</tbody>
</form>
You could use jQuery to trigger the submit button's click action after the document has loaded like so:
1.) You can link the jQuery library from Google's Hosted Libraries:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
or, download it from jQuery.com to, say a "js" folder, and include it
<script src="js/jQuery.js"></script>
2.) Place this script tag at below the </form> tag:
<script type="text/javascript">
$(document).ready(function(){ //When the document is done loading
$("input#save").trigger('click'); //"Click" on the input button with an ID of "save"
});
</script>
Or you could do it the pure javascript way without jQuery like so:
<html>
<body onLoad="submitform()">
<form id="weeklysheet" name="weeklysheet" method="post" action="hourly-function.php">
Then place this script tag below the </form> tag:
<script type="text/javascript">
function submitform()
{
document.weeklysheet.submit();
}
</script>
Or, to shorten the method above:
<html>
<body onLoad="Javascript: document.weeklysheet.submit();">
<form id="weeklysheet" name="weeklysheet" method="post" action="hourly-function.php">
Are you looking to submit them individually or all at once? If you want to do it all at once you could give the last element an id and in jquery use $('#div').moueleave
that's the js I'm using, I've try submitting with a timeout and it's working.
at the end my issue is not there, it appear that when I'm submit the form, the 3 php variables push the value of the previous input entry.
I don't know if I'm clear with my explanation...
<script type="text/javascript">
function submitform()
{
//document.getElementById("weeklysheet");
var form = document.getElementById("weeklysheet")
form.submit();
}
function submit()
{
if (document.getElementById("weeklysheet")) {
setTimeout("submitform()", 5000); // set timout
}
return false;
}
</script>
(sorry if it's a long explanation)
I'm coming back with my solution... in case that can help anyone.
so the idea it's to have a table that display a list of employees where you can input the days worked, holidays, sick. Then do the sum of each and calculate the gross depending on a wages frequency (i.e: Weekly, 4 Weekly or Monthly).
Because the user won't complete the all form at once, I needed to make the submission automatic for all inputs at all the time of the current week.
this is the JS:
<script type="text/javascript">
function grab<?=$empnum?>(){
// Monday
var mon<?=$empnum?> = document.getElementById('mon<?=$empnum?>').value;
if ((mon<?=$empnum?> == "h" || mon<?=$empnum?> == "H")){
var Hmon<?=$empnum?> = 1;
var Wmon<?=$empnum?> = 0;
var Smon<?=$empnum?> = 0;
}
else if((mon<?=$empnum?> == "w" || mon<?=$empnum?> == "W")){
var Wmon<?=$empnum?> = 1;
var Hmon<?=$empnum?> = 0;
var Smon<?=$empnum?> = 0;
}
else if((mon<?=$empnum?> == "s" || mon<?=$empnum?> == "S")){
var Smon<?=$empnum?> = 1;
var Hmon<?=$empnum?> = 0;
var Wmon<?=$empnum?> = 0;
}
else{
var Smon<?=$empnum?> = 0;
var Hmon<?=$empnum?> = 0;
var Wmon<?=$empnum?> = 0;
var Xmon<?=$empnum?> = 0;
}
// Tuesday
var tue<?=$empnum?> = document.getElementById('tue<?=$empnum?>').value;
if ((tue<?=$empnum?> == "h" || tue<?=$empnum?> == "H")){
var Htue<?=$empnum?> = 1;
var Wtue<?=$empnum?> = 0;
var Stue<?=$empnum?> = 0;
}
else if((tue<?=$empnum?> == "w" || tue<?=$empnum?> == "W")){
var Wtue<?=$empnum?> = 1;
var Htue<?=$empnum?> = 0;
var Stue<?=$empnum?> = 0;
}
else if((tue<?=$empnum?> == "s" || tue<?=$empnum?> == "S")){
var Stue<?=$empnum?> = 1;
var Htue<?=$empnum?> = 0;
var Wtue<?=$empnum?> = 0;
}
else{
var Stue<?=$empnum?> = 0;
var Htue<?=$empnum?> = 0;
var Wtue<?=$empnum?> = 0;
}
// Wednesday
var wed<?=$empnum?> = document.getElementById('wed<?=$empnum?>').value;
if ((wed<?=$empnum?> == "h" || wed<?=$empnum?> == "H")){
var Hwed<?=$empnum?> = 1;
var Wwed<?=$empnum?> = 0;
var Swed<?=$empnum?> = 0;
}
else if((wed<?=$empnum?> == "w" || wed<?=$empnum?> == "W")){
var Wwed<?=$empnum?> = 1;
var Hwed<?=$empnum?> = 0;
var Swed<?=$empnum?> = 0;
}
else if((wed<?=$empnum?> == "s" || wed<?=$empnum?> == "S")){
var Swed<?=$empnum?> = 1;
var Hwed<?=$empnum?> = 0;
var Wwed<?=$empnum?> = 0;
}
else{
var Swed<?=$empnum?> = 0;
var Hwed<?=$empnum?> = 0;
var Wwed<?=$empnum?> = 0;
}
// Thurday
var thu<?=$empnum?> = document.getElementById('thu<?=$empnum?>').value;
if ((thu<?=$empnum?> == "h" || thu<?=$empnum?> == "H")){
var Hthu<?=$empnum?> = 1;
var Wthu<?=$empnum?> = 0;
var Sthu<?=$empnum?> = 0;
}
else if((thu<?=$empnum?> == "w" || thu<?=$empnum?> == "W")){
var Wthu<?=$empnum?> = 1;
var Hthu<?=$empnum?> = 0;
var Sthu<?=$empnum?> = 0;
}
else if((thu<?=$empnum?> == "s" || thu<?=$empnum?> == "S")){
var Sthu<?=$empnum?> = 1;
var Hthu<?=$empnum?> = 0;
var Wthu<?=$empnum?> = 0;
}
else{
var Sthu<?=$empnum?> = 0;
var Hthu<?=$empnum?> = 0;
var Wthu<?=$empnum?> = 0;
}
// Friday
var fri<?=$empnum?> = document.getElementById('fri<?=$empnum?>').value;
if ((fri<?=$empnum?> == "h" || fri<?=$empnum?> == "H")){
var Hfri<?=$empnum?> = 1;
var Wfri<?=$empnum?> = 0;
var Sfri<?=$empnum?> = 0;
}
else if((fri<?=$empnum?> == "w" || fri<?=$empnum?> == "W")){
var Wfri<?=$empnum?> = 1;
var Hfri<?=$empnum?> = 0;
var Sfri<?=$empnum?> = 0;
}
else if((fri<?=$empnum?> == "s" || fri<?=$empnum?> == "S")){
var Sfri<?=$empnum?> = 1;
var Hfri<?=$empnum?> = 0;
var Wfri<?=$empnum?> = 0;
}
else{
var Sfri<?=$empnum?> = 0;
var Hfri<?=$empnum?> = 0;
var Wfri<?=$empnum?> = 0;
}
// Saturday
var sat<?=$empnum?> = document.getElementById('sat<?=$empnum?>').value;
if ((sat<?=$empnum?> == "h" || sat<?=$empnum?> == "H")){
var Hsat<?=$empnum?> = 1;
var Wsat<?=$empnum?> = 0;
var Ssat<?=$empnum?> = 0;
}
else if((sat<?=$empnum?> == "w" || sat<?=$empnum?> == "W")){
var Wsat<?=$empnum?> = 1;
var Hsat<?=$empnum?> = 0;
var Ssat<?=$empnum?> = 0;
}
else if((sat<?=$empnum?> == "s" || sat<?=$empnum?> == "S")){
var Ssat<?=$empnum?> = 1;
var Hsat<?=$empnum?> = 0;
var Wsat<?=$empnum?> = 0;
}
else{
var Ssat<?=$empnum?> = 0;
var Hsat<?=$empnum?> = 0;
var Wsat<?=$empnum?> = 0;
}
// Sunday
var sun<?=$empnum?> = document.getElementById('sun<?=$empnum?>').value;
if ((sun<?=$empnum?> == "h" || sun<?=$empnum?> == "H")){
var Hsun<?=$empnum?> = 1;
var Wsun<?=$empnum?> = 0;
var Ssun<?=$empnum?> = 0;
}
else if((sun<?=$empnum?> == "w" || sun<?=$empnum?> == "W")){
var Wsun<?=$empnum?> = 1;
var Hsun<?=$empnum?> = 0;
var Ssun<?=$empnum?> = 0;
}
else if((sun<?=$empnum?> == "s" || sun<?=$empnum?> == "S")){
var Ssun<?=$empnum?> = 1;
var Hsun<?=$empnum?> = 0;
var Wsun<?=$empnum?> = 0;
}
else{
var Ssun<?=$empnum?> = 0;
var Hsun<?=$empnum?> = 0;
var Wsun<?=$empnum?> = 0;
}
var W<?=$empnum?> = Wmon<?=$empnum?>*1+Wtue<?=$empnum?>*1+Wwed<?=$empnum?>*1+Wthu<?=$empnum?>*1+Wfri<?=$empnum?>*1+Wsat<?=$empnum?>*1+Wsun<?=$empnum?>*1;
var H<?=$empnum?> = Hmon<?=$empnum?>*1+Htue<?=$empnum?>*1+Hwed<?=$empnum?>*1+Hthu<?=$empnum?>*1+Hfri<?=$empnum?>*1+Hsat<?=$empnum?>*1+Hsun<?=$empnum?>*1;
var S<?=$empnum?> = Smon<?=$empnum?>*1+Stue<?=$empnum?>*1+Swed<?=$empnum?>*1+Sthu<?=$empnum?>*1+Sfri<?=$empnum?>*1+Ssat<?=$empnum?>*1+Ssun<?=$empnum?>*1;
var totals<?=$empnum?> = document.getElementById('totalhrs<?=$empnum?>').value = W<?=$empnum?>;
var holiday<?=$empnum?> = document.getElementById('holihrs<?=$empnum?>').value = H<?=$empnum?>;
var sick<?=$empnum?> = document.getElementById('sickdays<?=$empnum?>').value = S<?=$empnum?>;
var wage<?=$empnum?> = document.getElementById('wagefreq<?=$empnum?>').value;
if(wage<?=$empnum?> == 'Weekly'){
document.getElementById('gross<?=$empnum?>').value = <?=$empsalarywage?>;
}
else if(wage<?=$empnum?> == '4 Weekly'){
document.getElementById('gross<?=$empnum?>').value = (<?=$empsalarywage?> / 4);
}
else if(wage<?=$empnum?> == 'Monthly'){
document.getElementById('gross<?=$empnum?>').value = ((<?=$empsalarywage?> * 12) / 52);
}
document.getElementById('weeklysheet<?=$empnum?>').submit('save<?=$empnum?>');
}
</script>
this the form:
<form id="weeklysheet<?=$empnum?>" name="weeklysheet" method="post" action="salary-function.php" >
<tbody>
<tr style="line-height:0px;">
<td class="large">
<p class="employee_name"><?=$fullname?></p>
</td>
<td class="small">
<input name="mon" id="mon<?=$empnum?>" type="text" class="days_input" maxlength="1" value="<?php echo $mon?>"onchange="grab<?=$empnum?>()"/>
</td>
<td class="small">
<input name="tue" id="tue<?=$empnum?>" type="text" class="days_input" maxlength="1" value="<?php echo $tue?>"onchange="grab<?=$empnum?>()"/>
</td>
<td class="small">
<input name="wed" id="wed<?=$empnum?>" type="text" class="days_input" maxlength="1" value="<?php echo $wed?>"onchange="grab<?=$empnum?>()"/>
</td>
<td class="small">
<input name="thu" id="thu<?=$empnum?>" type="text" class="days_input" maxlength="1" value="<?php echo $thu?>"onchange="grab<?=$empnum?>()"/>
</td>
<td class="small">
<input name="fri" id="fri<?=$empnum?>" type="text" class="days_input" maxlength="1" value="<?php echo $fri?>"onchange="grab<?=$empnum?>()"/>
</td>
<td class="small">
<input name="sat" id="sat<?=$empnum?>" type="text" class="days_input" maxlength="1" value="<?php echo $sat?>"onchange="grab<?=$empnum?>()"/>
</td>
<td class="small">
<input name="sun" id="sun<?=$empnum?>" type="text" class="days_input" maxlength="1" value="<?php echo $sun?>"onchange="grab<?=$empnum?>()"/>
</td >
<td class="small">
<input name="totalhrs" id="totalhrs<?=$empnum?>" type="text" class="cumul_week_input" readonly value="<?php echo $totalhrs?>"/>
</td>
<td class="small">
<input name="holihrs" id="holihrs<?=$empnum?>" type="text" class="cumul_week_input" readonly value="<?php echo $holihrs?>"/>
</td>
<td class="small">
<input name="sickdays" id="sickdays<?=$empnum?>" type="text" class="cumul_week_input" readonly value="<?php echo $sickdays?>"/>
</td>
<td class="small">
<input name="gross" id="gross<?=$empnum?>" type="text" class="cumul_week_input" readonly value="<?php echo $gross?>"/>
</td>
<td>
<input type="submit"name="save" id="save<?=$empnum?>" value="Confirm" style="display:none"/>
<input type="hidden"name="enddate" value="<?php echo $data['currentWeekStart']; ?>"/>
<input type="hidden"name="wagefreq"id="wagefreq<?=$empnum?>" value="<?=$wagefreq?>"/>
</td>
</tr>
</tbody>
</form>
that's something that worked like I want, but if anyone see anything that could be done in a better way, I would really apreciate any corrections...
thank's
i am creating a page where user can add or delete rows that are by click on addrow and delrow button it' working fine. now the problem is that i want store the value of dynamically generated fields using post method.`here is code..
function addRow(tableID) {
var table = document.getElementById(tableID);
//var cargo_id = new Array();
//var quantity_id = new Array();
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//var i = <?php// echo $index; ?>;
//var name = "cargo_quantity" + i;
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount++;
var nameCount = rowCount-1;
//quantity cell
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "cargo_quantity"+nameCount;
element3.id = "cargo_quantity"+nameCount;
//element3.setAttribute("value","");
//element3.value = "<?//=(isset($row->cargo_quantity))?$row->cargo_quantity:''?>"
cell3.appendChild(element3);
//cargo type cell
var cell4 = row.insertCell(3);
var element4 = document.createElement("select");//name="cargo_type_id" id="cargo_type_id" field="List Cargo Type" class="border" style="width:150px;" >
//name = "cargo_id" + i;
element4.name = "cargo_id" + nameCount;
element4.id = "cargo_id" + nameCount;
element4.field = "List Cargo Type";
element4.className = "border";
//first option
//create an option
theOption=document.createElement("OPTION");
//make some text
theText=document.createTextNode("Cargo Type");
//add the text to the option
theOption.appendChild(theText);
//add the option to the select
element4.appendChild(theOption);
theOption.setAttribute("selected","selected");
<?php
$pquery_pCargoType = "SELECT * FROM ".DB_PRE."tbl_cargo_type WHERE status='1' ";
$errNo_pCargoType = $con->DML_executeQry($pquery_pCargoType);
while($row_pCargoType = mysql_fetch_object($errNo_pCargoType)){
?>
<option <?php if(isset($row->cargo_type_id) && $row->cargo_type_id==$row_pCargoType->cargo_type_id){?> selected="selected"<?php }?> value=""></option>
//create an option
theOption=document.createElement("OPTION");
//make some text
theText=document.createTextNode("<?php echo $row_pCargoType->name;?>");
//add the text to the option
theOption.appendChild(theText);
//add the option to the select
element4.appendChild(theOption);
<?php if(isset($row->cargo_type_id) && $row->cargo_type_id==$row_pCargoType->cargo_type_id){?>
theOption.setAttribute("selected","selected");
<?php }?>
theOption.setAttribute("value","<?php echo $row_pCargoType->cargo_type_id;?>");<?php } ?>
//weight cell
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
//name = "cargo_weight" + i;
element5.name = "cargo_weight" + nameCount;
element5.id = "cargo_weight" + nameCount;
cell5.appendChild(element5);
//Volume cell
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
//name = + i;
element6.name = "cargo_volume" + nameCount;
element6.id = "cargo_volume" + nameCount;
cell6.appendChild(element6);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
`
<form method ="post">
<table id ="dataTable" border="1">
<tr>
<td>Select </td>
<td>Sr.No.</td>
<td>Quantity</td>
<td>Type</td>
<td>Weight (KG per container)</td>
<td>Volume (cbm)</td>
</tr>
<tr>
<td><input type="checkbox" name = "chk"</td>
<td>1</td>
<td><input type="text" field="Cargo Quantity" name="cargo_quantity1" id="cargo_quantity1" value="<?=(isset($row->cargo_quantity))?$row->cargo_quantity:''?>" style="width:150px;" class="border" /></td>
<td><select name="cargo_type_id" id="cargo_type_id" field="List Cargo Type" class="border" style="width:150px;" >
<option selected="selected" value="">Cargo Type</option>
<?php
$pquery_pCargoType = "SELECT * FROM ".DB_PRE."tbl_cargo_type WHERE status='1' ";
$errNo_pCargoType = $con->DML_executeQry($pquery_pCargoType);
while($row_pCargoType = mysql_fetch_object($errNo_pCargoType)){
?>
<option <?php if(isset($row->cargo_type_id) && $row->cargo_type_id==$row_pCargoType->cargo_type_id){?> selected="selected"<?php }?> value="<?php echo $row_pCargoType->cargo_type_id;?>"><?php echo $row_pCargoType->name;?></option>
<?php }?>
</select></td>
<td><input type="text" field="Cargo Weight" name="cargo_weight1" id="cargo_weight1" value="<?=(isset($row->cargo_weight))?$row->cargo_weight:''?>" style="width:150px;" class="border" /></td>
<td><input type="text" field="Cargo Volume" name="cargo_volume1" id="cargo_volume1" value="<?=(isset($row->cargo_volume))?$row->cargo_volume:''?>" style="width:150px;" class="border" /></td>
</tr>
</table>
</form>
You can store value in json in respect of your fieldName and you can again bring back value to ypur field by iterating to the json
I used below script to add dynamic rows in a form.
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk[]"/></TD>
<TD><INPUT type="text" name="txt[]"/></TD>
<TD>
<SELECT name="country[]">
<OPTION value="in">India</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">France</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
</SELECT>
</TD>
<TD><INPUT type="text" name="passport[]"/></TD>
</TR>
</TABLE>
with the use of the following php:
$chkbox = $_POST['chk'];
$txtbox = $_POST['txt'];
$country = $_POST['country'];
$passport= $_POST['passport'];
foreach($txtbox as $a => $b)
echo "$chkbox[$a] - $txtbox[$a] - $country[$a] - $passport[$a]";
That works fine, got it showing on my screen. Then I wanted to integrate it all in my extensive form, which I need to be sent off to my mail address... see my php example below (all the $_POST's there are additional). What would the 'foreach' code be to be able to send all the information from above mentioned dynamic rows to my mail address? And what would I have to add to my $message to get it visible? Thanks for your help.
$TripType = $_POST['TripType'];
$DepartureDay = $_POST['DepartureDay'];
$DepartureMonth = $_POST['DepartureMonth'];
$DepartureYear = $_POST['DepartureYear'];
$ReturnDay = $_POST['ReturnDay'];
$ReturnMonth = $_POST['ReturnMonth'];
$ReturnYear = $_POST['ReturnYear'];
$Adults = $_POST['Adults'];
$Children411 = $_POST['Children411'];
$Children03 = $_POST['Children03'];
foreach ($_POST['Check'] as $value) {$check_msg .= $value\n";}
$Comments = $_POST['Comments'];
$mail = $_POST['mail'];
$telephone = $_POST['telephone'];
$message = "Booking\n\nTripType: $TripType\n\nDepartureDay: $DepartureDay\nDepartureMonth: $DepartureMonth\nDepartureYear: $DepartureYear\n\nReturnDay: $ReturnDay\nReturnMonth: $ReturnMonth\nReturnYear: $ReturnYear\n\nAdults: $Adults\nChildren411: $Children411\nChildren03: $Children03\n $check_msg\nComments: $Comments\nmail: $mail\ntelephone: $telephone";
$xHeaders = "From: $mail\nX-Mailer: PHP/" . phpversion();
mail ("mymail#gmail.com", internet booking", $message, $xHeaders);
This should do what you want. Your HTML doesn't include a FORM or INPUT/submit so I'm guessing that they are there and working.
foreach($_POST['chk'] as $num => $value) {
$check_msg .= "$num = $value \n";
}
try:
$message = '';
foreach ($_POST as $k => $v) {
$message .= $k.': '.$v.'\n';
}