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
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>
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
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!!
In this code javascript function is taking from[1] as argument in displayDatePicker('from[1]', false, 'dmy', '-'). When I clone this (second) row using jquery, all my input and select names get incremented but javascript function is still taking from[1] as argument. I want to ask how to change this from[1] to from[2] and so on
<tr>
<td width="19%" align="right" ><input type="text" id="roomcat" name="roomcat[1]" value="Deluxe" /></td>
<td width="1%" align="center" > </td>
<td width="15%" align="left" ><select class="f" name="roomtype[1]" id="roomtype">
<option value="">Please Select</option>
<option value="Single">Single</option>
<option value="Double">Double</option>
<option value="Triple">Triple</option>
<option value="Extra">Extra</option>
</select></td>
<td width="7%" align="left" ><input type="text" id="cfit" name="cfit[1]" /></td>
<td width="8%" align="left" ><input type="text" id="cgit" name="cgit[1]" /></td>
<td width="7%" align="center" ><input type="text" id="rfit" name="rfit[1]" /></td>
<td width="8%" align="center" ><input type="text" id="rgit" name="rgit[1]" /></td>
<td width="10%" align="center" >
<input class="f" style="width:70px" type="text" size="12" name="from[1]" id="from" value="<?php if($mode==1)
{
echo $from;
}
else
{
echo "From";
}?>" readonly="readonly" />
<i.m.g alt="Pick a date" src="js/date.g.i.f" border="0" width="17" height="16" />
</td>
<td width="10%" align="center" >
<input style="width:70px" class="f" type="text" size="12" name="to[1]" id="to" value="<?php if($mode==1)
{
echo $to;
}
else
{
echo "To";
}?>" readonly="readonly" />
<i.m.g alt="Pick a date" src="js/date.g.i.f" border="0" width="17" height="16" />
</td>
<td width="15%" align="left" > </td>
</tr>
Jquery Code is
$(document).ready(function() {
$("#addrow").click(function() {
var row = $('#table2 tbody>tr:last').clone(true);
row.find("input:text").each(function(){
this.name = this.name.replace(/\[(\d+)\]$/, function(str,p1){
return '[' + (parseInt(p1,10)+1) + ']';
});
})
row.find("select").each(function(){
this.name = this.name.replace(/\[(\d+)\]$/, function(str,p1){
return '[' + (parseInt(p1,10)+1) + ']';
});
})
row.insertAfter('#table2 tbody>tr:last');
return false;
});
});
Drop the id attributes in your <input>s, you don't need them and having duplicate ids just leaves you with invalid HTML and strange problems. If you're using them for styling, use classes instead. If you need them for something else, then you'll have to fix them when you copy so that you don't end up with duplicate ids.
Now we can clean up your cloning a little bit. When you're cloning your row, you don't need to parse the number in brackets, you can just ask the table how many rows it has and add one to get the new number:
var n = $('#table2 tbody>tr').length + 1;
then your replace calls simplify to this:
this.name.replace(/\[(\d+)\]$/, '[' + n + ']');
Also, you can use a multiple-selector to iterate through the <input>s and the <select>s at the same time:
row.find('input:text, select').each(...)
You're changing the same attribute in both cases so there's no need for two identical loops.
Using javascript:displayDatePicker(...) in your <a> isn't necessary. You can use jQuery to bind to clicks on those <a>s by adding a class to them:
<a class="datepicker">...</a>
and then binding a callback to them using click and a closest/find combination inside the callback will let you find the corresponding <input>:
$('a.datepicker').click(function() {
var $input = $(this).closest('td').find('input[type=text]');
displayDatePicker($input.attr('name'), false, 'dmy', '-'));
});
You're using clone so the event handlers on the cloned elements will be copied so you don't have to mess around with delegate or the dynamic versions of on.
Here's a demo with simplified HTML: http://jsfiddle.net/ambiguous/yEaw6/
From what I have understood from the first paragraph in your question..
Will this help?
var cells = $('td'); //Select row/cells here
$.each(cells, function(index, cell){
//index corresponds to index of current cell in set of matched cells
});
Hi
I have an evaluation form with more than 300 fields, where there are several parts. i don't want to make 300 rows in mytable.Can someone give me a method how to save my data as it need to be easy to retrive to make some stats.
Thanks.
Edit:
Something like that with lots of differnt parts
<form action="" method="post" id="OKF" name="OKF" autocomplete="off">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25%" class="tableft"><strong>Date </strong></td>
<td width="25%"><input name="controldate" type="number" id="controldate" /></td>
<td width="25%"><strong>Start Time</strong></td>
<td><input type="text" name="startime" id="startime" class="required"/></td>
</tr>
<tr>
<td class="tableft"><strong>Controller</strong></td>
<td><input type="text" name="controller" id="controller" /></td>
<td><strong>End Time</strong></td>
<td><input type="text" name="endtime" id="endtime" class="required"/></td>
</tr>
<tr>
<td class="tableft"><strong>Hotel Name</strong></td>
<td><input type="text" name="otelname" id="otelname" class="required"/></td>
<td><strong>Company Name</strong></td>
<td><input type="text" name="compres" id="compres" class="required"/></td>
</tr>
<tr>
<td class="tableft"><strong>No Stars</strong></td>
<td><input type="text" name="stars" id="stars" class="required"/></td>
<td><strong>No Room</strong></td>
<td><input type="text" name="roomnum" id="roomnum" class="required"/></td>
</tr>
</table>
<br>
<h1>Part 1</h1>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40%" class="tabtopmid">Question</td>
<td width="4%" class="tabtopmid"></td>
<td width="17%" class="tabtopmid"><strong>Point</strong></td>
<td width="37%" class="tabtopmid"><strong>Comment</strong></td>
</tr>
<tr>
<td>Question 1</td>
<td>20</td>
<td><input name="puan_1" id="puan_1" type="text"></td>
<td><textarea name="cmt_1" id="cmt_1"></textarea></td>
</tr>
<tr>
<td>Question 2</td>
<td>20</td>
<td><input name="puan_2" id="puan_2" type="text"/></td>
<td><textarea name="cmt_2" id="cmt_2"></textarea></td>
</tr>
<tr>
<td>Question 3</td>
<td>20</td>
<td><input name="puan_3" id="puan_3" type="text"/></td>
<td><textarea name="cmt_3" id="cmt_3"></textarea></td>
</tr>
<tr>
<td>Question 4</td>
<td>20</td>
<td><input name="puan_4" id="puan_4" type="text"/></td>
<td><textarea name="cmt_4" id="cmt_4"></textarea></td>
</tr>
<tr>
<td>Question 5</td>
<td>20</td>
<td><input name="puan_5" id="puan_5" type="text"/></td>
<td><textarea name="cmt_5" id="cmt_5"></textarea></td>
</tr>
</table>
<input name="submit" type="submit" id="submit" value="Submit" alt="Submit" title="Submit">
depending on your fields would recommend you to make more than one table
form
- id
1
n
questions
- id
- type
- value
- label
- form_id
and then you could store the answer of the users in a third table
easier to you would be names like formname[foobar], formname[foobar_1] and so on
then you are able to do something like:
$sql = "INSERT INTO answers (name, value) VALUES ";
foreach ($_POST['formname'] as $key => $value) {
$sql .= "('".$key."', '".$value."'),";
}
$sql = substr($sql, 0, -1).";";
mysql_query($sql);
please note, this is only an example.. no security, no valiation, nothing
So this is a hotel registration form , i take it.
Well, the Questions should definitely be a separate table. Then, i guess, there should be a table for Reservations ( containing hotel_id, room_id, customer_id, date, additional info about reservation ) .. then a Customers table and Hotels table, and Rooms table ... and maybe few more.
It's impossible to tell, without knowing the the entire list of fields.
I never worked with 300 columns in one table. My suggestion is use JSON or someother serialized data technic for columns. Grouping related fields can save time in any case.
Recently used;
column = value (variable1:value1-variable2:value2-var3:val3)
adv_room_numbers(text) = "Room:2-Bedroom:3-Kitchen:1-Dining Room:1,etc..room:1,etc..room:1,etc..room:1" // I can use explode() to extract fields
adv_online(enum) = "active"
adv_contact(text) = "Name:Name Surname-Tel:65465-City:Cityname-Address:address details"
Is it all coming from one big form? If so, it might just make sense to put all the data into one array, serialise it, and log it to a file. Then analyse the data after with a more specialist tool.
If you do want to put it into a database, you need to spend some time breaking out the schema - I'm sure people would help but at the moment, the definition is too vague to say anything meaningful.
It might help you to use a framework to map between the front end form and the database. Symfony is excellent at form generation - you just write the files into a YAML file and run a command.