How to call javascript function on multiple checkbox click in php?
When i am downloading excel its not fetching the selected values.
<script>
function xls_fun()
{
alert('hi');
var code=document.getElementById('code').value;
var hpnm=document.getElementById('hpnm').value;
var d_add=document.getElementById('d_add').value;
document.getElementById('xls_link').href="createxls.php?fnm=mynewxls.xls&code="+code+"&hpnm="+hpnm+"&d_add="+d_add+"&placeValuesBeforeTB_=savedValues&TB_iframe=true&height=100&width=150&modal=false";
}
</script>
<tr><th align="center">Code Number</th><th align="center">Name Of Hospital</th>
<th align="center">Doctor Address</th></tr>
<tr><td><?php echo $row1['code'];?></td><td><?php echo $row1['hname'];?></td>
<td><?php echo $row1['doc_add'];?></td></tr>
<tr><th align="center"><th align="center"><input type="checkbox" name="code" id="code" value="<?php echo $row1['code'];?>" onchange="xls_fun()"></th>
<th align="center"><input type="checkbox" name="hpnm" id="hpnm" value="<?php echo $row1['hname'];?>" onchange="xls_fun()"></th>
<th align="center"><input type="checkbox" name="d_add" id="d_add" value="<?php echo $row1['doc_add'];?>" onchange="xls_fun()"></th>
<script>
function checkall(objForm)
{
len = objForm.elements.length;
var i=0;
for( i=0 ; i<len ; i++){
if (objForm.elements[i].type=='checkbox')
objForm.elements[i].checked=objForm.check_all.checked;
}
frmobj.what.value="Delete";
frmobj.action = "books/delete";
frmobj.submit();
}
</script>
<th><input name="check_all" type="checkbox" id="check_all" onclick="checkall(this.form)" value="check_all" /></th>
Hope this will help you :)
Related
I have table from foreach, in this table i create submit with ajax (id="detail"), but why when i submit i just get first row, when i click second row value, i get first row value not second row value ?
<form action="<?php echo base_url() ?>index.php/stock_opname/proses_detail" method="post">
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>SO No</th>
<th>Opname Date</th>
<th>Warehouse</th>
<th>Type</th>
<th>Approve</th>
<th>Close period</th>
<th>Detail</th>
</tr>
</thead>
<tbody>
<?php $no=1; foreach ($show as $key) { ?>
<tr>
<td><?php echo $no ?></td>
<td><input type="text" id="sono" value="<?php echo $key->sono ?>"></td>
<td><input type="text" id="opnamedate" value="<?php echo $key->opnamedate ?>"></td>
<td><input type="text" id="warehousecode" value="<?php echo $key->warehousecode ?>"></td>
<td><input type="text" id="stocktypeid" value="<?php echo $key->stocktypeid ?>"></td>
<td></td>
<td></td>
<td>Detail</td>
</tr>
<?php $no++;} ?>
</tbody>
</table>
</form>
<script type="text/javascript">
//Ajax Load data from ajax
$(document).on('click', '#detail', function(){
var sono = $('#sono').val();
var opnamedate = $('#opnamedate').val();
var wh = $('#warehousecode').val();
var stocktypeid = $('#stocktypeid').val();
alert(sono);
});
you have to make the id also dynamic and also the script sholud be dynamic.Hope you get it
id="detail1"
.on('click', '#detail1', function() ----for first
.on('click', '#detail2', function() ----for second and so on
<form action="<?php echo base_url() ?>index.php/stock_opname/proses_detail" method="post">
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>SO No</th>
<th>Opname Date</th>
<th>Warehouse</th>
<th>Type</th>
<th>Approve</th>
<th>Close period</th>
<th>Detail</th>
</tr>
</thead>
<tbody>
<?php $no=1; foreach ($show as $key) { ?>
<tr>
<td><?php echo $no ?></td>
<td><input type="text" id="sono<?php echo $no; ?>" value="<?php echo $key->sono ?>"></td>
<td><input type="text" id="opnamedate<?php echo $no; ?>" value="<?php echo $key->opnamedate ?>"></td>
<td><input type="text" id="warehousecode<?php echo $no; ?>" value="<?php echo $key->warehousecode ?>"></td>
<td><input type="text" id="stocktypeid<?php echo $no; ?>" value="<?php echo $key->stocktypeid ?>"></td>
<td></td>
<td></td>
<td>Detail</td>
</tr>
<?php $no++;} ?>
</tbody>
</table>
</form>
<script type="text/javascript"> //Ajax Load data from ajax
function getDetails(no){
var sono = $('#sono'+no).val();
var opnamedate = $('#opnamedate'+no).val();
var wh = $('#warehousecode'+no).val();
var stocktypeid = $('#stocktypeid'+no).val();
alert(sono);}
hope this will help
Can you try this ?
$('#detail').click(function(){
var sono = $(this).siblings('#sono').val();
var opnamedate = $(this).siblings('#opnamedate ').val();
var wh = $(this).siblings('#wh').val();
var stocktypeid = $(this).siblings('#stocktypeid ').val();
alert(sono);
});
I'm Working on a plugin in Wordpress in which i'm storing values in new table which is created on plugin activation its working perfectly.
Now I fetched values from table like following
<tbody>
<?php
global $wpdb;
$result = $wpdb->get_results("SELECT * FROM wp_ajc_images");
foreach ($result as $row) {
?>
<tr id="list_item">
<td width="12%">
<img src="<?php echo $row->ajc_img_path ?>" width="100">
</td>
<td width="22%">
<input type="text" class="img_link" value="<?php $row->ajc_img_link ?>" size="30">
<input type="hidden" class="ajc_field_id" value="<?php echo $row->ajc_img_id ?>">
</td>
<td width="26%">
<textarea rows="3" class="img_description"><?php $row->ajc_img_description ?></textarea>
</td>
<td width="22%">
<input type="text" class="img_title" value="<?php $row->ajc_img_title ?>" size="30">
</td>
<td width="20%">
<input type="submit" id="update" value="Update">
<button class="delete">Delete</button>
</td>
</tr>
<?php
}
?>
</tbody>
after fetching the data I display the values in form of listing.
Now I want to update values of input fields and textarea through ajax for which I wrote following code
add_action('wp_ajax_ajc_update_values', 'ajc_update_value');
add_action('wp_ajax_nopriv_ajc_update_values', 'ajc_update_value');
add_action("admin_head", "ajc_input_ajax");
function ajc_input_ajax()
{
?>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#update").click(function () {
var id = jQuery('.ajc_field_id').val();
var update_link = jQuery('.img_link').val();
var update_desc = jQuery('.img_description').val();
var update_title = jQuery('.img_title').val();
alert(id);
var data = {
action: 'ajc_update_values',
ajc_id: id,
ajc_update_link: update_link,
ajc_update_desc: update_desc,
ajc_update_title: update_title
};
alert(data.toSource());
jQuery.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function (result) {
// alert(result);
});
});
});
</script>
<?php
}
//Updating values in database
function ajc_update_value()
{
$id = $_POST['ajc_id'];
$link = $_POST['ajc_update_link'];
$desc = $_POST['ajc_update_desc'];
$title = $_POST['ajc_update_title'];
global $wpdb;
$wpdb->update(
'wp_ajc_images',
array(
'ajc_img_title' => $title,
'ajc_img_description' => $desc,
'ajc_img_link' => $link
),
array('ajc_img_id' => $id)
)
die();
return true;
}
When I click on first item's update button it alerts me right id eg. (12) and update it, but when I click on rest of the item's update button it alerts me first item's id (12) and data is not updated.
Hope you'll understand my question.
Try this code. add id to every fields like id="img_link_<?php echo $row->ajc_img_id; ?>"
HTML code
<tbody>
<?php
global $wpdb;
$result = $wpdb->get_results("SELECT * FROM wp_ajc_images");
foreach ($result as $row) {
?>
<tr id="list_item">
<td width="12%">
<img src="<?php echo $row->ajc_img_path ?>" width="100">
</td>
<td width="22%">
<input type="text" id="img_link_<?php echo $row->ajc_img_id; ?>" class="img_link" value="<?php $row->ajc_img_link ?>" size="30">
<input type="hidden" class="ajc_field_id" value="<?php echo $row->ajc_img_id; ?>">
</td>
<td width="26%">
<textarea rows="3" id="img_description_<?php echo $row->ajc_img_id; ?>" class="img_description"><?php $row->ajc_img_description ?></textarea>
</td>
<td width="22%">
<input type="text" id="img_title_<?php echo $row->ajc_img_id; ?>" class="img_title" value="<?php $row->ajc_img_title ?>" size="30">
</td>
<td width="20%">
<input type="submit" data-id="<?php echo $row->ajc_img_id; ?>" id="update" value="Update">
<button class="delete">Delete</button>
</td>
</tr>
<?php
}
?>
</tbody>
Script code
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#update").click(function () {
var id =jQuery(this).attr('data-id');
var update_link = jQuery('#img_link'+id).val();
var update_desc = jQuery('#img_description'+id).val();
var update_title = jQuery('#img_title'+id).val();
alert(id);
var data = {
action: 'ajc_update_values',
ajc_id: id,
ajc_update_link: update_link,
ajc_update_desc: update_desc,
ajc_update_title: update_title
};
alert(data.toSource());
jQuery.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function (result) {
// alert(result);
});
});
});
</script>
You're displaying values based on a class name and there could be many elements with same class name. What you need to do is target specific <tr> and get values from that <tr> only.
So your jQuery code should look like this:
jQuery("#update").click(function () {
var id = $(this).parents('tr').find('.ajc_field_id').val();
var update_link = $(this).parents('tr').find('.img_link').val();
var update_desc = $(this).parents('tr').find('.img_description').val();
var update_title = $(this).parents('tr').find('.img_title').val();
alert(id);
var data = {
action: 'ajc_update_values',
ajc_id: id,
ajc_update_link: update_link,
ajc_update_desc: update_desc,
ajc_update_title: update_title
};
alert(data.toSource());
jQuery.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function (result) {
// alert(result);
});
});
You just have to add $(this).parents('tr').find before selecting values from every element.
I want to fetch data from table 'driver' by using sql where (name = '? ') condition
and fill the result into three text boxes .
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript" type="text/javascript">
function ajax_post(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "my_parse_file.php";
var fn = document.getElementById("driver_name").value;
// var ln = document.getElementById("last_name").value;
var vars = "driver="+fn;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
document.getElementById("contact_no").value = return_data;
$("#wait").css("display","none");
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
$("#wait").css("display","block");
}
</script>
</head>
<body>
<form action="my_parse_file.php" method="post" id="form2">
<fieldset > <legend>Dispatch</legend>
<table width="50%" align="center">
<tr valign="baseline">
<td align="left">Dispatch_date:</td>
<td><input type="date" name="dispatch_date" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td align="left">Driver_name:</td>
<td><select name="driver_name" id="driver_name" onchange="javascript:ajax_post();">
<?php
do {
?>
<option value="<?php echo $row_drivers['Driver_Name']?>"><?php echo $row_drivers['Driver_Name']?></option>
<?php
} while ($row_drivers = mysql_fetch_assoc($drivers));
$rows = mysql_num_rows($drivers);
if($rows > 0) {
mysql_data_seek($drivers, 0);
$row_drivers = mysql_fetch_assoc($drivers);
}
?>
</select></td>
</tr>
<tr valign="baseline">
<td align="left">Driver_id:</td>
<td><input type="text" name="driver_id" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td align="left">Contact No.</td>
<td><input type="text" name="contact_no" id="contact_no" /></td>
</tr>
<tr valign="baseline">
<td align="left">Truck_id:</td>
<td><input type="text" name="truck_id" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td align="left">Nums. of skids</td>
<td><input type="number" min="0" max="30" id="skids" required="required" />
</td>
</tr>
<tr valign="baseline">
<td align="left"> </td>
<td><input type="submit" value="Insert record" />
<?php ?></td>
</tr>
</table>
</fieldset>
<input type="hidden" name="MM_insert" value="form2" />
</form>
I am trying to fetch data from other php page
<?php echo ' Driver Name' ?>
<?php echo ' Driver ID' ?>
<?php echo ' Contact no' ?>
so please help I am just new to Ajax and php
Encode the output of the PHP file you're fetching with AJAX as JSON using json_encode and then parse hr.responseText as JSON and access the data accordingly.
Have a look here: http://www.json.org/js.html
JQUERY
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$('#aggiungi').live('click', function(){
var thisRow = $(this).parent().parent();
// clone and add data
thisRow.clone(true).insertAfter(thisRow).data('is_clone',true);
$(this).val("-");
$(this).attr("id","remove");
var nextRow = thisRow.next();
nextRow.find('input:not(#aggiungi)').val("");
if (thisRow.data('is_clone')){
while(thisRow.data('is_clone')){
thisRow = thisRow.prev();
}
}else{
nextRow.children(":first").remove();
}
currRowSpan = thisRow.children(":first").attr("rowspan");
thisRow.children(":first").attr("rowspan", currRowSpan+1);
});
$('#remove').live('click', function(){
var thisRow = $(this).parent().parent(),
prevRow = thisRow.prev();
if (thisRow.data('is_clone')){
while(prevRow.data('is_clone')){
prevRow = prevRow.prev();
}
}else{
prevRow = thisRow.next()
.removeData('is_clone')
.children(":first")
.before(thisRow.children(":first"))
.end();
}
currRowSpan = prevRow.children(":first").attr("rowspan");
prevRow.children(":first").attr("rowspan", currRowSpan-1);
thisRow.remove();
});
</script>
PHP
<form action="grading.php" method="post">
<table width-"100%" id="tableRealizzazione">
<tr>
<th></th>
<th style="padding:12px;text-align:center;">Personale</th>
<th style="padding:12px;text-align:center;">Percentage</th>
<th style="padding:12px;text-align:center;">Marketing point</th>
<th style="padding:12px;text-align:center;">Add/Remove</th>
</tr>';
echo '<tr class="even">
<td></td>
<td style="padding:12px;"><input type="text" value="" id="Personale" name="Personale"></td>
<td style="padding:12px;">
<input type="text" id="from" name="from" size="5%"> -
<input type="text" id="to" name="to" size="5%"> %
</td>
<td style="padding:12px;"><input type="text" class="totaliCostiGestione" id="marketpt" name="marketpt"></td>
<td style="padding:12px;"><input type="text" name="programid" value ="34" size="10%"></td>
<td style="padding:12px;"><input type="button" value="+" id="aggiungi"/></td>';
echo '</tr>';
echo '<tr><td><input type="submit" name="submit" value="submit"></td></tr>';
echo '</table>
</form>
When I fill the values of all text boxes and click submit, it prints only the last row and the the last row with value 34 not repeating for all the rest rows.
Here is my code in Fiddle
http://jsfiddle.net/gansai/PA9JF/
That is because you have to make arrays from your form:
eg:
<input type="text" id="from" name="from[]" size="5%"> -
to clone values you have to add:
newRow = thisRow.clone(true).insertAfter(thisRow).data('is_clone',true);
$(newRow+"[name^=programid]").val($(thisRow+"[name^=programid]").val());
Like this JSFiddle
then in PHP:
foreach($_POST['marketpt'] as $num => $val){
$Personale = $_POST[$num]['Personale'];
$from = $_POST[$num]['from'];
$to = $_POST[$num]['to'];
$marketpt = $_POST[$num]['marketpt'];
$programid = $_POST[$num]['programid'];
// process variables, eg: insert in database
}
I have a shipping module I'm trying to update. I'd like to be able to add rows for each line item in my php form/table. What ends up happening is the add/delete row buttons show up for each line item as desired but only affect the first line item. If I add a row to line item 1 it adds a row properly. But if I go to add a row for line item 2 it actually adds a row for line item 1 as well. If I try to add a row for line item 3 it again adds a line for item 1. I want to be able to add rows for each item.
I have a while loop in php that calls a javascript function. Problem is that one of the variables in the javascript requires an ID. Despite going through my loop the ID never changes and therefore my javascript only applies to a single loop which is not my desired output. I'm thinking if I can have the javascript receive a variable from PHP that contains my ID I can get the javascript to run for each pass through my loop.
Here is my javascript:
<SCRIPT language="javascript">
// Last updated 2006-02-21
function addRowToTable()
{
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 + 1;
var row = tbl.insertRow(lastRow);
// Item cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);
// Cust PN cell
var cellBox_Num = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'Box_Num[]';
el.id = 'Box_Num' + iteration;
el.size = 18;
el.onkeypress = keyPressTest;
cellBox_Num.appendChild(el);
}
function keyPressTest(e, obj)
{
var validateChkb = document.getElementById('chkValidateOnKeyPress');
if (validateChkb.checked) {
var displayObj = document.getElementById('spanOutput');
var key;
if(window.event) {
key = window.event.keyCode;
}
else if(e.which) {
key = e.which;
}
var objId;
if (obj != null) {
objId = obj.id;
} else {
objId = this.id;
}
displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
}
}
function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 1) tbl.deleteRow(lastRow - 1);
}
</SCRIPT>
Here is my loop:
<?php
$i=0;
$n=1;
while($i < $num1) {
$SO_Line_Item=mysql_result($result1,$i,"SO_Line_Item");
$Cust_PN=mysql_result($result1,$i,"Cust_PN");
$Cust_PN_Rev=mysql_result($result1,$i,"Cust_PN_Rev");
$Description=mysql_result($result1,$i,"Description");
$SOItemQty=mysql_result($result1,$i,"Qty");
$UOM=mysql_result($result1,$i,"UOM");
$Program=mysql_result($result1,$i,"Program");
$Required_Date=mysql_result($result1,$i,"Required_Date");
$SOItemShipQty=mysql_result($result2,$i,"count(E9_SN)");
?>
<tr>
<td width="3px" valign="top" align="center"><?php
echo "$SO_Line_Item";?>
</td>
<td nowrap="nowrap" valign="top" align="center"><?php
echo "$Cust_PN - $Cust_PN_Rev";?>
</td>
<td nowrap="nowrap" valign="top" align="center"><?php
echo "$Description";?>
</td>
<td nowrap="nowrap" valign="top" align="center">
<?php
echo "$SOItemQty";?>
</td>
<td nowrap="nowrap" valign="top" align="center">
<?php
echo "$UOM";?>
</td>
<td nowrap="nowrap" valign="top" align="center">
<?php
echo $SOItemQty - $SOItemShipQty;?>
</td>
<td nowrap="nowrap" valign="top" align="center">
<input size="2" align="right" type="text" name="Qty">
</td>
<td nowrap="nowrap" valign="top" align="center">
<?php
echo "$Required_Date";?>
</td>
<td nowrap="nowrap" valign="top" align="center">
<?php
echo "$Program";?>
</td>
</tr>
//HERE IS WHERE THINGS GO SOUTH. I'd LIKE TO BE ABLE TO ADD A LINE FOR EACH PART
//NUMBER... WHAT HAPPENS IS THIS IS ALWAYS RUN FOR THE SAME ID AND WHILE THE FORM
//DISPLAYS PROPERLY THE ADD AND DELETE ALWAYS MODIFY THE FIRST PART
<tr>
<td colspan="10">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
<!--
<input type="button" value="Submit" onclick="validateRow(this.form);" />
<input type="checkbox" id="chkValidate" /> Validate Submit
-->
<b><font color="RED">Add/Remove Box Number For This Line Item</font></b>
</p>
</td>
</tr>
<tr>
<td></td>
<td>
<table id="tblSample">
<tr>
<td>1</td>
<td><input type="text" name="Box_Num[]"
id="Box_Num1" size="18" onkeypress="keyPressTest(event, this);" /></td>
</tr>
</table>
</td>
</tr>
<?php
$i++;
}
Thanks in advance!
Simply pass a table id into your row addition and deleletion javascript functions. You could change the first couple line of both function to be like this:
function addRowToTable(tableID)
{
var tbl = document.getElementById('tblSample_' + tableID);
...
}
You would also use your PHP counter to pass the table counter value to the javascript functions like this
<input type="button" value="Add" onclick="addRowToTable('<?php echo $i; ?>');" />
<input type="button" value="Remove" onclick="removeRowFromTable('<?php echo $i; ?>');" />
and add the counter to the table id's like this.
<table id="tblSample_<?php echo $i; ?>">