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
Related
I have 3 input boxes that trigger the same div that is collapsible
<td>
<input
type="text" name="tbtext1" style="width: 90%;
"data-toggle="collapse" data-target="#exampleModal"
aria-expanded="false" aria-controls="exampleModal" />
</td>
<td style="width:20%">
<input type="text" name="tbtext1" style=" width: 85%; position: relative; right: 0.9rem; "
data-toggle="collapse" data-target="#exampleModal" aria-expanded="false" aria-controls="exampleModal" />
</td>
<td style="width:20%">
<input type="text" name="tbtext1" style="width: 78%; position: relative; right: 2.3rem;"
data-toggle="collapse" data-target="#exampleModal" aria-expanded="false" aria-controls="exampleModal" /><span style="position: relative; right: 1.2rem; ">= $</span>
</td>
<td style="width:20%">
<input type="text" name="tbtext1" style="width: 99%; position: relative; right: 0.8rem; " />
</td>
<div class="collapse" id="exampleModal">
<div class="collapse" id="exampleModal">
<div class="row" style="margin-top:1rem">
<div class="col-md-12">
<h5 class="modal-title" id="exampleModalLabel">Calc phys% using effective age of
<input type="text" id="phys" style="width:3rem" />/Lifespan of <input type="text" id="phys" style="width:3rem" />
</h5>
</div>
</div>
<div class="modal-body">
<table class="innerModalTable" style="width: 100%; text-align: center; border-top: none; margin-left: -1.7rem;">
<tr>
<th class="borderTd " style="text-align:center;border-top:none;border-left:none"> </th>
<th class="borderTd " style="text-align: left; width: 9.3rem; border-top: none; position: relative; left: 2rem;">Physical</th>
<th class="borderTd " style="text-align: center; border-top: none; width: 9rem;">External</th>
<th class="borderTd " style="text-align: center; border-top: none; border-right: none; width: 8rem;">Functional</th>
<th> </th>
</tr>
<tr>
<td class="borderTd ">% of Cost New</td>
<td class="borderTd "><input type="text" style="width:100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td> </td>
</tr>
<tr>
<td class="borderTd " style="width: 10.3rem; text-align: left;">Lump Sum</td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td> </td>
</tr>
</table>
</div>
</div>
currently its working like this when I click into any into any of the input feild the div toggles (collapses)
I want it to work such that when I focus on any of the input fields the div is opened and when I focus out of it the div is closed
Well I found a solution to it using JQuery to achieve this task
$(function () {
console.log('ready')
$('.toggleDepDiv').on('focus', function () {
var x = document.activeElement.classList;
if (x.contains("toggleDepDiv")) {
$('#exampleModal').collapse('show');
}
});
$('.toggleDepDiv').focusout(function (e) {
if (!e.relatedTarget.classList.contains('toggleDepDiv')) {
$('#exampleModal').collapse('hide');
}
});
});
Basically, I collapsed and uncollapse it using focus and focusout event
I wasn't able to catch the active class using
var x = document.activeElement.classList;
So I used relatedTarget
if (!e.relatedTarget.classList.contains('toggleDepDiv'))
on focus out event
I have a problem and not sure how should I approach it.
I have a page like the next one:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="../js/main.js" type="text/javascript"></script>
</head>
<body>
<br><br>
<form style="margin-bottom: 20px; border:4px solid black;background-color:#bdd6ee" id="My-Form" class="col-md-11 container" method="POST" action="../Views/logout.php">
<br>
<span style="color: #dc3545;" class="fa fa-address-card fa-2x"></span></p>
<div style=" padding: 15px; border: 2px solid black; background-color:white">
<div class="form-row">
<div class="col-md-4 mb-4" hidden>
<input type="text" name="Academico" class="form-control" value="Academico" readonly>
</div>
<table style="width:100%;">
<tr>
<td style="width: 1%; text-align: center" ><input class="form-check-input" type="radio" value="CAMBIO DE CARRERA Y DE UNIVERSIDAD" name="MOTIVO_CAMBIO" id="MOTIVO_CAMBIO" style="margin-left: 5px; position: unset"> </td>
<td style="width: 15%; color: #2e75b5"><b>CAMBIO DE CARRERA Y DE UNIVERSIDAD</b></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>Carrera</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="CARRERA" id="CARRERA_0" size="50" disabled> </td>
</tr>
<tr>
<td style="width: 1%"></td>
<td style="width: 15%; color: #2e75b5"></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>Universidad</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="UNIVERSIDAD" id="UNIVERSIDAD_0" size="50" disabled> </td>
</tr>
<tr>
<td style="width: 1%"></td>
<td style="width: 15%; color: #2e75b5"></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>¿Por qué?</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="PORQUE" id="PORQUE_0" size="50" disabled> </td>
</tr>
</table>
</div>
<br><br>
<div class="form-row">
<table style="width:100%;">
<tr>
<td style="width: 1%; text-align: center" ><input class="form-check-input" type="radio" value="CAMBIO DE UNIVERSIDAD, MISMA CARRERA" name="MOTIVO_CAMBIO" id="MOTIVO_CAMBIO_1" style="margin-left: 5px; position: unset"> </td>
<td style="width: 15%; color: #2e75b5"><b>CAMBIO DE UNIVERSIDAD, MISMA CARRERA</b></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>Universidad</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="UNIVERSIDAD" id="UNIVERSIDAD_1" size="50" disabled> </td>
</tr>
<tr>
<td style="width: 1%"></td>
<td style="width: 15%; color: #2e75b5"></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>¿Por qué?</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="PORQUE" id="PORQUE_1" size="50" disabled> </td>
</tr>
</table>
</div>
<br><br>
<div class="form-row">
<table style="width:100%;">
<tr>
<td style="width: 1%; text-align: center" ><input class="form-check-input" type="radio" value="CAMBIO DE CARRERA, MISMA UNIVERSIDAD" name="MOTIVO_CAMBIO" id="MOTIVO_CAMBIO_2" style="margin-left: 5px; position: unset"> </td>
<td style="width: 15%; color: #2e75b5"><b>CAMBIO DE CARRERA, MISMA UNIVERSIDAD</b></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>Carrera</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="CARRERA" id="CARRERA_1"size="50" disabled> </td>
</tr>
<tr>
<td style="width: 1%"></td>
<td style="width: 15%; color: #2e75b5"></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>¿Por qué?</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="PORQUE" id="PORQUE_2" size="50" disabled> </td>
</tr>
</table>
</div>
<br>
<div class="col text-center">
<button style="margin-bottom: 20px;" class="btn btn-primary col-md-3" type="submit">Ninguna de las anteriores</button>
</div>
</div><br>
</form>
<div class="col text-center">
<button style="margin-bottom: 20px;" class="btn btn-primary col-md-3" type="submit" form="My-Form" >Enviar</button>
</div>
</body>
</html>
Picture of the page
So, as you can see, I have three checkboxes (CAMBIO DE CARRERA Y DE UNIVERSIDAD, CAMBIO DE UNIVERSIDAD, MISMA CARRERA and CAMBIO DE CARRERA, MISMA UNIVERSIDAD).
When I click for example in "CAMBIO DE CARRERA Y DE UNIVERSIDAD", the three options next to it are going to get enable (Example), and the other ones are going to be disabled..If for some reason, I wanted to click on "CAMBIO DE UNIVERSIDAD, MISMA CARRERA", then, the 2 options next to it are going to get enable and the other ones disabled.
I have the next code where I can do what I want but only with the first checkbox:
$(document).ready(function(){
$("#MOTIVO_CAMBIO").on('change', function(){
var isWorking = $("#MOTIVO_CAMBIO").val();
if(isWorking === "CAMBIO DE CARRERA Y DE UNIVERSIDAD"){
$("#CARRERA_0").prop("disabled", false);
$("#UNIVERSIDAD_0").prop("disabled", false);
$("#PORQUE_0").prop("disabled", false);
}else if(isWorking === "CAMBIO DE UNIVERSIDAD, MISMA CARRERA"){
$("#UNIVERSIDAD_1").prop("disabled", false);
$("#PORQUE_1").prop("disabled", false);
}else if(isWorking === "CAMBIO DE CARRERA, MISMA UNIVERSIDAD"){
$("#CARRERA_1").prop("disabled", false);
$("#PORQUE_2").prop("disabled", false);
}
});
});
So, basically, what I'm trying to do is that when I click in one of the three options mentioned above, the options right next to it are going to get enable, but I'm not sure how to approach this. I know that I'm doing wrong in my Javascript/jQuery because if I want to add another option, then I'm going to be adding another "else if" and so on, so I know that's the wrong approach.
Any hint on how should I approach this?
you need to add event listeners for all your radio buttons, as following
$(document).ready(function(){
var radios = document.querySelectorAll('input[type=radio][name="MOTIVO_CAMBIO"]');
function changeHandler(event) {
if ( this.value === 'CAMBIO DE CARRERA Y DE UNIVERSIDAD' ) {
$("#CARRERA_0").prop("disabled", false);
$("#UNIVERSIDAD_0").prop("disabled", false);
$("#PORQUE_0").prop("disabled", false);
$("#UNIVERSIDAD_1").prop("disabled", true);
$("#PORQUE_1").prop("disabled", true);
$("#CARRERA_1").prop("disabled", true);
$("#PORQUE_2").prop("disabled", true);
} else if ( this.value ==='CAMBIO DE UNIVERSIDAD, MISMA CARRERA' ) {
$("#UNIVERSIDAD_1").prop("disabled", false);
$("#PORQUE_1").prop("disabled", false);
$("#CARRERA_0").prop("disabled", true);
$("#UNIVERSIDAD_0").prop("disabled", true);
$("#PORQUE_0").prop("disabled", true);
$("#CARRERA_1").prop("disabled", true);
$("#PORQUE_2").prop("disabled", true);
} else if (this.value === 'CAMBIO DE CARRERA, MISMA UNIVERSIDAD'){
$("#CARRERA_1").prop("disabled", false);
$("#PORQUE_2").prop("disabled", false);
$("#CARRERA_0").prop("disabled", true);
$("#UNIVERSIDAD_0").prop("disabled", true);
$("#PORQUE_0").prop("disabled", true);
$("#UNIVERSIDAD_1").prop("disabled", true);
$("#PORQUE_1").prop("disabled", true);
}
}
Array.prototype.forEach.call(radios, function(radio) {
radio.addEventListener('change', changeHandler);
});
});
Instead of all the if/else you can use the same html and changed js code below. Basically by attaching a click event disable all text inputs and find the current elements index. With that index find parent element (.form-row). After that is just enable that you want.
$(document).ready(function() {
$("input[type='radio']").click(function() {
let index = $("input[type='radio']").index($(this))
$('input[type="text"]').attr('disabled', true)
$('.form-row:eq('+index+') input[type="text"]').removeAttr('disabled')
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<form style="margin-bottom: 20px; border:4px solid black;background-color:#bdd6ee" id="My-Form" class="col-md-11 container" method="POST" action="../Views/logout.php">
<br>
<span style="color: #dc3545;" class="fa fa-address-card fa-2x"></span></p>
<div style=" padding: 15px; border: 2px solid black; background-color:white">
<div class="form-row">
<div class="col-md-4 mb-4" hidden>
<input type="text" name="Academico" class="form-control" value="Academico" readonly>
</div>
<table style="width:100%;">
<tr class="disabled_rows">
<td style="width: 1%; text-align: center" ><input class="form-check-input" type="radio" value="CAMBIO DE CARRERA Y DE UNIVERSIDAD" name="MOTIVO_CAMBIO" id="MOTIVO_CAMBIO" style="margin-left: 5px; position: unset"> </td>
<td style="width: 15%; color: #2e75b5"><b>CAMBIO DE CARRERA Y DE UNIVERSIDAD</b></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>Carrera</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="CARRERA" id="CARRERA_0" size="50" disabled> </td>
</tr>
<tr>
<td style="width: 1%"></td>
<td style="width: 15%; color: #2e75b5"></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>Universidad</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="UNIVERSIDAD" id="UNIVERSIDAD_0" size="50" disabled> </td>
</tr>
<tr>
<td style="width: 1%"></td>
<td style="width: 15%; color: #2e75b5"></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>¿Por qué?</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="PORQUE" id="PORQUE_0" size="50" disabled> </td>
</tr>
</table>
</div>
<br><br>
<div class="form-row">
<table style="width:100%;">
<tr>
<td style="width: 1%; text-align: center" ><input class="form-check-input" type="radio" value="CAMBIO DE UNIVERSIDAD, MISMA CARRERA" name="MOTIVO_CAMBIO" id="MOTIVO_CAMBIO_1" style="margin-left: 5px; position: unset"> </td>
<td style="width: 15%; color: #2e75b5"><b>CAMBIO DE UNIVERSIDAD, MISMA CARRERA</b></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>Universidad</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="UNIVERSIDAD" id="UNIVERSIDAD_1" size="50" disabled> </td>
</tr>
<tr>
<td style="width: 1%"></td>
<td style="width: 15%; color: #2e75b5"></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>¿Por qué?</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="PORQUE" id="PORQUE_1" size="50" disabled> </td>
</tr>
</table>
</div>
<br><br>
<div class="form-row">
<table style="width:100%;">
<tr>
<td style="width: 1%; text-align: center" ><input class="form-check-input" type="radio" value="CAMBIO DE CARRERA, MISMA UNIVERSIDAD" name="MOTIVO_CAMBIO" id="MOTIVO_CAMBIO_2" style="margin-left: 5px; position: unset"> </td>
<td style="width: 15%; color: #2e75b5"><b>CAMBIO DE CARRERA, MISMA UNIVERSIDAD</b></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>Carrera</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="CARRERA" id="CARRERA_1"size="50" disabled> </td>
</tr>
<tr>
<td style="width: 1%"></td>
<td style="width: 15%; color: #2e75b5"></td>
<td style="width: 5%; color: #2e75b5; text-align: right"><b>¿Por qué?</b></td>
<td style="width: 10%"><input class="form-check-input" type="text" style="margin-left: 10px; position: unset;" name="PORQUE" id="PORQUE_2" size="50" disabled> </td>
</tr>
</table>
</div>
<br>
<div class="col text-center">
<button style="margin-bottom: 20px;" class="btn btn-primary col-md-3" type="submit">Ninguna de las anteriores</button>
</div>
</div><br>
</form>
<div class="col text-center">
<button style="margin-bottom: 20px;" class="btn btn-primary col-md-3" type="submit" form="My-Form" >Enviar</button>
</div>
</body>
</html>
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.
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/
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.