I am trying to assign textbox a value on button click. I am assigning the value to previous textbox of button.
I used
var classic = window.Event.target.class;
alert(classic);
but this gives error undefined.
How can I identify which button clicked either by class name or id or some other way.
jQuery(document).ready(function() {
var formfield;
var classic = window.Event.target.class;
/* user clicks button on custom field, runs below code that opens new window */
jQuery(classic).click(function() {
formfield = jQuery(this).prev('input'); //The input field that will hold the uploaded file url
tb_show('','media-upload.php?TB_iframe=true');
return false;
});
//adding my custom function with Thick box close function tb_close() .
window.old_tb_remove = window.tb_remove;
window.tb_remove = function() {
window.old_tb_remove(); // calls the tb_remove() of the Thickbox plugin
formfield=null;
};
// user inserts file into post. only run custom if user started process using the above process
// window.send_to_editor(html) is how wp would normally handle the received data
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html){
if (formfield) {
fileurl = jQuery('img',html).attr('src');
jQuery(formfield).val(fileurl);
tb_remove();
} else {
window.original_send_to_editor(html);
}
};
});
<form method="post" action="options.php">
<?php settings_fields( 'Option-Man-settings-group' ); ?>
<?php do_settings_sections( 'Option-Man-settings-group' ); ?>
<div class="frame">
<table class="form-table">
<tr valign="top">
<th class="label">Logo URL:</th>
<td><input type="text" name="logo-setting" size="45" value="<?php echo esc_attr( get_option('logo-setting') ); ?>" /></td>
<td><input name="op" class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Header:</th>
<td><input type="text" name="main-header" size="45" value="<?php echo esc_attr( get_option('main-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Carousel-url:</th>
<td><input type="text" name="carousel-image" size="45" value="<?php echo esc_attr( get_option('carousel-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Message:</th>
<td><input type="text" name="message-short" size="45" value="<?php echo esc_attr( get_option('message-short') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Question header:</th>
<td><input type="text" name="question-cur" size="45" value="<?php echo esc_attr( get_option('question-cur') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Happy Clients Post Image:</th>
<td><input type="text" name="happy-image" size="45" value="<?php echo esc_attr( get_option('happy-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Happy Clients Post Header:</th>
<td><input type="text" name="happy-header" size="45" value="<?php echo esc_attr( get_option('happy-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Happy Clients Post Text:</th>
<td><input type="text" name="happy-text" size="45" value="<?php echo esc_attr( get_option('happy-text') ); ?>" /></td>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Solution Builder Post Image:</th>
<td><input type="text" name="builder-image" size="45" value="<?php echo esc_attr( get_option('builder-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Solution Builder Post Header:</th>
<td><input type="text" name="builder-header" size="45" value="<?php echo esc_attr( get_option('builder-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Solution Builder Post Text:</th>
<td><input type="text" name="builder-text" size="45" value="<?php echo esc_attr( get_option('builder-text') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Agile Process Post Image:</th>
<td><input type="text" name="agile-image" size="45" value="<?php echo esc_attr( get_option('agile-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Agile Process Post Header:</th>
<td><input type="text" name="agile-header" size="45" value="<?php echo esc_attr( get_option('agile-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Agile Process Post Text:</th>
<td><input type="text" name="agile-text" size="45" value="<?php echo esc_attr( get_option('agile-text') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Honesty Transparency Post Image:</th>
<td><input type="text" name="honesty-image" size="45" value="<?php echo esc_attr( get_option('honesty-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Honesty Transparency Post Header:</th>
<td><input type="text" name="honesty-header" size="45" value="<?php echo esc_attr( get_option('honesty-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Honesty Transparency Post Text:</th>
<td><input type="text" name="honesty-text" size="45" value="<?php echo esc_attr( get_option('honesty-text') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Medtegra Image:</th>
<td><input type="text" name="Client1-image" size="45" value="<?php echo esc_attr( get_option('Client1-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">HDFC Image:</th>
<td><input type="text" name="Client2-image" size="45" value="<?php echo esc_attr( get_option('Client2-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">iitjobs Image:</th>
<td><input type="text" name="Client3-image" size="45" value="<?php echo esc_attr( get_option('Client3-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">ProductiveTeams.com:</th>
<td><input type="text" name="Client4-image" size="45" value="<?php echo esc_attr( get_option('Client4-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">JFYS Image:</th>
<td><input type="text" name="Client5-image" size="45" value="<?php echo esc_attr( get_option('Client5-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Clients Message:</th>
<td><input type="text" name="Client-message" size="45" value="<?php echo esc_attr( get_option('Client-message') ); ?>" /></td>
</tr>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Google+:</th>
<td><input type="text" name="google" size="45" value="<?php echo esc_attr( get_option('google') ); ?>" /></td>
</tr>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Twitter:</th>
<td><input type="text" name="twitter" size="45" value="<?php echo esc_attr( get_option('twitter') ); ?>" /></td>
</tr>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Facebook:</th>
<td><input type="text" name="facebook" size="45" value="<?php echo esc_attr( get_option('facebook') ); ?>" /></td>
</tr>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Linkedin:</th>
<td><input type="text" name="linkedin" size="45" value="<?php echo esc_attr( get_option('linkedin') ); ?>" /></td>
</tr>
</table>
</div>
<?php submit_button(); ?>
</form>
I believe this is what you want.
$('.form-table').on('click', 'button, input[type="button"]', function () {
// Get the previous input
var input = $(this).closest('td').prev('td').find('input');
// Get this button class
alert($(this).attr('class'));
// Get this button id
alert($(this).attr('id'));
// Your code here
tb_show('', 'media-upload.php?TB_iframe=true');
return false;
});
Demo: https://jsfiddle.net/tusharj/o59eoomx/2/
Related
I Have a form with field ABA11,ABA12,ABA13........Which is used to update the data. In this form all the field should be remained in disabled mode except the first field ABA11 initially.once the ABA11 field is filled then only ABA12 will be enabled to enter data.Once the data is entered and it is saved in data base after that this filled should also be in disable mode.And this process to be continued for other field
<?php
$status11=disabled;
if(htmlentities($result->aba11)==null){
$status11=enabled;
}
?>
<td><input type="datetime-local" name="aba11" id="aba11" value="<?php echo htmlentities($result->aba11);?>" class="form-control" <?php echo $status11?> ></td>
<?php
$status12=disabled;
if(htmlentities($result->aba11)!=null and htmlentities($result->aba12)== null ){
$status12=enabled;
}
?>
<td><input type="datetime-local" name="aba12" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba12);?>" class="form-control" <?php echo $status12?>></td>
<td><input type="text" name="aba13" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba13);?>" class="form-control"></td>
</tr>
<tr>
<th class= "col-md-1.5" align="centre">0.0.1M NaOH</th>
<th class= "col-md-2" align="centre">60 Degree C</th>
<td><input type="datetime-local" name="aba21"onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba21);?>" class="form-control" ></td>
<td><input type="datetime-local" name="aba22" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba22);?>" class="form-control" ></td>
<td><input type="text" name="aba23" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba23);?>" class="form-control" ></td>
</tr>
<tr>
<th class= "col-md-1.5" align="centre">0.5M HCL</th>
<th class= "col-md-2" align="centre">60 Degree C</th>
<td><input type="datetime-local" name="aba31" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba31);?>" class="form-control" ></td>
<td><input type="datetime-local" name="aba32" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba32);?>" class="form-control" ></td>
<td><input type="text" name="aba33" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba33);?>" class="form-control"></td>
</tr>
<tr>
<th class= "col-md-1.5" align="centre">Freeze Drying</th>
<th class= "col-md-2" align="centre"> </th>
<td><input type="datetime-local" name="aba41" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba41);?>" class="form-control" ></td>
<td><input type="datetime-local" name="aba42" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba42);?>" class="form-control" ></td>
<td><input type="text" name="aba43" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba43);?>" class="form-control"></td>
</tr>
</table>
I tried it with the using if condition but i am not able to achieve it.Kindly suggest any clue or my mistake in this.I have entered the if condition only aba12.
I have modified part of your code to do it. First of all, there is no way you can do it with PHP because it is executed before the page is loaded in the server side, so you will need to use javascript for this.
I have removed the PHP code for enabling/disabling the input elements. I made the solution just for the two first elements (you will have to do it for the rest, so when you get to the page, your aba11 is enabled and the rest are disabled.
Once you set an input in aba11 (as you have an event oninput), it calls the javascript function disable_items with a number (this number indicates wich of the fields we are working on.
The javascript function disables the actual element and enables the next one.
<td><input type="datetime-local" oninput="disable_items(1)" name="aba11" id="aba11" value="<?php echo htmlentities($result->aba11);?>" class="form-control" <?php echo $status11?> ></td>
<td><input type="datetime-local" disabled oninput="disable_items(2)" name="aba12" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba12);?>" class="form-control" <?php echo $status12?>></td>
<td><input type="text" disabled name="aba13" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba13);?>" class="form-control"></td>
</tr>
<tr>
<th class= "col-md-1.5" align="centre">0.0.1M NaOH</th>
<th class= "col-md-2" align="centre">60 Degree C</th>
<td><input type="datetime-local" disabled name="aba21"onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba21);?>" class="form-control" ></td>
<td><input type="datetime-local" disabled name="aba22" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba22);?>" class="form-control" ></td>
<td><input type="text" disabled name="aba23" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba23);?>" class="form-control" ></td>
</tr>
<tr>
<th class= "col-md-1.5" align="centre">0.5M HCL</th>
<th class= "col-md-2" align="centre">60 Degree C</th>
<td><input type="datetime-local" disabled name="aba31" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba31);?>" class="form-control" ></td>
<td><input type="datetime-local" disabled name="aba32" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba32);?>" class="form-control" ></td>
<td><input type="text" disabled name="aba33" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba33);?>" class="form-control"></td>
</tr>
<tr>
<th class= "col-md-1.5" align="centre">Freeze Drying</th>
<th class= "col-md-2" align="centre"> </th>
<td><input type="datetime-local" disabled name="aba41" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba41);?>" class="form-control" ></td>
<td><input type="datetime-local" disabled name="aba42" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba42);?>" class="form-control" ></td>
<td><input type="text" disabled name="aba43" onkeydown="upperCaseF(this)" value="<?php echo htmlentities($result->aba43);?>" class="form-control"></td>
</tr>
</table>
<script>
function disable_items(option) {
if (option==1){
document.getElementById("aba11").disabled=true;
document.getElementById("aba12").disabled=false;
}
if (option==2){
document.getElementById("aba12").disabled=true;
document.getElementById("aba13").disabled=false;
}
}
</script>
I have the following table row:
<tr class="table-row">
<td class="column-1">
<div class="cart-img-product b-rad-4 o-f-hidden">
<img src="../admin/uploads/<?php echo $info['product_photo']; ?>" alt="IMG-PRODUCT">
</div>
</td>
<td class="column-2">
<?php echo $info['product_name']; ?>
</td>
<td class="column-3"><input type="text" value="<?php echo $info['product_price']; ?>" readonly></td>
<td class="column-4"><input type="text" value="<?php echo $info['product_amount']; ?> Piece" readonly></td>
<td class="column-5"><input style="color:red;" type="text" value="Rs <?php echo $info['product_price']*$info['product_amount']; ?>" readonly></td>
</tr>
I want to get the sum of the last td which will be the total pricing. I thought of using js but as the row may get dynamically added it is hard. How can i get the total price.
I want the total to be displayed here.
<span class="m-text21 w-size20 w-full-sm">
<strong><input type="text" id="total" value=""></strong>
</span>
You can try with querySelectorAll() and forEach() like the following way:
var lastTDs = document.querySelectorAll('tbody tr td:last-child input');
var sum = 0;
[...lastTDs].forEach(function(td) {
sum += Number(td.value.split(' ')[1]);
});
console.log(sum);
<table>
<tbody>
<tr class="table-row">
<td class="column-1">
<div class="cart-img-product b-rad-4 o-f-hidden">
<img src="../admin/uploads/<?php echo $info['product_photo']; ?>" alt="IMG-PRODUCT">
</div>
</td>
<td class="column-2"><?php echo $info['product_name']; ?></td>
<td class="column-3"><input type="text" value="<?php echo $info['product_price']; ?>" readonly></td>
<td class="column-4"><input type="text" value="<?php echo $info['product_amount']; ?> Piece" readonly></td>
<td class="column-5"><input style="color:red;" type="text" value="Rs 50" readonly></td>
</tr>
<tr class="table-row">
<td class="column-1">
<div class="cart-img-product b-rad-4 o-f-hidden">
<img src="../admin/uploads/<?php echo $info['product_photo']; ?>" alt="IMG-PRODUCT">
</div>
</td>
<td class="column-2"><?php echo $info['product_name']; ?></td>
<td class="column-3"><input type="text" value="<?php echo $info['product_price']; ?>" readonly></td>
<td class="column-4"><input type="text" value="<?php echo $info['product_amount']; ?> Piece" readonly></td>
<td class="column-5"><input style="color:red;" type="text" value="Rs 100" readonly></td>
</tr>
</tbody>
</table>
try
let v = [...document.querySelectorAll('.column-5 input')];
total.value = v.reduce((a,c)=> +c.value.replace(/Rs /,'')+a, 0)
We use here standard: querySelectorAll, reduce, arrow functions, spread syntax (to cast NodeList to array - to have access to reduce), replace with simple regular expression (to remove Rs prefix). The v contains array with <input> elements from last column for all rows. By+ in +c.val.. JS make implicit cast string to number.
let v = [...document.querySelectorAll('.column-5 input')];
total.value = v.reduce((a,c)=> +c.value.replace(/Rs /,'')+a, 0)
<table><tbody>
<tr class="table-row">
<td class="column-1">
<div class="cart-img-product b-rad-4 o-f-hidden">
<img src="../admin/uploads/xxx" alt="IMG-PRODUCT">
</div>
</td>
<td class="column-2">
<?php echo $info['product_name']; ?>
</td>
<td class="column-3"><input type="text" value="10000" readonly></td>
<td class="column-4"><input type="text" value="2 Piece" readonly></td>
<td class="column-5"><input style="color:red;" type="text" value="Rs 20000" readonly></td>
</tr>
<tr class="table-row">
<td class="column-1">
<div class="cart-img-product b-rad-4 o-f-hidden">
<img src="../admin/uploads/xxx" alt="IMG-PRODUCT">
</div>
</td>
<td class="column-2">
<?php echo $info['product_name']; ?>
</td>
<td class="column-3"><input type="text" value="14000" readonly></td>
<td class="column-4"><input type="text" value="1 Piece" readonly></td>
<td class="column-5"><input style="color:red;" type="text" value="Rs 14000" readonly></td>
</tr>
<tbody><table>
<span class="m-text21 w-size20 w-full-sm">
<strong><input type="text" id="total" value=""></strong>
</span>
I have a table and it has checkbox what I want is when more than two checkboxes are selected my button should be visible and vice versa
JavaScript Code:
$(document).ready(function() {
if ($("input:checkbox:checked").length > 1) {
$("#checkerButton").show();
} else {
$("#checkerButton").hide();
}
});
The .PHP File:
<div>
<form action="" method="POST" id="checkerDeleter">
<input type="submit" value="Delete Selected" class="btn btn-danger" id="checkerButton" />
</form>
</div>
<table class="table table-hover table-responsive">
<thead>
<tr>
<td>Check</td>
<td>Name</td>
<td>Description</td>
<td>Price</td>
<td>Discount</td>
<td>Quantity</td>
<!--<td>Category</td>-->
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<?php while($row = $resultallproducts->fetch_assoc()) { ?>
<form action="" method="POST">
<tr>
<td><input type="checkbox" name="deleter[]" value="<?php echo $row['product_id']; ?>" /></td>
<td class="hide"><input type="text" name="id" value="<?php echo $row['product_id']; ?>" /></td>
<td><input type="text" name="name" value="<?php echo $row['product_name']; ?>" /></td>
<td><textarea name="desc"><?php echo $row['product_desc'] ?></textarea></td>
<td><input type="text" name="price" value="<?php echo $row['product_price']; ?>" /></td>
<td><input type="text" name="discount" value="<?php echo $row['product_discount']; ?>" /></td>
<td><input type="text" name="quantity" value="<?php echo $row['product_quantity']; ?>" /></td>
<td><input type="submit" name="update" class="btn btn-primary btn-sm" value="Update" /></td>
<td><input type="submit" name="delete" class="btn btn-danger btn-sm" value="Delete" /></td>
</tr>
</form>
<?php } ?>
</tbody>
</table>
</div>
first it is disabled but when I click on two checkboxes nothing happens :\
Use change event to check if 2 or more checkbox are checked
$(document).ready(function()
{
if ($("input:checkbox:checked").length > 1)
{
$("#checkerButton").show();
}
else
{
$("#checkerButton").hide();
}
$("input:checkbox").on("change",function(){
if($("input:checkbox:checked").length > 1){
$("#checkerButton").show();
}else{
$("#checkerButton").hide();
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form action="" method="POST" id="checkerDeleter">
<input type="submit" value="Delete Selected" class="btn btn-danger" id="checkerButton"/>
</form>
</div>
<table class="table table-hover table-responsive">
<thead>
<tr>
<td>Check</td>
<td>Name</td>
<td>Description</td>
<td>Price</td>
<td>Discount</td>
<td>Quantity</td>
<!--<td>Category</td>-->
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<form action="" method="POST">
<tr>
<td><input type="checkbox" name="deleter[]" value="<?php echo $row['product_id']; ?>"/></td>
<td class="hide"><input type="text" name="id" value="<?php echo $row['product_id']; ?>"/></td>
<td><input type="text" name="name" value="<?php echo $row['product_name']; ?>"/></td>
<td><textarea name="desc"><?php echo $row['product_desc'] ?></textarea></td>
<td><input type="text" name="price" value="<?php echo $row['product_price']; ?>"/></td>
<td><input type="text" name="discount" value="<?php echo $row['product_discount']; ?>"/></td>
<td><input type="text" name="quantity" value="<?php echo $row['product_quantity']; ?>"/></td>
<td><input type="submit" name="update" class="btn btn-primary btn-sm" value="Update"/></td>
<td><input type="submit" name="delete" class="btn btn-danger btn-sm" value="Delete"/></td>
</tr>
<tr>
<td><input type="checkbox" name="deleter[]" value="<?php echo $row['product_id']; ?>"/></td>
<td class="hide"><input type="text" name="id" value="<?php echo $row['product_id']; ?>"/></td>
<td><input type="text" name="name" value="<?php echo $row['product_name']; ?>"/></td>
<td><textarea name="desc"><?php echo $row['product_desc'] ?></textarea></td>
<td><input type="text" name="price" value="<?php echo $row['product_price']; ?>"/></td>
<td><input type="text" name="discount" value="<?php echo $row['product_discount']; ?>"/></td>
<td><input type="text" name="quantity" value="<?php echo $row['product_quantity']; ?>"/></td>
<td><input type="submit" name="update" class="btn btn-primary btn-sm" value="Update"/></td>
<td><input type="submit" name="delete" class="btn btn-danger btn-sm" value="Delete"/></td>
</tr>
</form>
</tbody>
</table>
I am adapting this guide in codeigniter: http://www.quirksmode.org/dom/domform.html, in order to create a form with dynamic fields, all the functionality is working good, however when I try to echo the data in my controller with:
echo '<pre>'.print_r($this->input->post(),TRUE).'</pre>';
it just print the last group of values that were added in the view.
i.e.
Here is the js function:
var counter = 0;
function init() {
document.getElementById('moreFields').onclick = moreFields;
}
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
Here is the form code:
<?php echo form_open('admin/grabar_ruta'); ?>
<table width="100%">
<tr>
<td width="12%" align="right">Fuente:</td>
<td width="13%" align="left"><select name="fuente">
<?php foreach($fuentes as $row) { echo '<option value="'.$row->id.'">'.$row->serial.'</option>'; } ?> </select></td>
<td width="12%" align="right">Vehículo:</td>
<td width="13%" align="left"><select name="vehiculo">
<?php foreach($vehiculos as $row) { echo '<option value="'.$row->id.'">'.$row->placa.'</option>'; } ?> </select></td>
<td width="12%" align="right">Conductor:</td>
<td width="13%" align="left"><select name="conductor">
<?php foreach($conductores as $row) { echo '<option value="'.$row->id.'">'.$row->nombre.'</option>'; } ?> </select></td>
<td width="12%" align="right">Fecha:</td>
<td width="13%" align="left"><input type="date" name="name[]"></td>
</tr>
</table>
<div id="readroot" >
<table width="100%">
<tr>
<td width="12%" align="right">Origen:</td>
<td width="13%" align="left"><input type="text" name="origen" size="12"></td>
<td width="12%" align="right">Hora Salida:</td>
<td width="13%" align="left"><input type="time" name="hora_salida"></td>
<td width="12%" align="right">Destino:</td>
<td width="13%" align="left"><input type="text" name="destino" size="12"></td>
<td width="12%" align="right">Hora Llegada:</td>
<td width="13%" align="left"><input type="time" name="hora_llegada"></td>
</tr>
</table>
<input type="button" value="Eliminar"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
</div>
<span id="writeroot"></span>
<input type="button" id="moreFields" value="Añadir ruta" />
<input type="submit" value="Grabar Ruta" />
<?php echo form_close(); ?>
Oh I can solve my problem I just need to use array names for the dynamic components in the view:
<?php echo form_open('admin/grabar_ruta'); ?>
<table width="100%">
<tr>
<td width="12%" align="right">Fuente:</td>
<td width="13%" align="left"><select name="fuente">
<?php foreach($fuentes as $row) { echo '<option value="'.$row->id.'">'.$row->serial.'</option>'; } ?> </select></td>
<td width="12%" align="right">Vehículo:</td>
<td width="13%" align="left"><select name="vehiculo">
<?php foreach($vehiculos as $row) { echo '<option value="'.$row->id.'">'.$row->placa.'</option>'; } ?> </select></td>
<td width="12%" align="right">Conductor:</td>
<td width="13%" align="left"><select name="conductor">
<?php foreach($conductores as $row) { echo '<option value="'.$row->id.'">'.$row->nombre.'</option>'; } ?> </select></td>
<td width="12%" align="right">Fecha:</td>
<td width="13%" align="left"><input type="date" name="fecha"></td>
</tr>
</table>
<div id="readroot" >
<table width="100%">
<tr>
<td width="12%" align="right">Origen:</td>
<td width="13%" align="left"><input type="text" name="origen[]" size="12"></td>
<td width="12%" align="right">Hora Salida:</td>
<td width="13%" align="left"><input type="time" name="hora_salida[]"></td>
<td width="12%" align="right">Destino:</td>
<td width="13%" align="left"><input type="text" name="destino[]" size="12"></td>
<td width="12%" align="right">Hora Llegada:</td>
<td width="13%" align="left"><input type="time" name="hora_llegada[]"></td>
</tr>
</table>
<input type="button" value="Eliminar"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
</div>
<span id="writeroot"></span>
<input type="button" id="moreFields" value="Añadir ruta" />
<input type="submit" value="Grabar Ruta" />
<?php echo form_close(); ?>
i have used js to multiply but only 1st row is getting multiplied other rows are nt getting multiplied.
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("form1", $con);
error_reporting(E_ALL ^ E_NOTICE);
$nam=$_REQUEST['select1'];
$row=mysql_query("select * from inv where name='$nam'");
while($row1=mysql_fetch_array($row))
{
$Name=$row1['Name'];
$Address =$row1['Address'];
$City=$row1['City'];
$Pincode=$row1['Pincode'];
$No=$row1['No'];
$Date=$row1['Date'];
$DCNo=$row1['DCNo'];
$DcDate=$row1['DcDate'];
$YourOrderNo=$row1['YourOrderNo'];
$OrderDate=$row1['OrderDate'];
$VendorCode=$row1['VendorCode'];
$SNo=$row1['SNo'];
$descofgoods=$row1['descofgoods'];
$Qty=$row1['Qty'];
$Rate=$row1['Rate'];
$Amount=$row1['Amount'];
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
**function ram()
{
var q=document.getElementById('qty').value;
var r=document.getElementById('rate').value;
document.getElementById('amt').value=q*r;
}**
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="1315" border="0">
<script type="text/javascript">
function g()
{
form1.submit();
}
</script>
<tr>
<th>Name</th>
<th align="left"><select name="select1" onchange="g();">
<option value="" selected="selected">select</option>
<?php $row=mysql_query("select Name from inv ");
while($row1=mysql_fetch_array($row))
{ ?>
<option value="<?php echo $row1['Name'];?>"><?php echo $row1['Name'];?></option>
<?php } ?>
</select></th>
</tr>
<tr>
<th>Address</th>
<th align="left"><textarea name="Address"><?php echo $Address;?></textarea></th>
</tr>
<tr>
<th>City</th>
<th align="left"><input type="text" name="City" value='<?php echo $City;?>' /></th>
</tr>
<tr>
<th>Pincode</th>
<th align="left"><input type="text" name="Pincode" value='<?php echo $Pincode;?>'></th>
</tr>
<tr>
<th>No</th>
<th align="left"><input type="text" name="No2" value='<?php echo $No;?>' readonly="" /></th>
</tr>
<tr>
<th>Date</th>
<th align="left"><input type="text" name="Date" value='<?php echo $Date;?>' readonly="" /></th>
</tr>
<tr>
<th>DCNo</th>
<th align="left"><input type="text" name="DCNo" value='<?php echo $DCNo;?>' readonly="" /></th>
</tr>
<tr>
<th>DcDate:</th>
<th align="left"><input type="text" name="DcDate" value='<?php echo $DcDate;?>' /></th>
</tr>
<tr>
<th>YourOrderNo</th>
<th align="left"><input type="text" name="YourOrderNo" value='<?php echo $YourOrderNo;?>' readonly="" /></th>
</tr>
<tr>
<th>OrderDate</th>
<th align="left"><input type="text" name="OrderDate" value='<?php echo $OrderDate;?>' readonly="" /></th>
</tr>
<tr>
<th width="80">VendorCode</th>
<th width="1225" align="left"><input type="text" name="VendorCode" value='<?php echo $VendorCode;?>' readonly="" /></th>
</tr>
</table>
<table width="1313" border="0">
<tr>
<td width="44"> </td>
<td width="71">SNO</td>
<td width="527">DESCRIPTION</td>
<td width="214">QUANTITY</td>
<td width="214">RATE/UNIT</td>
<td width="217">AMOUNT</td>
</tr>
<?php $i=1;
$row=mysql_query("select * from inv where Name='$nam'");
while($row1=mysql_fetch_array($row))
{
$descofgoods=$row1['descofgoods'];
$Qty=$row1['Qty'];
$Rate=$row1['Rate'];
$Amount=$row1['Amount'];
?>
<tr>
<td><input type="checkbox" name="checkbox" value="checkbox" /></td>
<td><input type="text" name="No" value='<?php echo $No;?>' readonly=""/></td>
<td><input type="text" name="descofgoods" value='<?php echo $descofgoods;?>' /></td>
<td><input type="text" name="qty" maxlength="50000000" id="qty"/></td>
<td><input type="text" name="Rate" value='<?php echo $Rate;?>' id="rate" onclick="ram()";></td>
<td><input type="text" name="Amount" id="amt"/></td>
</tr>
<?php $i++;} ?>
<tr>
<th colspan="2">Print</th>
</tr>
</table>
<label></label>
</form>
</body>
</html>
I didn't read all of your code but i think problem is with your tag id it must be unique.
var q=document.getElementById('qty').value;
var r=document.getElementById('rate').value;
document.getElementById('amt').value=q*r;
javascript didn't get the other tag as you have more than one Tag with id 'qty', 'rate', 'amt', so javascript only convert the tag which comes first on the page and only multiple it.
TO AVOID THIS YOU SHOULD MAKE SURE THAT YOUR id FOR EACH TAG MUST BE UNIQUE
EDITED
1] Change your javascript function like something
function ram(id)
{
var q=document.getElementById('qty_'+id).value;
var r=document.getElementById('rate_'+id).value;
document.getElementById('amt_'+id).value=q*r;
}
2] add suffix $i to each tag
<td><input type="text" name="qty" maxlength="50000000" id="qty_<?PHP echo($i) ?>"/></td>
<td><input type="text" name="Rate" value='<?php echo $Rate;?>' id="rate_<?PHP echo($i) ?>" onclick="ram('<?PHP echo($i) ?>')";></td>
<td><input type="text" name="Amount" id="amt_<?PHP echo($i) ?>"/></td>
3] pass argument of the row in onclick function
onclick="ram('<?PHP echo($i) ?>')"
The problem you are having is that you use getElementById for this situation where you have multiple rows. An Id should be unique, so therefor it will only get the "first" match when using getElementById.
Try using parseInt():
document.getElementById('amt').value= parseInt(q) * parseInt(r);