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>
Related
Screenshot:
I want to add the same value to a table row input field, but JavaScript working for first row only. Please help me with this .
My table is
<tr align="center">
<td align="center"><input type="checkbox" name="prodid[]" value="<?php echo $row["name"]; ?>"></td>
<td align="center"><?php echo $row["name"]; ?>
<input type="hidden" name="prodname[]" value="<?php echo $row["name"]; ?>">
</td>
<td align="center"><input align="center" type="number" name="prod_price[]" value="<?php echo $row["price"]; ?>" class="form-control"><input type="hidden" class="iprice" value="<?php echo $row["price"]; ?>"></td>
<td align="center"><input type="number" class="form-control iquantity" onchange="Subtotal()" type="number" name="prod_qty[]" class="form-control"></td>
<td align="center"><input type="number" class="eachnumber" id="eachnumber" name="prodsname[]" ></td>
<td class="itotal" align="center">0</td>
</tr>
passes the value from
<input type="number" id="number" class="form-control form-control-solid ps-12" placeholder="number"/>
javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha512-jGR1T3dQerLCSm/IGEGbndPwzszJBlKQ5Br9vuB0Pw2iyxOy+7AK+lJcCC8eaXyz/9du+bkCy4HXxByhxkHf+w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js" integrity="sha512-1icA56H/QfnWMmygJLor4dORvI+7Kurg9CfXSDeJmyMJQL98LfPRk/UwCmi7NoZwbUwxMoI0tc2gJqG/Uu+ecA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$('#number').change(function() {
for (i = 0; i < eachnumber.length; i++) {
$('#eachnumber').val($(this).val());
}
});
</script>
If you want to add that value in eachnumber of all the rows then you can simply do this.
$('#number').change(function() {
$('.eachnumber').val($(this).val());
});
I just started with jQuery so im a still a newbie. Could somebody please help me with how to calculate the new price in a dynamic table. I have a dynamic table with 3 columns, Qty, Discount and Price. I need to recalculate the new price after a user enter a discount(%) in the same textbox the current price is, the subtotal and the grand total.
Here is my table:
<table class="table">
<thead><tr><th style="width:60%">Description</th><th class="centrer" style="width:10%">Qty</th><th class="centrer" style="width:10%">Discount</th><th class="centrer" style="width:20%">Price</th></tr></thead>
<tbody>
<?php
if(isset($listeArticlePourUnDossier) && count($listeArticlePourUnDossier) > 0)
{
$sousTotal = 0;
$symbol = '';
$VAT = 0;
$TTC = 0;
$iArticles = 0;
while($iArticles < count($listeArticlePourUnDossier))
{
$ARTICLE_CURRENCY = $listeArticlePourUnDossier[$iArticles]['ARTICLE_CURRENCY'];
$sousTotal = $sousTotal + ($listeArticlePourUnDossier[$iArticles]['ARTICLE_PRIX']);
?>
<tr>
<td><?php echo ($listeArticlePourUnDossier[$iArticles]['ARTICLE_NOM']); ?></td>
<td class="centrer">1</td>
<td class="centrer"><input type="text" name="txtdiscount" id="txtdiscount_<?php echo $iArticles; ?>" onkeyup="calc()"/></td>
<td class="centrer"><input type="text" name="txtPrice" id="txtPrice_<?php echo $iArticles; ?>" readonly value="<?php echo (number_format($listeArticlePourUnDossier[$iArticles]['ARTICLE_PRIX'],2)); ?>"/></td>
</tr>
<?php
$iArticles++;
}
?>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">Subtotal</td>
<td class="centrer bold"><?php echo (number_format($sousTotal,2)); ?></td>
</tr>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">VAT</td>
<td class="centrer"><?phpecho (number_format($VAT,2)); ?></td>
</tr>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">G.Total</td>
<td class="centrer bold">
<?php
$TTC = $sousTotal - $VAT;
echo (number_format($TTC,2));
?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
How to fill up the new price in the current price textbox as soon as a user enter a discount say 10%?
Thank you for your assistance.
You can fill the discounted amount in the price field like this, please check the below code, Hope it will help,
Here, updated td's, which you are using and js code.
Thanks.
<td class="centrer">
<input type="text" name="txtdiscount" value ="" id="txtdiscount_<?php echo $iArticles; ?>" onkeyup="calc(this.value,'<?php echo $iArticles; ?>')"
/>
</td>
<td class="centrer">
<input type="text" name="txtPrice" id="txtPrice_<?php echo $iArticles; ?>" readonly value="<?php echo (number_format($data['price'],2)); ?>" />
<input type="hidden" name="hidden_txtPrice" id="hidden_txtPrice_<?php echo $iArticles; ?>" readonly value="<?php echo (number_format($data['price'],2)); ?>" />
</td>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">VAT</td>
<td class="centrer">
<select name="vatDropdown" id="vatDropdown">
<option value="-1">Select VAT</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</td>
</tr>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">G.Total</td>
<td class="centrer bold" id="grandtotal">
<?php echo (number_format($TTC,2)); ?>
</td>
<input type="hidden" name="hidden_total" id="hidden_total" value="<?php echo (number_format($TTC,2)); ?>" />
</tr>
<script>
function calc(discount, article_id)
{
var price = 0;
var dis_amt = 0;
var calculatedAmt = 0;
var discount_amt = 0;
price = $("#hidden_txtPrice_"+article_id).val();
if(discount != '')
{
dis_amt = parseFloat(discount) / 100;
calculatedAmt = parseFloat(price) * parseFloat(dis_amt);
discount_amt = parseFloat(price) - parseFloat(calculatedAmt);
$("#txtPrice_"+article_id).val(discount_amt);
}
else
{
$("#txtPrice_"+article_id).val(price);
}
}
$("#vatDropdown").on('change', function(){
var dropdown_val = $(this).val();
var grandtotal = $("#hidden_total").val();
if(dropdown_val == '1')
{
var vat_dis = 15 / 100;
var vat_amt = parseFloat(grandtotal) * parseFloat(vat_dis);
var gTotal = parseFloat(grandtotal) + parseFloat(vat_amt);
$("#grandtotal").html(gTotal.toFixed(2));
}
else
{
$("#grandtotal").text(grandtotal);
}
});
</script>
I am trying to create a custom wordpress template for products. For which I need to update the Total quantity when 2 sub-quantity is increased or decreased. Also the value of total quantity will be multiplied with price.
Let's say:
sub-quantity-1 value = 2 and sub-quantity-2 value = 3,
So Total quantity value = 5 and price is 5 x $100 = $500
The problem is I am generating this input fields using wordpress loop, so all the inputs have same class & name.
Lets say: I am increasing sub-quantity for PRODUCT 1 which increases all Total Quantity for PRODUCT 1 to PRODUCT 100
PHP CODE:
<?php $wp_query = new WP_Query( array(
'post_type' => 'product',
'post__in' => array( 481, 478, 934, 178 ),
'posts_per_page' => 15,
'offset' => 0,
'orderby' => '',
'order' => 'ASC' ) );
?>
<?php if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_querys->the_post();
global $product;
$product = get_product( get_the_ID() );
?>
<table>
<thead>
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Total Quantity</th>
<th>Button</th>
</tr>
</thead>
<tbody class="products-container">
<tr class="product-<?php echo esc_attr( $product->id ); ?>">
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
<td class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">
<?php echo get_woocommerce_currency_symbol(); ?>
</span>
<?php echo $product->get_price() ?>
</span>
</td>
<td class="quantity">
<table>
<tr>
<?php echo qty-sz(); ?>
</tr>
<tr>
<?php echo qty-bn(); ?>
</tr>
</table>
</td>
<td class="quantity-total">
<?php woocommerce_quantity_input(); ?>
</td>
<td class="button">
<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
<input type="hidden" name="product_id" value="<?php echo esc_attr( $product->id ); ?>" />
<input type="hidden" name="variation_id" class="variation_id" value="0" />
<button type="submit" class="button buy-now-btn cart-btn product_type_simple add_to_cart_button ajax_add_to_cart" />Add to Cart</button>
</td>
</form>
</tr>
</tbody>
<?php endwhile; wp_reset_query();?>
</table>
GENERATED HTML CODE:
<table>
<thead>
<tr>
<th></th>
<th>Product</th>
<th>Note Box</th>
<th>Price</th>
<th>Choose Your Keyblade</th>
<th>Product Total Quantity</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="product-934" data-role="product">
<form action="/testsite/wholesale-product-page-template-custom/?add-to-cart=934" class="cart" method="post" enctype="multipart/form-data"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/plugins/woocommerce/assets/images/placeholder.png" alt="Placeholder" width="150px" height="150px"> </td>
<td class="title">
<h3>Group Product</h3>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">
$ </span>
786 </span>
</td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td class="quantity-field">
<div class="quantity">
<input step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td class="button">
<input name="add-to-cart" value="934" type="hidden">
<input name="product_id" value="934" type="hidden">
<input name="variation_id" class="variation_id" value="0" type="hidden">
<button type="submit" class="button buy-now-btn cart-btn product_type_simple add_to_cart_button ajax_add_to_cart">Add to Cart</button>
</td>
</tr>
</tbody>
<style>.product-type-variable .summary .price { display: inline-block; } .quantity { display: inline-block; }</style>
<tbody><tr class="product-719 variation-722 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/151-Sterling-Silver-Pink-Tourmaline.png" alt="Custom Key Blades-722" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K Yellow Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,150.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-yellow-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="722" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
<tr class="product-719 variation-723 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/1470935641.png" alt="Custom Key Blades-723" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K White Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,000.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-white-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="723" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
<tr class="product-719 variation-724 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/Modern-Iconic-Key-with-Black-Diamond-.png" alt="Custom Key Blades-724" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K Rose Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>950.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-rose-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="724" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
</tbody>
</table>
AND HERE IS THE JQUERY SCRIPT
<script src="https://code.jquery.com/jquery-1.11.0.js" integrity="sha256-zgND4db0iXaO7v4CLBIYHGoIIudWI5hRMQrPB20j0Qw=" crossorigin="anonymous"></script>
<script>
var quantity = 0;
$(document).ready(function () {
$('input.wh-qty').each(function () {
quantity += parseInt($(this).val());
});
$('input[name="quantity"]').val(quantity);
$('input.wh-qty').on('input', function () {
quantity = 0;
$('input.wh-qty').each(function () {
var amountInfo = parseInt($(this).val());
amountInfo = (amountInfo) ? amountInfo : 0;
quantity += amountInfo;
});
$('input[name="quantity"]').val(quantity);
});
});
</script>
I think you can give your <tr class="product-<?php... an attribute of <tr data-role="product" class="product-<?ph and then use jQuery to get and set values of each row:
$(document).ready(function(){
$('input.wh-qty').on('input', function () {
setQuantity();
});
})
const setQuantity = function(){
$.each(
$(`tr[data-role="product"]`), // add role="product" to tr
function(index,element){
const $el = $(element);
const sc = $el.find("input.sc-note.wh-qty").val();
const kw = $el.find("input.kw-note.wh-qty").val();
if(sc!=="" || kw!==""){
$el.find('input[name="quantity"]').val(
(sc*1)+(kw*1)
);
}
}
);
};
If that doesn't work could you please post the entire html so we don't need to puzzle together what the html is?
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/
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(); ?>