I want to dynamically generate a row of text boxes in a table when clicking a button.For example i have a table to enter the list items.When i click add button, a new row is inserted into the table.Can you please help me.I am working on php and codeigniter..
The foolowing is the script which I have used for generating the row.
<SCRIPT language="javascript">
function changeIt()
{
var i = 1;
my_div.innerHTML = my_div.innerHTML +"<br><input type='text' name='mytext'+ i>"
i++;
}
</SCRIPT>
<table align="center" name="table">
<tr>
<td>Code</td>
<td>Name</td>
<td>Quantity</td>
<td>Price</td>
<INPUT type="button" value="Add" onclick="changeIt()"/>
</tr>
</table>
<div id="my_div">
<table>
<tr>
<td></td>
</tr>
</table>
This only generates one text box at a time. I need to display more that one text box in a row?
Try this (New Code)
<SCRIPT language="javascript">
var i = 1;
function changeIt()
{
var my_div = document.getElementById("my_div");
var row = "<tr> <td> <input type='text' name='mycode_"+i+"'></td><td><input type='text' name='myname_"+i+"'></td><td><input type='text' name='myquantity_"+i+"'></td> <td><input type='text' name='myprice_"+i+"'></td> </tr>";
my_div.innerHTML = my_div.innerHTML +row;
i++;
}
</SCRIPT>
<table align="center" name="table" id="my_div" border="2">
<tr>
<td>Code</td>
<td>Name</td>
<td>Quantity</td>
<td>Price</td>
<INPUT type="button" value="Add" onclick="changeIt()"/>
</tr>
</table>
You can try jQuery append method or row javascript -> HTML DOM appendChild() Method
Related
I have to add values of inputs in each row in corresponding textbox (under the heading total) using jquery. I used jQuery as below. class 'value' used for inputs to be typed and class 'values' used for the values displayed (1st two colums).
jQuery code is given below:
jQuery(document).ready(function($) {
var $total = $('#total_mark_<?php echo $student['student_code'];?>'),
$value = $('.value');
$values = $('.values');
$value.on('input', function(e) {
var total = 0;
var t=0;
$value.each(function(index, elem) {
if(!Number.isNaN(parseFloat(this.value, 10)))
total = total + parseFloat(this.value, 10);
});
$values.each(function(index, elem) {
t = t + parseFloat(this.value, 10);
});
total=total+t;
$total.val(Math.round(total));
});
});
When I use this code, I am getting an output only in the last textbox(total-textbox in last row only), where all the values (all input fields)summed up and total is showing in a textbox only.
How to add values of inputs in each row in corresponding textbox using jQuery to show output in corresponding "total"textbox?
I created one demo here, from this demo you can check how to traverse throw DOM element and how to get values from it.
$( document ).ready(function() {
// Traverse throw all rows
$('.student_marks tbody tr').each(function(){
// Get current row
var student = $(this);
var total_points = 0;
$(student).find('.marks').each(function(){
total_points+=parseInt($(this).val());
})
$(student).find('.total').html(total_points);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<table class="table student_marks" >
<thead>
<tr>
<th>Student Name</th>
<th>Math</th>
<th>History</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">John</td>
<td><input value="50" readonly class="marks"/></td>
<td><input value="50" readonly class="marks"/></td>
<td class="total"></td>
</tr>
<tr>
<td class="name">Mac</td>
<td><input value="60" readonly class="marks"/></td>
<td><input value="50" readonly class="marks"/></td>
<td class="total"></td>
</tr>
<tr>
<td class="name">Sena</td>
<td><input value="40" readonly class="marks"/></td>
<td><input value="70" readonly class="marks"/></td>
<td class="total"></td>
</tr>
<tr>
<td class="name">Devy</td>
<td><input value="80" readonly class="marks"/></td>
<td><input value="90" readonly class="marks"/></td>
<td class="total"></td>
</tr>
</tbody>
</table>
</div>
In my project it has an interface(designation.php) which has a form. When a user enters a 'designation code'(which is a primary key) and click the 'update' button, the
remaining fields should be filled accordingly. I understand that Ajax will be needed for this.
but the problem is, i'm done with retrieving the result only as a single row from the database by using following query. but, this is not my objective.
while($row = mysqli_fetch_assoc($run1)) {
echo "<tr id='tr'>";
foreach($row AS $cell) echo "<td>$cell</td>";
echo "</tr>\n";
}
Following is the 'designation.php'..
<form action="crud.php" method="post">
<table>
<th >DESIGNATION</th>
<tr>
<td >Designation Code</td>
<td ><input type="text" name="des_code" /></td>
</tr>
<tr>
<td >Designation</td>
<td><input type="text" name="desig" /></td>
</tr>
<tr>
<td >Salary Code</td>
<td><input type="text" name="s_code" /></td>
</tr>
<tr>
<td >Salary Scale</td>
<td><input type="text" name="s_scale" /></td>
</tr>
<tr>
<td >Salary point </td>
<td><input type="text" name="s_point" /></td>
</tr>
<tr>
<td>Date</td>
<td > <input type="date" name="date" /></td>
</tr>
<tr>
<td><input type="submit" name="update" value="Update" /></td>
</tr>
</table>
I attempted many solutions but have not gotten the intended result. Any help is appreciated.
$(document).ready(function(){
("#form1").submit(function({
var id=<?php echo $_POST['des_code']; ?>;
$.ajax({
url: 'update.php',
type:'POST',
data: {id:id},
success : function (data)
{
var a=data.split('[BRK]');
$("#s_scale").val(a[0]);
// like wise store all your fields..
}
})
})
upadte.php will contain
$id=$_POST['id']; //designation id from jqyery
$q=mysqli_query("your goes here..");
while($row = mysqli_fetch_array($q))
{
$cell=$row[0];
$cell.="[BRK]".$row[1];
$cell.="[BRK]".$row[2];
}
echo $cell;
give id to your text field so from jquery you can add value directly.. and give form id also so you can fire onsubmit event...
i didn't try this code but hope it will work fine...
To transfer more than one value use json!
Jquery Code::
$(function(){
id="XXXX";
$("form").on("submit",function(e){
e.preventDefault();
$.getJson("update.php",{"id":id},function(response){
$("#value1").val(response.value1);
$("#value2").val(response.value2);
// like wise store all your fields..
})
})
})
Update.php::
$q=mysqli_query("your query");
$row = mysqli_fetch_array($q);
echo json_encode($row);
$row will be an array containing value1, value2 and so on!!
I have a php code that generates table rows:
<table id="listOfProducts" name="listOfProducts" width="100%">
<tr>
<th>Item</th>
<th>Product</th>
<th>Description</th>
<th>Unit Price</th>
<th>Select</th>
<th>Qty</th>
<th>Amount</th>
</tr>
Products on List: 2
<tr class="row1" id="tr1">
<td id="pid1">1</td>
<td id="pname1">Paint Brush</td>
<td id="pdesc1">Premium Brand </td>
<td id="pprice1">24</td>
<td><input type="checkbox" id="chk1" checked></td>
<td><input type="text" style="width:50px;" onkeyup="getall('tr1','ttp1')" id="1"/></td>
<td><input type="text" id="ttp1" name="ttp1" value="00"/></td>
</tr>
<tr class="row1" id="tr2">
<td id="pid2">2</td>
<td id="pname2">Iron Nails</td>
<td id="pdesc2">Stainless</td>
<td id="pprice2">50</td>
<td><input type="checkbox" id="chk2" checked></td>
<td><input type="text" style="width:50px;" onkeyup="getall('tr2','ttp2')" id="2"/></td>
<td><input type="text" id="ttp2" name="ttp2" value="00"/></td>
</tr>
</table>
This successfully loads the values in the table and calls a javascript getall once the onkeyup function is called.
Here is the javascript code
function getall( strId, prdno){
var tmpObj = document.getElementById(strId);
var myobj = $("#listOfProducts").find("tr#" + strId);
alert("reported id for testing: " + tmpObj.getAttribute("id"));
//alert (prdno);
var prdid= myobj.find('td:eq(0)').text();
var prdname= myobj.find('td:eq(1)').text();
var prddesc= myobj.find('td:eq(2)').text();
var prduprice = parseFloat(myobj.find('td:eq(3)').text());
var quan = myobj.find('td:eq(5) input').val();
var ans=prduprice * quan;
document.getElementById(prdno).value=ans;
}
I don't know what's the real issue. I checked if the id of the containing textbox is successfully passed and it is...
You could try using jquery to update it: $('#'+prdno).val(ans);
i just copy and pasted your code and added the jquery include (v1.7.2) at the top and it totally works in Opera, FF and Chrome
I wanted to put a checkbox autosum on my website so that anyone who check a box and submit, the values (Points) of those check box are automatically added to my total sum (on home page actually)
I have found this code so far for java script.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td> <input name="sum_m_1" value="25" type="checkbox" id="sum_m_1" onclick="UpdateCost()"> </td>
<td> ResponseOption_1 </td>
</tr>
<tr>
<td> <input name="sum_m_2" value="15" type="checkbox" id="sum_m_2" onclick="UpdateCost()"> </td>
<td> ResponseOption_2 </td>
</tr>
</table>
<input type="text" id="totalcost" value="">
With JAVASCRIPT:
<script type="text/javascript">
function UpdateCost() {
var sum = 0;
var gn, elem;
for (i=1; i<3; i++) {
gn = 'sum_m_'+i;
elem = document.getElementById(gn);
if (elem.checked == true) { sum += Number(elem.value); }
}
document.getElementById('totalcost' ).value = sum.toFixed(2);
}
window.onload=UpdateCost
</script>
This will add up the values but i wanted to add by checking check boxes --> Submit --> collect the data --> add to my main total.
Any helps would be much appreciated.
Simple changes:
Add a button "calculate cost".
Removed the onclick events from the checkboxes and added the onclick event to the button instead.
Note that "window.onload=UpdateCost" is still there because what you want ideally is for the total cost to be displayed properly as 0.00 when the page loads.
HTML
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td> <input name="sum_m_1" value="25" type="checkbox" id="sum_m_1"> </td>
<td> ResponseOption_1 </td>
</tr>
<tr>
<td> <input name="sum_m_2" value="15" type="checkbox" id="sum_m_2"> </td>
<td> ResponseOption_2 </td>
</tr>
</table>
<input type="text" id="totalcost" value="">
<input type="button" value="update cost" onclick="UpdateCost();">
JavaScript
<script type="text/javascript">
function UpdateCost() {
var sum = 0;
var gn, elem;
for (i=1; i<3; i++) {
gn = 'sum_m_'+i;
elem = document.getElementById(gn);
if (elem. checked == true) { sum += Number(elem. value); }
}
document.getElementById('totalcost' ).value = sum.toFixed(2);
}
window.onload=UpdateCost
</script>
Hope that's the kind of thing you wanted, let me me know what you think.
Suppose, a,b,c results are dynamically generated from database via echoing $scname variable and showtablesc is trigered on onclick. But except first time clicked, send button on the form is always seems pre clicked when I click on any a,b ,c results.
My Php code is here:
echo "<a href='#$name' style='margin-left: 30px' onclick=showtablesc();>$scname</a><br>";
html goes here..
<table id="jobs" style="display:none" bgcolor="#0099FF" align="center"
<tr ><td> j tittle</td><td><input type="text" name="tittle" /></td></tr>
<tr ><td><input type='button' value='send' id="send" /></td> </tr>
</table>
jquery function goes here
function showtablesc(){
$('#jobs').show('fast');
$('#send').click(function(){
$('#send').replaceWith("<em>sending...</em>");
});
}
It seems your tr has the class "jobs" and your button does. Meaning that JQuery will perform click on both and your tr is first in line to handle it.
Change your HTML block to this
<table id="jobs_table" style="display:none" bgcolor="#0099FF" align="center">
<tr class="jobs" >
<td> j tittle</td>
<td><input type="text" name="tittle" /></td>
</tr>
<tr >
<td><input type='button' value='send' class="jobs_button"/></td>
</tr>
</table>
And your Jquery to
function showtablesc(){
$('.jobs_button').removeAttr("id");
$('.jobs_button').attr('id', 'send');
$('#jobs_table').show('fast');
$('#send').click(function(){
$('#send').replaceWith("<em>sending...</em>");
});
}
echo "$scname<br />";
$(document).ready(function(){
$('a.my-link').click(function(){
$('#jobs').show('fast').find('em').replaceWith('<input type="button" value="Send" class="jobs" />');
});
$('#jobs').on('click','input.jobs',function(){
$(this).replaceWith("<em>sending...</em>");
});
});