This question already has answers here:
Form inside a table
(3 answers)
Closed 3 years ago.
My required attribute which i placed inside a row of a table doesn't seem to be working at all.
I tried closing and un-closing the input tags and changing the button type to input type = "submit" but still the problem persist.
<tr>
<form action="">
<td><input type="text" id="itn" required/></td>
<td> <input type="text" id="prc" required/></td>
<td> <input type="text" id="dt" required/></td>
<td><input type="text" id="qn" required/></td>
<td><input type="text" id="am" required/></td>
<button type="button" onclick="add()" class="button button3">
ADD
</button>
</tr>
When I execute the code on my google chrome browser, the browser doesn't show any alert or warnings if i miss out any fields.
Put you table inside a form. This is a basic example and use action. Inside the add function you can put custom validators and submit the form using ajax
function add() {
}
<form action="add()">
<table>
<tr>
<td><input type="text" id="itn" required/></td>
<td> <input type="text" id="prc" required/></td>
<td> <input type="text" id="dt" required/></td>
<td><input type="text" id="qn" required/></td>
<td><input type="text" id="am" required/></td>
<td><button type="submit" class="button button3">
ADD
</button></td>
</tr>
</table>
Try this code
<tr>
<form action="">
<td><input type="text" id="itn" required/></td>
<td> <input type="text" id="prc" required/></td>
<td> <input type="text" id="dt" required/></td>
<td><input type="text" id="qn" required/></td>
<td><input type="text" id="am" required/></td>
<input type="submit" onclick="add()" class="button button3" value="ADD">
</form>
</tr>
Related
My problem is that I am trying to generate some HTML code to fit on this one GIANT form. This webapp will have 12 letters with 10 textboxes for each day of the week. I want some help having this generating HTML code for each day of the week. Instead of having to hard code each letter for each day of the week. Would love some help.
I think i might be headed in the right way if I use window.onload = function() but I am not sure how to use Javascript to generate a line in HTML when loading a window.
TLDR; how can I get either jsp or JS to copy paste this HTML into a webpage 12 times for each day of the week with unique ID's and Names.
<form>
<div id="sectionpart">
<%--Monday #1
--%>
<h2>Monday Mail Piece #1</h2>
<div id ="formpart" >
<table border="0" cellspacing="3" cellpadding="3">
<tr>
<td>A. FORM*: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" name="FORM_M1" type="number" maxlength="1" id="FORM_M1" value="8" size="10" required/></td>
</tr>
<tr>
<td>B. ADDRESSEE*: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="ADDRESSEE_M1" id="ADDRESSEE_M1" value="8" size="10" maxlength="1" required/></td>
</tr>
<tr>
<td>other field: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherdB_M1" id="otherB_M1" value="banana" size="30" /></td>
</tr>
<tr>
<td>C. RETURN ENVELOPE*: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="RETURN_ENVELOPE_M1" id="RETURN_ENVELOPE_M1" value="3" size="10" maxlength="1" required/></td>
</tr>
<tr>
<td>D. SENDER TYPE*: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="SENDER_TYPE_M1" id="SENDER_TYPE_M1" value="10" size="10" maxlength="2" required/></td>
</tr>
<tr>
<td>other field: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherD_M1" id="otherD_M1" value="" size="50" /></td>
</tr>
<tr>
<td>E. PURPOSE*: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="PURPOSE_M1" id="PURPOSE_M1" value="10" size="10" maxlength="2" required/></td>
</tr>
<tr>
<td>other field: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherE_M1" id="otherE_M1" value="" size="50" /></td>
</tr>
<tr>
<td>F. ADVERTISING*: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="ADVERTISING_M1" id="ADVERTISING_M1" value="1" size="10" maxlength="1" required/></td>
</tr>
<tr>
<td>G. READING: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="READING_M1" id="READING_M1" value="1" size="10" maxlength="1" /></td>
</tr>
<tr>
<td>H. REACTION: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="REACTION_M1" ID="REACTION_M1" value="1" size="10" maxlength="1" /></td>
</tr>
<tr>
<td>I. RESPONSE: </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="RESPONSE_M1" ID="RESPONSE_M1" value="1" size="10" maxlength="1" /></td>
</tr>
<tr>
<td>Class: 01020304 </td>
<td><input onblur="undo(this.id);"onfocus="highlight(this.id);" type="number" name="Classnums_M1" ID="Classnums_M1" value="01020304" size="10" maxlength="8" /></td>
</tr>
<tr>
<td>J. CLASS*: (OK to pick more than one)</td>
<td><ol type="1" >
<li><input type="checkbox" name="Presorted-PRSRT-FP" value="ON" />Presorted First-Class <b>or</b> PRSRT, <b>or</b> FP</li>
<li><input type="checkbox" name="FirstC-Postage" value="ON" />First-Class Postage</li>
<li><input type="checkbox" name="ForeverStamp" value="ON" />Forever Stamp</li>
<li><input type="checkbox" name="AUTO" value="ON" />AUTO</li>
<li><input type="checkbox" name="ABAFMBAV" value="ON" />AB, <b>or</b> AF, <b>or</b> MB, <b>or</b> AV</li>
<li><input type="checkbox" name="SinglePiece" value="ON" />Single Piece, <b>or</b> SNGLP, <b>or</b> SP</li>
<li><input type="checkbox" name="OutsideUS" value="ON" />Mail from outside the U.S.</li>
<li><input type="checkbox" name="FRANKED" value="ON" />Federal Government with Official Signature(FRANKED)</li>
<li><input type="checkbox" name="OtherFed" value="ON" />Other Federal Government Mail</li>
<li><input type="checkbox" name="OtherClassification" value="ON" />Other classification (Specify on Answer Booklet page 4)
<input onblur="undo(this.id);"onfocus="highlight(this.id);" type="text" name="otherJ_M1" ID="otherJ_M1"value="" size="50" maxlength="50"/></li>
</ol>
</td>
</tr>
</table>
</div>
<div id="imagepart">
<img src="img/MailAustin.JPG" width="100%" height="675px" alt="MailAustin" ID="IMAGE_M1"/>
</div>
</div>
repeat
repeat
......
repeat
</form>
You can use pure JS to grab a set of html tags, clone them, and then attach them to the DOM. You could execute something like this in your onload function:
var form = document.querySelector('#form');
var inject = doucment.querySelector('#injection-point');
for ( var i = 0; i < 7; i++ ) {
var cln = form.cloneNode(true);
cln.setAttribute('id', 'form-' + i);
inject.appendChild(cln);
}
Clone Node...
https://www.w3schools.com/jsref/met_node_clonenode.asp
Also, if you have the freedom to use a framework, Polymer JS provides some excellent tools for repeating html without the need to write additional JS.
I am creating 2 dynamic controls array.
<input type=text name=quantity[]>
<input type=text name=price[]>
I want to multiply these two inputs and show the result accordingly. I want to do it on frontend using javascript or jQuery.
What will be the best possible way of doing it?
EDIT
#Zeus
As I mentioned in the question it is an array of controls so the code will go like this
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
Now I will enter quantity in first textfield and price in the second one. For each row I need to multiply these fields and show the result next to them.
Hope it explains the question more.
You can do it like this :
$("button").click(function() {
$("#calc tr").each(function(i) {
var result = $(this).find("input[name*='quantity[]']").val() * $(this).find("input[name*='price[]']").val();
$(this).children("td:nth-child(3)").html(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table id="calc">
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Result</th>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
</table>
<button>Click me after entering values</button>
Run the code to test it.
This is just an example you will be needing to edit the code to make it work for you.
This script works fine for me:
<script>
calculate = function(){
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)* parseInt(minutes);
}
</script>
<form action="ProvideMedicinProcess.php" class="register" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td>
<input class="form-control"type="text" required="required" placeholder="Symptoms" name="Symptoms[]">
</td>
<td>
<input class="form-control" type="text" required="required" placeholder="GivenMedicin" name="GivenMedicin[]">
</td>
<td>
<input id="a1" class="form-control" type="text" required="required" placeholder="UnitePrice" name="UnitePrice[]" onblur="calculate()" >
</td>
<td>
<input id="a2" class="form-control" type="text" required="required" placeholder="Quentity" name="Quentity[]" onblur="calculate()" >
</td>
<td>
<input id="a3" class="form-control" type="text" required="required" placeholder="SubTotal" name="SubTotal[]" >
</td>
</tr>
</tbody>
</table>
<input type="button" value="Add" onClick="addRow('dataTable')" />
<input type="button" value="Remove" onClick="deleteRow('dataTable')" />
<input class="submit" type="submit" value="Confirm" />
<input type="hidden" value="<?php echo $PatientIDSearch ?>" name="PatientIDSearch" />
</form>
But I need to calculate All Subtotal
Some issues:
If you add rows, you'll have to avoid that you get duplicate id property values in your HTML. It is probably easiest to just remove them and identify the input elements via their names, which does not have to be unique
It is bad practice to assign to a non-declared variable. Use var, and in the case of functions, you can just use the function calculate() { syntax.
Make the subtotal input elements read-only by adding the readonly attribute, otherwise the user can change the calculated total.
Instead of responding on blur events, you'll get a more responsive effect if you respond to the input event. And I would advise to bind the event handler via JavaScript, not via an HTML attribute.
I would fix some spelling errors in your elements (but maybe they make sense in your native language): Quantity with an 'a', UnitPrice without the 'e'.
You can use querySelectorAll to select elements by a CSS selector, and then Array.from to iterate over them.
See below snippet with 2 rows:
function calculate(){
var unitPrices = document.querySelectorAll('[name=UnitPrice\\[\\]]');
var quantities = document.querySelectorAll('[name=Quantity\\[\\]]');
var subTotals = document.querySelectorAll('[name=SubTotal\\[\\]]');
var grandTotal = 0;
Array.from(subTotals, function (subTotal, i) {
var price = +unitPrices[i].value * +quantities[i].value;
subTotal.value = price;
grandTotal += price;
});
// Maybe you can also display the grandTotal somehwere.
}
document.querySelector('form').addEventListener('input', calculate);
input { max-width: 7em }
<form action="ProvideMedicinProcess.php" class="register" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td>
</tr>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"" ></td>
<td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td>
</tr>
</tbody>
</table>
</form>
<form id="myForm" action="firstjsp" method="post">
<table>
<tr>
<td> User Name:</td>
<td><input type="text" name="userName"></td></tr>
<tr><td>Email:</td><td><input type="text" name="emailID"></td></tr>
<tr><td>New Password:</td><td> <input type="password" name="userPassword"></td></tr>
<tr><td>Confirm Password: </td><td> <input type="password" name="confirmPassword"></td></tr>
<tr><td>Address: </td><td><input type="text" cols="40" rows="5" name="address"></td></tr>
<tr><td>Gender:</td> <td><input type="radio" name="radioGender" value="Male" >Male</td>
<td><input type="radio" name = "radioGender" value="female">Female </td></tr>
<tr><td><center><input type="submit" value="Submit"></center></td> <td><center><button onClick="myFunction()">Reset</button></center></td></tr>
</table>
</form>
<script>
function myFunction(){
document.getElementByName("myForm").(reset);
}
</script>
<--firstjsp is a servelt file. on clicking reset the program moves to the servlet program instead of displaying the same page-->
This should reset all values in the Form to its defaults. No need for Javascript.
In order to work you need to place the <input ... > inside the same <form> </form> tag as the form you would like to reset.
<input type="reset" value="Reset">
IT is working fine, try this once
<form id="myForm" action="firstjsp" method="post">
<table>
<tr>
<td> User Name:</td>
<td><input type="text" name="userName"></td></tr>
<tr><td>Email:</td><td><input type="text" name="emailID"></td></tr>
<tr><td>New Password:</td><td> <input type="password" name="userPassword"></td></tr>
<tr><td>Confirm Password: </td><td> <input type="password" name="confirmPassword"></td></tr>
<tr><td>Address: </td><td><input type="text" cols="40" rows="5" name="address"></td></tr>
<tr><td>Gender:</td> <td><input type="radio" name="radioGender" value="Male" >Male</td>
<td><input type="radio" name = "radioGender" value="female">Female </td></tr>
<tr><td><center><input type="submit" value="Submit"></center></td> <td><center><input type="Reset" value="Reset" onClick="myFunction()"></button></center></td></tr>
</table>
</form>
<script>
function myFunction(){
document.getElementByName("myForm").(reset);
}
</script>
I'm making a form with a submit button to check login and a link to make a new user!
I'm coding this with:
<script language="javascript">
function new_user()
{
document.getElementById("login").value='registo';
}
</script>
<form id="frmLogin" name="frmLogin" method="post" action="#">
<table>
<tr>
<td><label for="username">Nome do utilizador</label></td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td><label for="password">Palavra-passe</label></td>
<td><input type="text" name="password" id="password" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="OK" id="OK" value="Submit"/></td>
</tr>
<tr>
<td><input type="hidden" name="login" id="login" value="login"/></td>
<td>Novo Utilizador</td>
</tr>
</table>
</form>
I want to use a hidden field to know if the user pressed the button or the link.
To make the code smaller I'd like to use this code instead:
<form id="frmLogin" name="frmLogin" method="post" action="#">
<table>
<tr>
<td><label for="username">Nome do utilizador</label></td>
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td><label for="password">Palavra-passe</label></td>
<td><input type="text" name="password" id="password" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="OK" id="OK" value="Submit"/></td>
</tr>
<tr>
<td><input type="hidden" name="login" id="login" value="login"/></td>
<td>Novo Utilizador</td>
</tr>
</table>
</form>
Can anyone explain me why this doesn't work?
You might be having a quote clash in the definition of the onclick event handler. Your browser is interpreting it as onclick="document.getElementById(".
Try enclosing the argument of the document.getElementById sentence in single quotes.
onclick="document.getElementById('login').value='registo';document.frmLogin.submit();">
You can use it as below
<td>Novo Utilizador</td>
use single quote for getElementById that will solve it.