I have the following code:
<script>
var interval;
var minutes = 0;
var seconds = 5;
function countdown(element) {
interval = setInterval(function() {
var el = document.getElementById(element);
if(seconds == 0) {
if(minutes == 0) {
el.innerHTML = "<a href=http://www.parkho.ir/phpvms/admin/index.php/aircraftmanager/update>Hello</a>";
clearInterval(interval);
return;
} else {
minutes--;
seconds = 60;
}
}
if(minutes > 0) {
var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
} else {
var minute_text = '';
}
var second_text = seconds > 1 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
seconds--;
}, 1000);
}
</script>
<h3><?php echo $title ;?></h3>
<head>
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<script type="text/javascript" src="<?php echo fileurl('lib/js/jquery-1.3.1.min.js');?>"></script>
<script type="text/javascript" src="<?php echo fileurl('lib/js/jquery.tablesorter.js');?>"></script>
<script type="text/javascript" src="<?php echo fileurl('lib/js/jquery.tablesorter.pager1.js');?>"></script>
</head>
<body>
<div align="left" id="pager" class="pager">
<table width="50%" align="center">
<form>
<tr>
<td align="center"><img src="<?php echo fileurl('lib/images/first.png');?>" class="first"/>
<img src="<?php echo fileurl('lib/images/prev.png');?>" class="prev"/></td>
<td align="center"><input width="5" valign="top" type="text" class="pagedisplay"/></td>
<td align="center"><img src="<?php echo fileurl('lib/images/next.png');?>" class="next"/>
<img src="<?php echo fileurl('lib/images/last.png');?>" class="last"/></td>
<td align="center"><select class="pagesize">
<option value="10">5 per page</option>
<option value="20">10 per page</option>
<option value="50">25 per page</option>
</select>
</td>
</tr>
</form>
</table>
</div>
<script defer="defer">
$(document).ready(function()
{
$("#insured_list")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
}
);
</script>
<table id="insured_list" align="center" border="1" width="100%" cellpadding="0" cellspacing="0">
<thead>
<th align="center" colspan="10"><font color="black" size="6"><b>Aircraft Manager</b></font></th>
<tr>
<td align="left" colspan="0"><input type="button" value="Inactive All Aircraft"></td>
<td align="left" colspan="0"><input type="button" value="Active All Aircraft"></td>
<td align="left" colspan="0"><input type="button" value="Update Status"></td>
<td align="left" colspan="0"><input type="button" value="Reset Status"></td>
</tr>
<tr>
<td align="center"><b>ID</b></td>
<td align="center"><b>Name</b></td>
<td align="center"><b>Registration</b></td>
<td align="center"><b>Location</b></td>
<td align="center"><b>Status</b></td>
<td align="center"><b>Time</b></td>
<td align="center" colspan="2"><b>Options</b></td>
</tr>
</thead>
<tbody)
<?php
$i=0;
foreach($aircrafts as $aircraft)
{
$air = AManagerData::getaircraftdetail($aircraft->id);
?>
<tr>
<td align="center"><?php echo $aircraft->id ;?></td>
<td align="center"><?php echo $aircraft->fullname ;?></td>
<td align="center"><?php echo $aircraft->registration ;?></td>
<td align="center">
<?php
$location = AManagerData::getaircraftlocation($aircraft->id);
echo $location->arricao;
?>
</td>
<td align="center">
<?php
$param = AManagerData::getaircraftparam($aircraft->id);
$stat = $param->start;
echo $stat.'%';
?>
</td>
<td align="center">
<div id='countdown'></div>
</td>
<td align="center">
<a class="{button:{icons:{primary:'ui-icon-arrowthick-1-s'}}}" href="#" onclick="$('#details_dialog_<?php echo $aircraft->id;?>').toggle()"><input type="button" Value="Parameters"></a>
</form>
</td>
<td align="center">
<?php
if(PilotGroups::group_has_perm(Auth::$usergroups, FULL_ADMIN))
{
$pilotid = $pilot->pilotid;
?>
<form id="deletepilot" method="get" action="<?php echo adminurl('/pilotmanager/deletePilot');?>">
<input type="hidden" name="pilotid" value="<?php echo $pilotid ;?>" />
<input type="submit" name="submit" value="Delete" onclick="return doublecheck()" ;?>
</form>
<?php
}
?>
</td>
</tr>
<tr>
<td colspan="10">
<form action="<?php echo adminaction('/aircraftmanager/param');?>" method="GET">
<table align="center" border="0" id="details_dialog_<?php echo $aircraft->id;?>" style="display:none" width="100%">
<tr>
<th align="center" bgcolor="black" colspan="0"><font color="white">Aircraft Parameter Setting</font></th>
</tr>
<tr>
<td><b> Start:</b></td>
<td><input type="radio" name="perstart" value="100" checked="checked" >100%
<input type="radio" name="perstart" value="75" >75%
<input type="radio" name="perstart" value="50" >50%</td>
<td><b> Hard Landing:</b></td>
<td><input type="radio" name="perhard" value="30" checked="checked" >30%
<input type="radio" name="perhard" value="20" >20%
<input type="radio" name="perhard" value="15" >15%</td>
</tr>
<tr>
<td><b> Smooth Landing:</b></td>
<td><input type="radio" name="persoft" value="2" checked="checked" >2%
<input type="radio" name="persoft" value="4" >4%
<input type="radio" name="persoft" value="10" >10%</td>
<td><b> Before Inactivity:</b></td>
<td><input type="radio" name="perhour" value="800" checked="checked" >800 hrs
<input type="radio" name="perhour" value="600" >600 hrs
<input type="radio" name="perhour" value="400" >400 hrs</td>
</tr>
<tr>
<td><b> Maintenance Period:</b></td>
<td><input type="radio" name="mhours" value="12" checked="checked" >12 hrs
<input type="radio" name="mhours" value="24" >24 hrs
<input type="radio" name="mhours" value="36" >36 hrs</td>
<td><b> Maximum Landing Rate:</b></td>
<td><input type="radio" name="maxlr" value="-600" checked="checked" >600 ft/m
<input type="radio" name="maxlr" value="-450" >450 ft/m
<input type="radio" name="maxlr" value="-300" >300 ft/m</td>
</tr>
<tr><td colspan="4"><hr></td></tr>
<tr>
<td colspan="0" align="center"><input type="hidden" name ="aircraft" value="<?php echo $aircraft->id ;?>"><input type="submit" value="Apply Settings"></td>
</tr>
</table>
</form>
</td>
</tr>
<?php
}
?>
<script type="text/javascript">
function doublecheck()
{
var answer = confirm("Are you sure you want to delete the aircraft?")
if (answer) {
return true;
}
return false;
}
</script>
</tbody>
</table>
</body>
What I'm trying to do is to show a countdown timer in the foreach() loop but only the first record shows the timer and the rest will show blank.
This is the line where I show the timer:
<td align="center">
<div id='countdown'></div>
</td>
Please tell me where I'm wrong or if it's doable this way.
Thanks
Related
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?
After user fill up the data and click "Generate Report" for the confirmation .
Once user click the Generate Report button and it's display confirmation page. The issue is , it's only display the quantity data that insert by user. Now i want to display "Pre Price" , " Quantity " , " Item Price "
I'm tried to insert multiple variable on foreach statement so that I can view all the data insert by user. How to solve it?
<html>
<body>
<table>
<!-- Table Header -->
<form action="extra.php" method="post">
<thead>
<tr>
<td><span class="icon icon-tag"></span> Item</td>
<td><span class="icon icon-layers"></span> Surface</td>
<td><span class="icon icon-tag"></span> Unit Price</td>
<td><span class="icon icon-cursor-move"></span> Quantity</td>
<td><span class="icon icon-basket"></span> Item Price</td>
</tr>
</thead>
<!-- End of Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td><strong>Wardrobes</strong></td>
<td>
<div class="btn-group"></div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<script>
function getTotal() {
var total = 0;
for (var i = 0, n = document.querySelectorAll(".tr-item").length; i < n; i++) {
var price = document.getElementById('unitprice_' + i).value;
var quantity = document.getElementById('quantity_' + i).value;
var subtotal = price * quantity;
document.getElementById('subtotal_' + i).value = subtotal.toFixed(2);
total += subtotal;
}
document.getElementById("total").value = total.toFixed(2);
}
window.onload = function() {
for (var i = 0, n = document.querySelectorAll(".tr-item").length; i < n; i++) {
document.getElementById('quantity_' + i).onkeyup = getTotal;
}
getTotal();
}
</script>
<tr class="tr-item">
<td>Full height Wardrobe (Swing door)</td>
<td>
<script>
function myFunction1(btn1) {
document.getElementById("unitprice_0").value = btn1;
}
</script>
<div class="btn-group surface-options-group">
<button type="button" name="btn1" onclick="myFunction1(this.value)" value="360">Laminates</button>
<button type="button" name="btn1" onclick="myFunction1(this.value)" value="240">Veneer</button>
</div>
</td>
<td>SGD$<input type="text" name="unitprice" id="unitprice_0" value="360" size="1" readonly></td>
</td>
<td>
<input type="number" name="quantity[Full height Wardrobe (Swing door)]" id="quantity_0" min="0" max="10000" value="0">
<span class="quantity-unit">ft.</span>
</td>
<td><input type="text" name="subtotal" id="subtotal_0" size="5" maxlength="9" value="0" readonly/> </td>
</tr>
<tr id="tr-item-2" class="tr-item">
<td>Full height Wardrobe (Normal sliding door)</td>
<td>
<div class="btn-group surface-options-group">
<button type="button" name="btn2" onclick="myFunction2(this.value)" value="360">Laminates</button>
<button type="button" name="btn2" onclick="myFunction2(this.value)" value="240">Veneer</button>
</div>
<script>
function myFunction2(btn2) {
document.getElementById("unitprice_1").value = btn2;
}
</script>
</td>
<td>SGD$<input type="text" name="unitprice" id="unitprice_1" value="360" size="1" readonly></td>
</td>
<td>
<input type="number" name="quantity[Full height Wardrobe (Normal sliding door)]" id="quantity_1" min="0" max="10000" value="0">
<span class="quantity-unit">ft. SGD$</span>
</td>
<td><input type="text" name="subtotal" id="subtotal_1" size="5" maxlength="9" value="0.00" readonly/> </td>
</tr>
<tr class="tr-item">
<td>Full height Open Wardrobe</td>
<td>
<div class="btn-group surface-options-group">
<button type="button" name="btn3" onclick="myFunction3(this.value)" value="200">Polyken</button>
<button type="button" name="btn3" onclick="myFunction3(this.value)" value="330">Veneer</button>
</div>
<script>
function myFunction3(btn3) {
document.getElementById("unitprice_2").value = btn3;
}
</script>
</td>
<td>SGD$<input type="text" name="unitprice" id="unitprice_2" value="200" size="1" readonly></td>
</td>
<td>
<input type="number" name="quantity[Full height Open Wardrobe]" id="quantity_2" min="0" max="10000" value="0">
<span class="quantity-unit">ft. SGD$</span>
</td>
<td><input type="text" name="subtotal_2" id="subtotal_2" size="5" maxlength="9" value="0.00" readonly/> </td>
</tr>
</table>
<br>
<br>
<center><button type="submit" name="btUpdate">Generate Report</button></center>
</div>
<div id="pricing-total">
<h3><span class="icon icon-calculator"></span> Total Price</h3>
<p>SGD$<input type="text" id="total" value="0" /></p>
</div>
</form>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Confirmation Page</title>
</head>
<body>
<?php
//Get the input.
if (isset($_POST['btUpdate'])) {
$stockData = $_POST['quantity'];
}
?>
<p> Confirmation.</p>
<table width="559" border="1" cellpadding="5" cellspacing="0">
<tr>
<th width="407">Product</th>
<th width="126">Per Price</th>
<th width="126">Quantity</th>
<th width="126">Iteam Price</th>
</tr>
<?php
$stock_total = 0;
foreach ($stockData as $key => $value) {
?>
<?php
$stock_total = $stock_total + $value;
if (!empty($value)) {
?>
<tr>
<td><?php echo $key; ?></td>
<td></td>
<td><?php echo $value; ?></td>
<td></td>
</tr>
<?php }
} ?>
<tr>
<td >Total Items</td>
<td width="126"><?php print $stock_total; ?></td>
</tr>
</table>
</body>
</html>
I created arrays for all the inputs, i.e. for product, unitprice, quantity and subtotal. And onclick of the buttons, changed the unit price along with product name in the form hidden input for the product. Also recalculated subtotal and total.
<html>
<body>
<form action="extra.php" method="post">
<table>
<!-- Table Header -->
<thead>
<tr>
<td><span class="icon icon-tag"></span> Item</td>
<td><span class="icon icon-layers"></span> Surface</td>
<td><span class="icon icon-tag"></span> Unit Price</td>
<td><span class="icon icon-cursor-move"></span> Quantity</td>
<td><span class="icon icon-basket"></span> Item Price</td>
</tr>
</thead>
<!-- End of Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td><strong>Wardrobes</strong></td>
<td>
<div class="btn-group"></div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tr-item">
<td>Full height Wardrobe (Swing door)</td>
<td>
<script>
function myFunction1(btn1) {
document.getElementById("unitprice_0").value = btn1;
document.getElementById("product_0").value = "Full height Wardrobe (Swing door) - " + btn1.textContent;
document.getElementById("unitprice_0").value = btn1.value;
}
</script>
<div class="btn-group surface-options-group">
<button type="button" name="btn1" onclick="myFunction1(this);getTotal();" value="360">Laminates</button>
<button type="button" name="btn1" onclick="myFunction1(this);getTotal();" value="240">Veneer</button>
</div>
<input type="hidden" name="product[]" value="Full height Wardrobe (Swing door) - Laminates" id="product_0" />
</td>
<td>SGD$<input type="text" name="unitprice[]" id="unitprice_0" value="360" size="1" readonly></td>
</td>
<td>
<input type="number" name="quantity[]" id="quantity_0" min="0" max="10000" value="0">
<span class="quantity-unit">ft.</span>
</td>
<td><input type="text" name="subtotal[]" id="subtotal_0" size="5" maxlength="9" value="0" readonly/> </td>
</tr>
<tr id="tr-item-2" class="tr-item">
<td>Full height Wardrobe (Normal sliding door)</td>
<td>
<div class="btn-group surface-options-group">
<button type="button" name="btn2" onclick="myFunction2(this);getTotal();" value="360">Laminates</button>
<button type="button" name="btn2" onclick="myFunction2(this);getTotal();" value="240">Veneer</button>
</div>
<input type="hidden" name="product[]" value="Full height Wardrobe (Normal sliding door) - Laminates" id="product_1" />
<script>
function myFunction2(btn2) {
document.getElementById("product_1").value = "Full height Wardrobe (Normal sliding door) - " + btn2.textContent;
document.getElementById("unitprice_1").value = btn2.value;
}
</script>
</td>
<td>SGD$<input type="text" name="unitprice[]" id="unitprice_1" value="360" size="1" readonly></td>
</td>
<td>
<input type="number" name="quantity[]" id="quantity_1" min="0" max="10000" value="0">
<span class="quantity-unit">ft. SGD$</span>
</td>
<td><input type="text" name="subtotal[]" id="subtotal_1" size="5" maxlength="9" value="0.00" readonly/> </td>
</tr>
<tr class="tr-item">
<td>Full height Open Wardrobe</td>
<td>
<div class="btn-group surface-options-group">
<button type="button" name="btn3" onclick="myFunction3(this);getTotal();" value="200">Polyken</button>
<button type="button" name="btn3" onclick="myFunction3(this);getTotal();" value="330">Veneer</button>
</div>
<input type="hidden" name="product[]" value="Full height Open Wardrobe - Polyken" id="product_2" />
<script>
function myFunction3(btn3) {
document.getElementById("product_2").value = "Full height Open Wardrobe - " + btn3.textContent;
document.getElementById("unitprice_2").value = btn3.value;
}
</script>
</td>
<td>SGD$<input type="text" name="unitprice[]" id="unitprice_2" value="200" size="1" readonly></td>
</td>
<td>
<input type="number" name="quantity[]" id="quantity_2" min="0" max="10000" value="0">
<span class="quantity-unit">ft. SGD$</span>
</td>
<td><input type="text" name="subtotal[]" id="subtotal_2" size="5" maxlength="9" value="0.00" readonly/> </td>
</tr>
</table>
<br>
<br>
<center><button type="submit" name="btUpdate">Generate Report</button></center>
</div>
<div id="pricing-total">
<h3><span class="icon icon-calculator"></span> Total Price</h3>
<p>SGD$<input type="text" name="grandtotal" id="total" value="0" readonly /></p>
</div>
</form>
<!-- <script type="text/javascript" src="js/script.js"></script>-->
<script>
function getTotal() {
var total = 0;
for (var i = 0, n = document.querySelectorAll(".tr-item").length; i < n; i++) {
var price = document.getElementById('unitprice_' + i).value;
var quantity = document.getElementById('quantity_' + i).value;
var subtotal = price * quantity;
console.log(price + " " + quantity);
document.getElementById('subtotal_' + i).value = subtotal.toFixed(2);
total += subtotal;
}
document.getElementById("total").value = total.toFixed(2);
}
window.onload = function() {
for (var i = 0, n = document.querySelectorAll(".tr-item").length; i < n; i++) {
document.getElementById('quantity_' + i).onchange = getTotal;
}
getTotal();
};
</script>
</body>
</html>
extra.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Confirmation Page</title>
</head>
<body>
<p> Confirmation.</p>
<table width="559" border="1" cellpadding="5" cellspacing="0">
<tr>
<th width="407">Product</th>
<th width="126">Per Price</th>
<th width="126">Quantity</th>
<th width="126">Iteam Price</th>
</tr>
<?php
$i=0;
$total_items = 0;
foreach($_POST["product"] as $key) {
If($_POST["quantity"][$i]!=0) {
echo "<tr>";
echo "<td>".$_POST["product"][$i]."</td>";
echo "<td>".$_POST["unitprice"][$i]."</td>";
echo "<td>".$_POST["quantity"][$i]."</td>";
echo "<td>".$_POST["subtotal"][$i]."</td>";
echo "</tr>";
}
$total_items += $_POST["quantity"][$i];
$i++;
}
?>
<tr>
<td >Total Items</td>
<td colspan="2"><?php echo $total_items; ?></td>
<td>Total - <?php echo $_POST["grandtotal"] ?></td>
</tr>
</table>
</body>
</html>
I am trying to create a form where the user can click on a button that will create a blank row at the bottom of the table. They can click this button for as many rows as they want to add. For some reason, when I click on the button I created, it goes back to my index.php page instead of just adding the row to the current page. Here is some of the code. Please let me know if there is more information that I should be adding here.
Thank you
JavaScript:
function new_line() {
var t = document.getElementById("desc_table");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
var x = rows[1].cloneNode(true);
x.style.display = "";
r.parentNode.insertBefore(x, r);
}
<?php include 'connect.php'; ?>
<!DOCTYPE xhtml>
<html>
<head>
<style type="text/css"><?php //include'css\file.css';?></style>
<script type="text/javascript" src="js/new_line.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<body>
<button id="home" onclick="home_btn()">Home</button>
<title>New Estimate</title>
<h1>New Estimate</h1>
<?php
$sql = $conn->prepare('SELECT * FROM entire_info');
$sql -> execute();
$result = $sql ->get_result();
if ($result->num_rows!=0) {
$entire_info=$result->fetch_assoc();
}
else{
echo'Cannot find company information<br>';
}
?>
<form>
<table id="estimate_table">
<tr>
<td>
<?php
echo '<h1>'.$entire_info['name'].'</h1><br>'.
$entire_info['str_address'].'<br>'.
$entire_info['city'].', '.$entire_info['province'].' '.$entire_info['postal']
.'<br>Phone:'.$entire_info['phone'].'<br>Fax:'.$entire_info['fax'].'<br>'.$entire_info['email'].'<br>';
?>
<br>
</td>
<td colspan="3" style="text-align: right;"><?php echo '<h1>Estimate</h1>'; ?></td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="vertical-align: top;">
For:<br>
<select name="estimate_for">
<?php
$sql = $conn->prepare('SELECT * FROM company');
$sql -> execute();
$result = $sql ->get_result();
if ($result->num_rows>0) {
while ($row=$result->fetch_assoc()) {
$company_name = $row['company'];
echo '<option value="'.$company_name.'">'.$company_name.'</option>';
}
}
else{
echo'Cannot find company information<br>';
}
?>
</select>
</td>
<td>
Job:<br> <textarea name="job_name" style="width: 200px ! important;" style="height: 30px ! important;"></textarea>
</td>
</tr>
</table>
</td>
<td colspan="3" style="text-align: right;">
Invoice#: <br>
Date: <input type="text" name="estimate_date" value="<?php echo date('M d, Y'); ?>">
</td>
</tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<table id="desc_table">
<tr>
<td><font><br><h3>Description</h3></font></td>
<td><font><h3>Hours</h3></font></td>
<td><font><h3>Rate</h3></font></td>
<td><font><h3>Amount</h3></font></td>
</tr>
<tr>
<td ><textarea name="description" style="width: 400px" style="height: 100px ! important;"></textarea></td>
<td> <input type="text" name="hours"></td>
<td> <input type="text" name="rate"></td>
<td><input type="text" name="amount"></td>
<td>
<button onclick="new_line();">+</button>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: right;"><h3>Subtotal</h3></td>
<td><input type="text" name="subtotal"></td>
</tr>
<tr>
<td colspan="3" style="text-align: right;"><h3>GST (#87221 2410)
</h3></td>
<td><input type="text" name="gst"></td>
</tr>
<tr>
<td colspan="3" style="text-align: right;"><h3>Total</h3></td>
<td><input type="text" name="subtotal"></td>
</tr>
</table>
</form>
</head>
</body>
</html>
Your button is inside a <form> so by default it will behave like a submit button.
You have to set its type to a normal button by adding the type attribute:
<button onclick="new_line();" type="button">+</button>
i am very new to php and have no idea of javascript, have done all js work using tutorials.Also tried to use existing solutions from stackoverflow, but no success !
What i am trying to do is trying to update database values using 'submit' button on the basis of values called from 'select option'.
Problem is that no data is getting updated in DB after i click on submit button (on viewtest.php), I have also tried to add the 'update.php' to form action.
Here's the screenshot of viewtest.php
here's my code:
viewtest.php
<form method="POST" action="">
<table border="1px"><tr> <td>
<select required name="tstname" id="test" onChange="fetch_ques()">
<option> Select Test Name</option>
<?php
$res=mysqli_query($connection,"select * from test_detail");
while($row=mysqli_fetch_array($res))
{
?>
<option value="<?php echo $row["test_name"]; ?>">
<?php echo
$row["test_name"]; echo' - - ['. $row['test_category'].']'; ?> </option>
<?php
}
?>
</select>
</div>
<td>
<div id="qnos"><select></select></div></td></tr>
<tr><td colspan="2" align="center">
<input type="submit" name="btnSubmit" id="vform" value="Update Question"> </td></tr>
</form>
</table>
<div id="ques"></div>
<script type="text/javascript">
function fetch_ques()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","getq.php?
tstnm="+document.getElementById("test").value,false); // function id
xmlhttp.send(null);
document.getElementById("qnos").innerHTML=xmlhttp.responseText; // div id
}
function display_ques()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","displayq.php?
qnos="+document.getElementById("quesdd").value,false);
xmlhttp.send(null);
document.getElementById("ques").innerHTML=xmlhttp.responseText;
}
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#vform").submit(); (function()
// document.getElementById("vform").submit();(function()
{
location.href='update.php?
qno='+$("#quesno").val()+'&qn='+$("#ques").val()+'&c1='+$("#a1").val()+'&c2='+$
("#a2").val()+'&c3'+$("#a3").val()+'&c4='+$("#a4").val()+'&cr='+$("#cr").val();
});
});
</script>
<?php
if(isset($_GET['st']) && $_GET['st'] !== "")
{
echo"updated";
}
else echo "Error: ".mysqli_errno();
?>
displayq.php //Used to fetch data in select menu
<?php
include '../connect.php';
$quesno=$_GET["qnos"];
if($quesno!="")
{
$qry=mysqli_query($connection,"select * from quesadd where quesid='$quesno'");
echo "<table name='ques'>";
while($ftc=mysqli_fetch_array($qry))
{
?>
<form method="POST" action="">
<table name="ques">
<tr><td align="center" colspan="2"> <!-- // Comment <input type="submit" name="submit" id="upq" value="Update Question">--></td> </tr>
<tr> <td align="center"> <b> Question : <input type="text" id="quesno" value="<?php echo $ftc["quesid"];?>" disabled></b></td>
<td> <textarea name="ques" id="ques" cols="100" rows="3" placeholder="Please Input The Question Here !"> <?php echo $ftc['ques'];?></textarea> </td> </tr>
<tr> <td width="25%" align="center" colspan="2"> <br> <b>Choices</b> </td> </tr>
<tr> <td align="center" colspan="2"><b>1.</b> <input type="text" id="a1" name="a1" value="<?php echo $ftc['c1'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>2.</b> <input type="text" id="a2" size="20px" name="a2" value="<?php echo $ftc['c2'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>3.</b> <input type="text" id="a3" size="20px" name="a3" value="<?php echo $ftc['c3'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>4.</b> <input type="text" id="a4" size="20px" name="a4" value="<?php echo $ftc['c4'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b><font color="maroon">Correct Answer</font></b> <input type="text" size="20px" id="cr" name="correct" value="<?php echo $ftc['answer'];?>"> </td> </tr>
</table>
</form>
<?php
}
echo "</table>";
}
?>
</tr> </td>
</table>
</form>
update.php //Used to update question by getting values from 'viewtest.php'
<?php
include '../connect.php';
$qn=$_GET['qno'];
$qname=$GET['qn'];
$a1=$GET['c1'];
$a2=$GET['c2'];
$a3=$GET['c3'];
$a4=$GET['c4'];
$acr=$GET['cr'];
$update=mysqli_query($connection,"update quesadd SET ques='$qname',
c1='$a1',c2='$a2',c3='$a3',c4='$a4',answer='$acr' where quesid='$qn' ");
if($update==true)
{
header('location:viewtest.php?st=true');
}
?>
I can see multiple problems, don't know if all the problems will go away but it will help.
$("#vform").submit(); (function()
The line above says if a <form> with the id="vform" has been submitted, execute this function. Your form does not have an id so it will never trigger. One other problem is that the function is not part of the trigger. It should be something like
$("#vform").submit(function()
The complete code could look like:
<script type="text/javascript">
$(document).ready(function(){
$("#vform").submit(function(e){
e.preventDefault();
location.href='update.php?qno='+$("#quesno").val()+'&qn='+$("#ques").val()+'&c1='+$("#a1").val()+'&c2='+$("#a2").val()+'&c3'+$("#a3").val()+'&c4='+$("#a4").val()+'&cr='+$("#cr").val();
return false;
});
});
</script>
Use AJAX to submit your form and refresh/redirect the page with javascript.
viewtest.php
<?php
include '../connect.php';
?>
<form method="POST" action="">
<table border="1px">
<tr>
<td>
<select required name="tstname" onchange="display_ques()" id="test">
<option> Select Test Name</option>
<?php
$res = mysqli_query($connection, "select * from test_detail");
while ($row = mysqli_fetch_array($res)) {
?>
<option value="<?php echo $row["test_id"]; ?>">
<?php echo
$row["test_name"];
echo ' - - [' . $row['test_category'] . ']'; ?> </option>
<?php
}
?>
</select>
</td>
<td>
<div id="qnos">
<select>
<!-- put code here for showing question id/number -->
</select></div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="btnSubmit" id="vform" value="Update Question"></td>
</tr>
</table>
</form>
<div id="ques"></div>
<h1 id="status"></h1>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function display_ques() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("ques").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "displayq.php?qnos=" + document.getElementById("test").value, true);
xmlhttp.send(null);
}
function fetch_ques() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "getq.php?tstnm = " + document.getElementById("test").value, false); // function id
xmlhttp.send(null);
document.getElementById("qnos").innerHTML = xmlhttp.responseText; // div id
}
$(document).ready(function () {
$('#vform').on('click', function (e) {
e.preventDefault();
var data = $('form#update').serialize();
$.post('update.php', data, function (response) {
// response is the data returned from php echo json_encode(['results' => true/false]), from update.php
var res = JSON.parse(response);
if (res.results == true) {
$('#status').html('Data was updated');
} else {
$('#status').html('Error occured while trying to update data.');
console.log(response);
}
});
});
});
</script>
I have given your form and id to be able to serialize it using jQuery and I have also added a hidden input to hold the id of the current question.
displayq.php
<?php
include '../connect.php';
$quesno = $_GET["qnos"];
if($quesno != "") : ?>
<form id="update" method="POST" action=""> <!-- added an id to the form -->
<table name="ques">
<?php
$qry = mysqli_query($connection,"select * from quesadd where quesid='$quesno'");
while($ftc = mysqli_fetch_array($qry)) : ?>
<tr><td align="center" colspan="2"> <!-- // Comment <input type="submit" name="submit" id="upq" value="Update Question">--></td> </tr>
<tr> <td align="center"> <b> Question : <input type="text" id="quesno" value="<?php echo $ftc["quesid"];?>" disabled></b></td>
<td> <textarea name="ques" id="ques" cols="100" rows="3" placeholder="Please Input The Question Here !"> <?php echo $ftc['ques'];?></textarea> </td> </tr>
<!-- added this hidden input to hold the question number -->
<input type="text" id="quesno" name="quesno" value="<?php echo $ftc["quesid"];?>" hidden>
<tr> <td width="25%" align="center" colspan="2"> <br> <b>Choices</b> </td> </tr>
<tr> <td align="center" colspan="2"><b>1.</b> <input type="text" id="a1" name="a1" value="<?php echo $ftc['c1'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>2.</b> <input type="text" id="a2" size="20px" name="a2" value="<?php echo $ftc['c2'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>3.</b> <input type="text" id="a3" size="20px" name="a3" value="<?php echo $ftc['c3'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>4.</b> <input type="text" id="a4" size="20px" name="a4" value="<?php echo $ftc['c4'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b><font color="maroon">Correct Answer</font></b> <input type="text" size="20px" id="cr" name="correct" value="<?php echo $ftc['answer'];?>"> </td> </tr>
<?php endwhile; ?>
</table>
</form>
<?php endif; ?>
Then in your update.php you can access the values using $_POST
<?php
include '../connect.php';
$qn = trim($_POST['quesno']);
$qname = trim($_POST['ques']);
$a1 = trim($_POST['a1']);
$a2 = trim($_POST['a2']);
$a3 = trim($_POST['a3']);
$a4 = trim($_POST['a4']);
$acr = trim($_POST['correct']);
$sql = "update quesadd SET ques='$qname', c1='$a1',c2='$a2',c3='$a3',c4='$a4',answer='$acr' where quesid='$qn'";
if (mysqli_query($connection, $sql)) {
// returning data to jQuery, as response
// jQuery will parse this as json {results: true}
echo json_encode(['results' => true]);
} else {
// returning data to jQuery, as response
// jQuery will parse this as json {results: false}
echo json_encode(['results' => false]);
}
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(); ?>