The code below displays the 10 rows having three columns. the input id's are type_1,type_2,type_3,type_4,type_5 (and same for the rest two columns room_1 to room_5, quantity_1 to quantity_5).
<table id="dgsv_admin" style="width:950px; height:460px;">
<thead>
<tr>
<th>Type</th>
<th>Room</th>
<th>Qty</th>
</tr>
<?php for($i=1;$i<=5;$i++)
{?>
<tr>
<td><input id="type_<?php echo $i ?>" style="width:64px;" class="easyui-validatebox" data-options="required:true" /></td>
<td><input id="room_<?php echo $i ?>" style="width:64px;" class="easyui-numberbox" required="true" /></td>
<td><input id="quantity_<?php echo $i ?>" style="width:64px;" class="easyui-numberbox" data-options="required:true" /></td>
</tr>
<?php }?>
</thead>
</table>
Now My question is that I have a button ADD 5 ROWS.I want to generate the above rows dynamically each time the button is clicked and at the same time I want to handle the id's of the input like on first click the id's of first column will be type_1 to type_5 and on second click they should be type6 to type_10.
<button class="btn btn-success">ADD 5 ROWS</button>
You shoudl use ajax for such process.
PHP Script:
if( isset($_POST['send_row_request']) )
{
// process the request
$base_id = $_POST['base_id'];
$_SESSION['next_request_base_id'] = $base_id + 5; // setting this for the next request.
// get the data from DB. You have already written the function for you to get
// 5 rows of DB based on a base id give,
$result_array = get_db_data($base_id);
echo json_encode($result_array)
/***
Or if you are not comfortable with JSON you can loop through array and echo them
on each iteration
***/
}
And HERE is the jQuery AJAX :
$(document).ready(function(){
var base_id = $('#base_id').val();
$('myButton').click(function(){
$.ajax({
url : 'url_to_your_php_script',
data : ({send_row_request : 'true', 'base_id' : base_id});
success : function(msg)
{
// do the stuff here and don't forgot to update base_is hidden field on the last record process
}
})
});
});
And here is a simpel HTML. Note that you should save your last row's id of your first five-records into a hidden input with the id of for example #base_id. This value also should be changed on each use click on the button.
<input type='hidden' value='<?php echo $base_id; ?>' id='base_id' />
You can use the php session variable to dynamically create rows among page request:
<?php
session_start();
if(isseet($_POST['your_button_id']))
{
if(isset($_SESSION['row_id']))
$_SESSION['row_id']=$_SESSION['row_id']+1;
else
$_SESSION['row_id']=1;
}
?>
<table id="dgsv_admin" style="width:950px; height:460px;">
<thead>
<tr>
<th>Type</th>
<th>Room</th>
<th>Qty</th>
</tr>
<?php if(isseet($_POST['your_button_id']))
{
$row =$_SESSION['row_id'];
for($i=$row;$i<=$row+4;$i++)
{
?>
<tr>
<td><input id="type_<?php echo $i ?>" style="width:64px;" class="easyui-validatebox" data-options="required:true" /></td>
<td><input id="room_<?php echo $i ?>" style="width:64px;" class="easyui-numberbox" required="true" /></td>
<td><input id="quantity_<?php echo $i ?>" style="width:64px;" class="easyui-numberbox" data-options="required:true" /></td>
</tr>
<?php } $_SESSION['row_id']=$_SESSION['row_id']+4; } ?>
</thead>
</table>
Related
I need your help about my problem. I've two table with checkbox, the first is show all the record from DB (using MySQL) and the second table get the data after I checked and submit from the first table.So I want to disable my checkbox in the first table after I checked and submitted the data to the second table, but if I want cancel the copy I check the second table so the checkbox in the first table will be enabled and the data in the second table will erase (because it just temporary variable for store another DB). In this code I'm using disable but it can't work where is the problem?
// this code for checked the checkbox that be chosen first
session_start();
if (count($_POST)){
//save choices to session
$_SESSION['select_DB']=$_POST['select_DB'];
}
function was_checked($i) {
if ($_SESSION['select_DB']){
if(in_array($i,$_SESSION['select_DB']) ) {
return "checked='checked'";
}
}
return "";
}
?>
// this one if cancel the submit
<script>
function openCB() {
document.getElementById("balik_DB[]").disabled = false;
}
</script>
//i'm using this to disable checkbox after submit
<script>
function closeCB() {
document.getElementById("balik_DB[]").disabled = true;
}
</script>
<!-- This code show table with checkbox that its value get from DB-->
<tbody>
<?php
include "db_connect.php";
$sql_select = $dt_bas->prepare("SELECT id_pegawai, nm_pegawai, tmp_lahir FROM pegawai");
$sql_select->execute();
while($row = $sql_select->fetch(PDO::FETCH_ASSOC)){
$id = $row["id_pegawai"]; // id
$nm = $row["nm_pegawai"]; // employe name
$tmp = $row["tmp_lahir"]; // birthday
?>
<tr>
<td><input type="checkbox" name="select_DB[]" id="select_DB[]" value=<?php echo"$id";?> <?=was_checked($id)?>/></td>
<td><?php echo "$id";?></td>
<td><?php echo "$nm";?></td>
<td><?php echo "$tmp";?></td>
<td>
Ubah
Detail
</td>
</tr>
<?php } ?>
</tbody>
<!--this the second table that get its value from the first table-->
<form>
<table border="1">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Nama</th>
<th>TTL</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
<?php
// this code for get the data that is chosen from checkbox
include "db_connect.php";
if(isset($_POST['select_DB'])){
foreach($_POST['select_DB'] as $select=>$option_id){
$sql_select2 = $dt_bas->prepare("SELECT id_pegawai, nm_pegawai, tmp_lahir FROM pegawai WHERE id_pegawai = '$option_id' ");
$sql_select2->execute();
while($row = $sql_select2->fetch(PDO::FETCH_ASSOC)){
$id = $row["id_pegawai"]; // id
$nm = $row["nm_pegawai"]; // employee name
$tmp = $row["tmp_lahir"]; // birth place
?>
<tr>
<td><input type="checkbox" id="balik_DB[]" value="<?php echo"$id";?>"/></td>
<td><?php echo"$id";?></td>
<td><?php echo"$nm";?></td>
<td><?php echo"$tmp";?></td>
<td>
Ubah
Detail
</td>
</tr>
<?php }
}
}
?>
</tbody>
<tfooter>
</tfooter>
</table>
<input type="submit" value="Balik" onclick="openCB()"/>
</form>
The problem in id="balik_DB[]" because you fetch data from the database and dynamically create checkbox so what will happen when more than one checkbox would have same 'id'(id should be unique).So instead of using id ,you need to use class = "balik_DB[]".
I have to generate some text boxes after each line of row sent from database, so I have this user who have 2 rows:
And of course each row belongs to an id:
<td><?php echo $counter--; ?></td>
<td><?php echo $installment['date_now'] ?></td>
<td><?php echo $installment['payment'] ?> $</td></tr>
</tr>
<?php } ?>
<tr><th colspan="10" style="text-align: right;">Remaining:</th>
<th><?php echo ($cash['project_cost'] - $sum) ?> $</th>
</tr>
<tr id="<?php echo $cash['infoid']; ?>"><td colspan="8" style="text-align: right;">Add Payment</td>
<td><input type="date" class="form-control" id="date_pay_now[]"/></td>
<td><input class="form-control" type="text" id="pay_now"/></td>
<td><button id="add_payment" class="btn btn-success glyphicon glyphicon-plus"></button>
</tr>
<tr><td></td></tr><tr><td></td></tr>
<?php $sumCash = $sumCash + $cash['project_cost']; } ?>
<tr>
<th colspan="10">Cash Total</th><th id="final_cash"><?php echo $sumCash ?> $</th>
</tr>
</table>
</div>
<?php } else { ?>
No Payments available
<?php } ?>
Now, when select a date and type an amount, I should send those values into AJAX and but first I need to get the id of the row so I can send it too.
$("#add_payment").click(function()
{
var date_of_pay = $("#date_pay_now").val();
var pay_now = $("#pay_now").val();
var id_pay = $(this).closest('tr').attr('id');
console.log(id_pay);
if(date_of_pay == "" || pay_now == "")
{
$("#date_pay_now").css('border-color', 'red');
$("#pay_now").css('border-color', 'red');
}
if(date_of_pay != "" && pay_now != "")
{
$.ajax
({
//Still not typed
});
}
});
If you see the image, when I click on the first button, I see the id correctly at the console and if they are empty I can see the red color, but when I refresh the page and click directly on the second row button, I can't see any value at the console and no css color due to empty text box shown.
And here when I click on the next button, no color and no id at the console:
I have some javascript that creates a datetime picker on each row of a table. The function only works on the first row. I understand that the reason for this is that the datepicker shares the same ID on every row. How can I adjust my code to fix this?
<script type="text/javascript">
$(document).ready(function (){
$('#duedate').datetimepicker({
controlType: 'select',
timeFormat: 'hh:mm tt'
});
});
</script>
<?php $txtJob = $_GET['pickjob']; ?>
<?php
$query2 = "Select Work_Center, Sequence, Est_Total_Hrs from V_schedule WHERE job = '" . $txtJob . "'";
$results2 = sqlsrv_query($connPpp, $query2);?>
<form id="frmpromiseddate" name="frmpromiseddate" action="schedule_job_submit.php" method="POST">
<table class='table table-bordered table-condensed table-striped'>
<tr>
<td>Sequence</td>
<td>Work Center</td>
<td>Due Date</td>
</tr>
<?php while ($row2 = sqlsrv_fetch_array($results2)) {?>
<tr>
<td><?php echo $row2['Sequence']?></td>
<td><?php echo $row2['Work_Center']?></td>
<td><input type="text" name="duedate" id="duedate" value="" /> </td>
</tr>
<?php ;} //End of while ?>
</table>
Jquery treats idas unique identifier and apply on only one element at a time, where as it treats class as a group-identifier and can apply to multiple element at a time so change id to class both in html and Jquery code:-
<td><input type="text" name="duedate" class="duedate" value="" /></td>
And
$('.duedate').datetimepicker({
Use class(.) instead of id(#) for date picker
Javascript code :
$('.duedate').datetimepicker()
HTML code: making id unique
<?php $i=0;
while ($row2 = sqlsrv_fetch_array($results2)) {?>
<tr>
<td><?php echo $row2['Sequence']?></td>
<td><?php echo $row2['Work_Center']?></td>
<td><input type="text" name="duedate" class="duedate" id="duedate_<?php echo $i;?>" value="" /> </td>
</tr>
<?php $i++; } //End of while ?>
I have a page where I am adding textboxes using for loop. There is a table in which there will be 12 rows with 4 columns. In 2nd and 4th column, I have added datepicker which is showing up fine.
The problem is when I select a date from datepicker in 2nd column, the date gets set in 2nd column(correct) but when I select a date in 4th column, the date gets set in 2nd column(incorrect).
Here's is my code:
...
<table class="table table-striped">
<tr>
<th><center>Column1</center></th>
<th><center>Column2</center></th>
<th><center>Column3</center></th>
<th><center>Column4</center></th>
</tr>
<?php
for($i=0; $i<count($time_period); $i++) {
$current_table = $table[$i];
$result = $db->query("SHOW TABLES LIKE '$current_table'");
if($result->rowCount() > 0) {
//Table Exists!
?>
<tr>
<td><center><?php echo $time_period[$i]; ?></center></td>
<td><input type="text" class="form-control datepicker" id="<?php echo $i; ?>" autocomplete="off" name="date_receipt[]" value=""></td>
<td><input type="text" class="form-control" id="<?php echo $i; ?>" autocomplete="off" name="cheque_amount[]" value=""></td>
<td><input type="text" class="form-control datepicker" id="<?php echo $i; ?>" autocomplete="off" name="date_deposit[]" value=""></td>
</tr>
<?php
}
}
?>
</table>
...
JQuery Code to Add Datepicker
<script>
$(function(){
$.datepicker.setDefaults(
$.extend($.datepicker.regional[''])
);
$('.datepicker').datepicker({ dateFormat: 'dd-mm-yy' });
});
</script>
I don't know why this is happening. Any ideas?
I have had a similar issue. Try giving them unique IDs and then using the IDs to select them in jQuery.
Reasoning: My guess is that .datepicker returns an array of the nodes, so when it gets clicked, it puts the value into the class.val which will be the first child in the array.
Update in response:
They both have the same id:
id="<?php echo $i; ?>
Not working: http://jsfiddle.net/snlacks/k3hdzLre/3/
Working: http://jsfiddle.net/snlacks/k3hdzLre/4/
Because they both have the same ID, the browser is going to look through the class by ID (even though you didn't pass the ID), because this is faster. The browser assumes IDs are unique.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I need some help with a multiple upload form. I'm using AJAX to upload an image (without a submit button) and display the image after it has loaded. However, my form is repeated multiple times (table rows) so that only the first form works. My php code:
<table class="datatable tablesort selectable paginate full">
<thead>
<tr>
<th>Part</th>
<th>Price</th>
<th>Upload Image</th>
<th>Categories</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Part</th>
<th>Upload Image</th>
<th>Price</th>
<th>Categories</th>
</tr>
</tfoot>
<tbody>
<?php
$breaker_id = $_SESSION['breaker_id'];
$sql = "SELECT * FROM stock where VehicleID='$vehicle' and breaker='$breaker_id'";
$result = mysql_query($sql);
while ($row = mysql_fetch_assoc($result)) {
?>
<tr id="<?php echo $row['id']; ?>" class="edit_tr">
<td class="edit_td"><span id="first_<?php echo $row['id']; ?>" class="text"><?php echo $row['stock_item']; ?></span><input type="text" value="<?php echo $row['stock_item']; ?>" class="editbox" id="first_input_<?php echo $row['id']; ?>"/></td>
<td class="edit_td"><span id="last_<?php echo $row['id']; ?>" class="text">£<?php echo $row['price']; ?></span><input type="text" value="<?php echo $row['price']; ?>" class="editbox" id="last_input_<?php echo $row['id']; ?>"/></td>
<td>
<div class='preview'>
</div>
<form class="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload your image
<div class='imageloadstatus' style='display:none'><img src="images/load.gif" alt="Uploading...."/></div>
<div class='imageloadbutton' >
<input type="file" name="photoimg" class="photoimg" />
<input type="text" name="photoimgid" value="<?php echo $row['id']; ?>">
</div>
</form>
<td><?php echo $row['Item_Specifics_Type']; ?> | <?php echo $row['Item_Specifics_SubType']; ?> </td>
</tr><?php } ?>
</tbody>
</table>
And the javascript:
<script type="text/javascript" >
$(document).ready(function() {
$('.photoimg').die('click').live('change', function() {
//$("#preview").html('');
$(".imageform").ajaxForm({target: '.preview',
beforeSubmit:function(){
console.log('v');
$(".imageloadstatus").show();
$(".imageloadbutton").hide();
},
success:function(){
console.log('z');
$(".imageloadstatus").hide();
$(".imageloadbutton").show();
},
error:function(){
console.log('d');
$(".imageloadstatus").hide();
$(".imageloadbutton").show();
} }).submit();
});
});
</script>
You use duplicated id's. Every time you search (in jQuery) e.q. #imageform or #preview it returns the first element that it found with this id!
$("#imageform").ajaxForm({ // Wrong, catch only first #imageform
$(".imageform").ajaxForm({ // Correct, loop over all elements with .imageform class
You have to change it in whole JS code.
-- edit --
Now you run ajaxForm plugin for every .imageform but target is the same in every execution as well as toggled elements in beforeSubmit, success and error functions.
$('.photoimg').die('click').live('change', function () {
var id = $(this).closest('tr').attr('id');
$(this).closest(".imageform").ajaxForm({
target: '#' + id + ' .preview', // type of hack, don't have plugin source ;)
beforeSubmit: function () {
console.log('v');
$(this).find(".imageloadstatus").show();
$(this).find(".imageloadbutton").hide();
},
success: function () {
console.log('z');
$(this).find(".imageloadstatus").hide();
$(this).find(".imageloadbutton").show();
},
error: function () {
console.log('d');
$(this).find(".imageloadstatus").hide();
$(this).find(".imageloadbutton").show();
}
}).submit();
});