I have the form below. Using the buttons, the value in the text field should be increase or decreased. the decrease button works fine, but the increase button simply appends a '10' to the end of the number, so 100 will become 10010, rather than 110. Can someone let me know how to fix this?
<form name="hello" id="hello">
<table border=0>
<tr>
<td width=200>
<input type=text id="input" style="height: 30px; width: 200px" name=amount value=5>
</td>
<td>
<table border=0>
<tr height=12><td width=20>
<input type=button value="+" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value+=10;">
</td></tr>
<tr height=12><td width=20>
<input type=button value="-" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value-=10;">
</td></tr>
</table>
</td>
</tr>
</table>
</form>
Your javascript is treating it like a string concatenation. Parse the value into an int, do the math, and then set the value.
The onClick for your + button
onClick="javascript: this.form.amount.value = parseInt(this.form.amount.value, 10) + 10;"
Here's some code that will work:
<form name="hello" id="hello">
<table border=0>
<tr>
<td width=200>
<input type=text id="input" style="height: 30px; width: 200px" name=amount value=5>
</td>
<td>
<table border=0>
<tr height=12><td width=20>
<input type=button value="+" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value=parseInt(this.form.amount.value,10)+10;">
</td></tr>
<tr height=12><td width=20>
<input type=button value="-" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value=parseInt(this.form.amount.value,10)-10;">
</td></tr>
</table>
</td>
</tr>
</table>
</form>
parseInt() is required.
Use this
<form name="hello" id="hello">
<table border=0>
<tr>
<td width=200>
<input type=text id="input" style="height: 30px; width: 200px" name=amount value=5>
</td>
<td>
<table border=0>
<tr height=12><td width=20>
<input type=button value="+" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript: this.form.amount.value = parseInt(this.form.amount.value) + 10;">
</td></tr>
<tr height=12><td width=20>
<input type=button value="-" style="height: 15px; width: 25px; text-align:center; vertical-align:center; font-size:8px;" onClick="javascript:this.form.amount.value-=10;">
</td></tr>
</table>
</td>
</tr>
</table>
</form>
The code for the onClick event should read: javascript:this.form.amount.value=Number(this.form.amount.value)+10;
Javascript doesn't have a string concatenation operator like PHP, so you have to cast it as a number before you do any arithmetic on it.
Javascript is interpreting the value of the text field as a string. You can use parseInt() to have the value turned into a number.
javascript:this.form.amount.value=parseInt(this.form.amount.value, 10)+10;
You need to typecast this.form.amount.value to Integer, else it will be treated as a String. Use parseInt() for this.
Related
I have a table in HTML that I need to convert into excel to complete an order to be sent as eMail attachment.
The table itself is a basket for orders. The client adds the products, the page loads more details from the database (most of the HTML table code is produced in C#). Some Javascript to update the total based on the quantity, etc.
Problem is that for my order report I need to extract all info from different scenarios. Some info is inside the tag, some other is in the “value” propertie and some is modified with javascript.
Most examples in stackOverflow are about getting the info from the tag and totally impossible to adapt to my need.
I have already rebuilt the code for this specific page twice so I wouldn’t be surprised if someone says the structure is all wrong and I need to do it another way.
Am I using inputs wrong?
<table id="tableReport" class="tablePanier">
<tbody>
<tr>
<th class="titles">GenCod</th>
<th class="titles">Auteur</th>
<th class="titles">Titre</th>
<th class="titles">Quantite</th>
<th class="titles">PrixTTC</th>
<th class="titles">TotalPrixTTC</th>
<th class="titles">Delete</th>
</tr>
<tr class="line_hover">
<td>9782871428374</td>
<td>WARNES, TIM</td>
<td>FICHU CANETON</td>
<td>
<input
id="Quantity9782871428374"
onclick="ReCalculateTotal(9782871428374)"
value="1"
min="1"
type="number"
name="fname"
style=" width: 100px; text-align: center; "
/>
</td>
<td id="Prix_TTC">
<input
id="Prix_TTC9782871428374"
type="text"
value="5.2"
name="Prix_TTC"
style=" width: 100px; text-align: center; "
disabled=""
/>
</td>
<td>
<input
id="Total9782871428374"
type="text"
name="fname"
value="5.2"
style=" width: 100px; text-align: center; "
disabled=""
/>
</td>
<td>
<a href="../panierdecommande.aspx?remove=9782871428374">
<input
type="button"
value="Retirer"
name="fname"
style=" width: 100px; text-align: center; "
/></a>
</td>
</tr>
<tr class="line_hover">
<td>9791021406605</td>
<td>Cuenca, Catherine</td>
<td>REINE MARGOT (LA)</td>
<td>
<input
id="Quantity9791021406605"
onclick="ReCalculateTotal(9791021406605)"
value="1"
min="1"
type="number"
name="fname"
style=" width: 100px; text-align: center; "
/>
</td>
<td id="Prix_TTC">
<input
id="Prix_TTC9791021406605"
type="text"
value="12.95"
name="Prix_TTC"
style=" width: 100px; text-align: center; "
disabled=""
/>
</td>
<td>
<input
id="Total9791021406605"
type="text"
name="fname"
value="12.95"
style=" width: 100px; text-align: center; "
disabled=""
/>
</td>
<td>
<a href="../panierdecommande.aspx?remove=9791021406605">
<input
type="button"
value="Retirer"
name="fname"
style=" width: 100px; text-align: center; "
/></a>
</td>
</tr>
<tr class="line_hover">
<td>9782371262737</td>
<td>Stone, Liv</td>
<td>Initie-moi. Mes jours contre tes nuits</td>
<td>
<input
id="Quantity9782371262737"
onclick="ReCalculateTotal(9782371262737)"
value="1"
min="1"
type="number"
name="fname"
style=" width: 100px; text-align: center; "
/>
</td>
<td id="Prix_TTC">
<input
id="Prix_TTC9782371262737"
type="text"
value="14.9"
name="Prix_TTC"
style=" width: 100px; text-align: center; "
disabled=""
/>
</td>
<td>
<input
id="Total9782371262737"
type="text"
name="fname"
value="14.9"
style=" width: 100px; text-align: center; "
disabled=""
/>
</td>
<td>
<a href="../panierdecommande.aspx?remove=9782371262737">
<input
type="button"
value="Retirer"
name="fname"
style=" width: 100px; text-align: center; "
/></a>
</td>
</tr>
</tbody>
</table>
You can use jquery datatable for solution
For example:
https://datatables.net/extensions/buttons/examples/initialisation/export.html
You can trigger the standard button if you want.
Call DataTables export functions from JavaScript
I have been working on this for days and can't seem to get to the bottom of it.
Ive reduced the problem to this.
I have this form as shown below:
<body>
<form name="record" method="post" action="process.php">
<input type="hidden" name="email_address" />
<input type="hidden" name="postcode" />
</form>
<!--
function doLogin() {
document.record.submit();
}
//-->
</script>
<!-- $(endif) -->
<table width="100%" style="margin-top: 10%;">
<tr>
<td align="center" valign="middle">
<br />
<table width="240" height="240" style="border: 1px solid #ffcccc;
padding-top: 5px; padding-bottom: 5px;" cellpadding="0"
cellspacing="0">
<td align="center" valign="bottom" style="padding-top: 5px;
padding-bottom: 5px;" height="175" colspan="2">
<form name="login" action="<?php echo $linkloginonly; ?>"
method="post" onSubmit="return doLogin()" >
<input type="hidden" name="dst" value="<?php echo
$linkorig; ?>" />
<input type="hidden" name="popup" value="true" />
<table width="100" style="padding-top: 5px; padding-
bottom: 5px;"
<tr align="center" valign="top" height="50"
colspan="2" style="padding-top: 5px; padding-bottom: 5px;"><img
src="wi.png" height="41" width="200" style="padding-top: 5px; padding-
bottom: 5px;"></tr>
<tr style="padding-top: 5px; padding-bottom:
5px;"><img src="home.jpg" style="padding-top: 5px; padding-bottom:
5px;"></tr>
<div class="notice" style="color: #039bc3; font-size:
9px; padding-top: 5px; padding-bottom: 5px;">Free WiFi<br
/><br />Please enter a few quick details</div>
<tr><td align="right">Email</td>
<td><input style="width: 140px"
name="email_address" type="text" /></td>
</tr>
<tr><td align="right">Postcode</td>
<td><input style="width: 140px" name="postcode"
type="text"/></td>
</tr>
<tr><td> </td>
<td><input type="submit" value="Continue"
/></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<!-- $(if error) -->
<br /><div style="color: #FF8080; font-size: 9px"><?php echo $error;
?></div>
<!-- $(endif) -->
</td>
</tr>
</table>
<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</body>
</html>
On click, the form should call doLogin() which should submit the form called record and pass email_address and postcode to a database via process.php
Ive proved this part works if I just call process.php from the main form by amending the action part and removing onSubmit rather than using doLogin() but I can't seem to get it to work this way as shown. I need to get it working this way so I can build more functionality in.
Could somebody help please?
Hi you problem come when you added a new form, that the reason why now isn't running. When you add a second form to the same page the form call in js change to :
document.form[index] in you case :
//if you want call <form name="record" // first form = index 0
document.forms[0].submit();
//or
document.forms["record"].submit();
//or
document.record.submit();
//if you want call <form name="login" //second form = index 1
document.forms[1].submit();
//or
document.forms["login"].submit();
//or
document.login.submit();
//etc ...
Regards.
This is the print preview.
This is my JavaScript code for printing the table:
function PrintElem(divID) {
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById(divID).innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
}
This is my CSS for printing the table:
<style type="text/css" media="print">
#page
{
size: auto;
margin: 0;
}
a[href]:after {
content: none !important;
}
html
{
background-color: #FFFFFF;
margin: 0;
}
body
{
margin: 5mm 15mm 20mm 15mm;
}
</style>
When I print my table half the td's are not printing.
This is the table which I want to print:
<div class="table-responsive" id="myDiv">
<span id="hide" hidden>2</span>
<table class="table" border="">
<tbody>
<tr>
<td><b>S.No.</b></td>
<td><b>Order Number</b></td>
<td><b>Doctor Name</b></td>
<td><b>Medicine Availability</b></td>
<td><b>Action</b></td>
</tr>
<tr align="center">
<td>1</td>
<td>06.03-VNS742</td>
<td></td>
<td>
<div class="table-responsive">
<input type="text" name="id[]" value="298" hidden=""/>
<input type="submit" id="submit-form" class="hidden"/>
<input type="submit" value="Update" hidden=""/>
<input type="text" name="id[]" value="300" hidden=""/>
<input type="submit" id="submit-form" class="hidden"/>
<input type="submit" value="Update" hidden="">
<table class="table" border="">
<tbody>
<tr>
<td><b>S.No.</b></td>
<td><b>Medicine Name</b></td>
<td><b>Quantity</b></td>
<td><b>Unit</b></td>
<td><b>Availability</b></td>
<td><b>Remark</b></td>
<form action="processAvailability.php" method="POST"></form>
</tr>
<tr align="center">
<td>1</td>
<td><input type="text" name="medicine_name[]" value="Apml"/></td>
<!-- <td>Apml</td> -->
<td><input type="text" name="quantity[]" value="15"/></td>
<td>
<select name="med_unit_type[]" onchange="CheckColors(this.value);">
<option>Tablet</option>
<option>Strips</option>
<option>Bottle</option>
<option>Tablet</option>
<option>Other</option>
</select>
</td>
<td>
<input type="text" name="order_number" value="06.03-VNS742" hidden=""/>
<select name="availability[]">
<option value="Not Available">Not Available</option>
<option value="Available">Available</option>
<option value="Not Available">Not Available</option>
<option value="Partially Available">Partially Available</option>
<option value="Confusion">Confusion</option>
</select>
</td>
<td><input type="text" class="css-input" name="remark[]" value=""
placeholder="Write Remark Here"/></td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<label for="submit-form">Save</label>
</td>
<td>Reschedule Order</td>
</tr>
</tbody>
</table>
</div>
I created a fiddle so we can explore the problem.
When I resize the HTML section, I see all the columns without problems. Can you provide a screenshot of what is happening?
You can probably try this.
.table-responsive {
width:"100%";
}
i have a problem with jquery mobile.
here is teh jsfiddle: http://jsfiddle.net/Gc7mR/3/
First i have a Panel with some Buttons, The importan Button is the button with id=define)!
<div data-role=header data-position=fixed>
<div data-role=navbar>
<ul>
<li><a href=#define data-role=button data-icon=edit
data-inline="true" data-rel="popup" id="define"
data-position-to="#map_canvas">Define</a></li>
<li><a href=#compose data-role=button data-icon=gear
data-inline="true" data-rel="popup" data-transition="slidedown"
data-position-to="#map_canvas">Compose</a></li>
<li><a href=#search data-role=button data-icon=search
data-inline="true" id="search">Search</a></li>
</ul>
</div>
</div>
Now i created 3 Popups(one of them is shown below). Further i have a variable called scenario, which can change the states between restaurants,landmarks, and movies. My goal is if the Button with the id 'define' is clicked, the corresponding popup to the actual state of teh scenario variable should be opened(e.g. if scenario="landmarks" the popup with the id landmarks should open).
<div data-role="popup" id="defineLandmarks"
style="width: 600px; height: 750px;">
<div style="padding: 20px;">
<div align="center">
<b>please define options for the landmark scenario</b>
</div>
<div data-role="controlgroup" data-type="horizontal">
<table>
<tr>
<td style="width: 20%;">wiki abstract</td>
<td style="width: 450px;; float: right"><input type="text"
name="wiki_abstract" id="wiki_abstract" value=""
data-clear-btn="false"></td>
</tr>
<tr>
<td style="width: 20%;">wiki text</td>
<td style="width: 450px; float: right"><input type="text"
name="wiki_text" id="wiki_text" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 1</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords1" id="keywords1" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 2</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords2" id="keywords2" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 3</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords3" id="keywords3" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 4</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords4" id="keywords4" value="" data-clear-btn="false">
</td>
</tr>
</table>
<form>
<div data-role="controlgroup" data-type="horizontal"
align="center">
Reset Apply
</div>
</form>
</div>
</div>
</div>
I try to open the poup like this but it does not work:
$("#define").click(function() {
var s= getScenario();
if(s=='restaurant'){
$('#defineRestaurants').popup('open');
}
else if(s=='movies'){
$('#defineMovies').popup('open');
}
else if(s=='landmarks'){
$('#defineLandmarks').popup('open');
}else{
alert("Please choose a scenario");
}
});
Look at something like
$(createToggleHandler("#check", "#most", "#most"));
function createToggleHandler(id, target, scroll){
return function(){
$(id).click(createToggleClickHandler(target, scroll));
}
}
function createToggleClickHandler(target, scroll){
return function(){
var x = $(target);
x.toggle(500);
$("html, body").animate({ scrollTop: $(scroll).offset().top }, 1000);
}
}
I have created a table that contains a dynamic form, so when clicked add button will display a new row with the same form each line. and I have also made the switch to clear the form, but it is not going well. anything because there are other functions in the action to remove that line. The following coding that I have made.
html:
<table class="table table-striped area-table tabel-form-makanan">
<thead>
<tr>
<th>Nama Makanan</th>
<th>Jenis Makanan</th>
<th>Harga Makanan</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" class="nama-makanan" placeholder="ketikkan nama makanan"/>
<input type="hidden" name="id-makanan[]" class="id-makanan"/>
</td>
<td>
<input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/>
</td>
<td>
<input type="text" readonly name="harga-makanan[]" rel="hargaMakanan" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/>
</td>
<td>
<a class="btn hapus-baris-makanan" style="display: none;"><i class="icon-remove"></i></a>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary tombol-tambah-makanan" type="button" style="float: right; margin-right: 10px;">Tambah</button>
javascript for dynamic form:
$('.tombol-tambah-makanan').on('click', function(){
var tr = '<tr>\n\
<td><input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" class="nama-makanan" placeholder="ketikkan nama makanan"/><input type="hidden" name="id-makanan[]" class="id-makanan"/></td>\n\
<td><input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/></td>\n\
<td><input type="text" readonly name="harga-makanan[]" rel="hargaMakanan" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/></td>\n\
<td><a class="btn hapus-baris-makanan"><i class="icon-remove"></i></a></td>\n\
</tr>';
$("table.tabel-form-makanan tbody").append(tr);
});
javascript for delete form:
$('.tabel-form-makanan').on( 'click', '.hapus-baris-makanan', function(){
var parent = $(this).parents('tr');
var harga = $('.harga-makanan', parent).val();
pengurangan_pesanan(harga);
$(this).closest('tr').remove();
});
other javascript:
function pengurangan_pesanan(price) {
if (subtotal > 0) {
var kembali = 0;
subtotal -= parseFloat(price);
$('.subtotal').val(subtotal);
if (cek_bayar != isNaN || cek_bayar != 0) {
kembali = cek_bayar - subtotal;
$('.kembali').val(kembali);
}
}
}
Do you have a solution to this problem, I really need it. thank you
*demo : http://jsfiddle.net/daniwarrior/ANfFe/1/