Develop Reference

How to display a message beside respective input in an html table?

I have created a table inside a form and one column consists of input elements. I have written a JavaScript function to validate each input. If invalid, the corresponding error message should be displayed beside respective input. In my case, for any input, the error message is always displayed beside the first input.
I tried using <div> and <span> tags with respective id values. For every invalid input the error message is displayed beside the first input and not the corresponding input.
Html table
<table>
<tr>
<td>S.No</td>
<td>Particulars</td>
<td>Amount</td>
<td></td>
</tr>
<tr>
<td>01</td>
<td>Annual Rent (Only of residential unit not owned by employer)</td>
<td><input type="number" name="ann_rent"><div id="ar_invalid"></div></td>
</tr>
<tr>
<td>02</td>
<td>Mediclaim (U/s. 80D of I.T. Act)</td>
<td><input type="number" name="medi"><div id="medi_invalid"></div></td>
</tr>
<tr>
<td>03</td>
<td>Interest paid for Home Loan</td>
<td><input type="number" name="home_int"><div id="home_invalid"></div></td>
</tr>
<tr>
<td>04</td>
<td>National Pension</td>
<td><input type="number" name="nat_pen"><div id="pen_invalid"></div></td>
</tr>
</table>
Javascript function
function validate() {
var a,b,c,d;
a = document.getElementsByName("ann_rent")[0].value;
b = document.getElementsByName("medi")[0].value;
c = document.getElementsByName("home_int")[0].value;
d = document.getElementsByName("nat_pen")[0].value;
if(!a || a < 0) {
document.getElementById("ar_invalid").innerHTML = text;
return false;
}
if(!b || b < 0) {
document.getElementById("medi_invalid").innerHTML = text;
return false;
}
if(!c || c < 0) {
document.getElementById("home_invalid").innerHTML = text;
return false;
}
if(!d || d < 0) {
document.getElementById("pen_invalid").innerHTML = text;
return false;
}
}
Table is inside this form
<form action="process_form.php" method="post" onSubmit="return validate();">
CSS
td, th {
text-align: left;
padding: 8px;
}
table {
margin-top: 30px;
margin-bottom: 10px;
font-family: arial, sans-serif;
width: 100%;
}
If user enters a negative value in input name="home_int", then the error message should be displayed beside input home_int. But actually, the error message is getting displayed beside input name="ann_rent". This situation is occurring for every input.

use th for headers. Add a new td for the error message
<table>
<tr>
<th>S.No</th>
<th>Particulars</th>
<th>Amount</th>
<th></th>
</tr>
<tr>
<td>01</td>
<td>Annual Rent (Only of residential unit not owned by employer)</td>
<td><input type="number" name="ann_rent"></td>
<td><div id="ar_invalid"></div></td>
</tr>
</table>
css
table td, table th {
padding: 20px;
border-spacing: 10px;
}
table {
border-collapse: collapse;
}

Assuming you have a button to submit for form validation which goes something like this:
<input type="submit" name="s" value="ds"/>
What happening is when your function gets inside the first if it then returns false and form will not be submitted so the other ifs wont perform any action in this situation so when you type any negative number in the first if, other ifs whether they are positive or negative wont work and the code will execute the message in the first div
but it will work and will show the message in the desired div if you will only put a negative number inside a specific textbox and all before will be positive

Change the "errors" divs to similar as below so you can have a simpler javascript code:
HTML:
<form action="/" method="post" onSubmit="return validate();">
<table>
<tr>
<td>S.No</td>
<td>Particulars</td>
<td>Amount</td>
<td></td>
</tr>
<tr>
<td>01</td>
<td>Annual Rent (Only of residential unit not owned by employer)</td>
<td><input type="number" name="ann_rent"><div id="ann_rent_invalid"></div></td>
</tr>
<tr>
<td>02</td>
<td>Mediclaim (U/s. 80D of I.T. Act)</td>
<td><input type="number" name="medi"><div id="medi_invalid"></div></td>
</tr>
<tr>
<td>03</td>
<td>Interest paid for Home Loan</td>
<td><input type="number" name="home_int"><div id="home_int_invalid"></div></td>
</tr>
<tr>
<td>04</td>
<td>National Pension</td>
<td><input type="number" name="nat_pen"><div id="nat_pen_invalid"></div></td>
</tr>
</table>
<input type="submit" value="Submit">
</form>
and in javascript:
function validate() {
var text = "error";
var required = ["ann_rent", "medi", "home_int", "nat_pen"];
var errors = 0;
required.forEach(function(element) {
var toselect = element + "_invalid";
var reqV = document.getElementsByName(element)[0].value;
if(!reqV || reqV < 0) {
document.getElementById(toselect).innerHTML = text;
errors++;
} else {
document.getElementById(toselect).innerHTML = null;
}
});
if(errors > 0){
return false;
}
}

Can't get JavaScript method to validate my HTML form

I'm trying to use a javascript method to validate my form but it doesn't seem to be working. No dialog box pops up warning me of any errors even if an empty form is submitted. What could be the error?
(Please Note: The JS File has a method defined for a time-stamp that I am currently not using in my form tag. I need some help with calling two functions as well.)
Here's the code:
function setDate() {
document.getElementById('date').value = new Date();
}
function validateForm() {
var a = document.getElementById('name').value;
var b = document.getElementById("contact1").value;
var blen = b.length;
var c = document.getElementById("address1").value;
var d = document.getElementById("stblimit").value;
var dlen = d.length;
var e = document.getElementById("creditlimit").value;
var f = document.getElementById("commission").value;
var g = document.getElementById("servicecharges").value;
//DATE var h = document.forms["addRetailer"]["date"].value;
if (a == null || a == "") {
alert("Name must be filled out");
return false;
} else if (b == null || b == "" || blen == 0 || blen > 10 || blen < 10) {
alert("Enter a valid number");
return false;
} else if (c == null || c == "") {
alert("Primary Address must be filled out");
return false;
} else if (d == null || d == "" || dlen == 0 || dlen < 0) {
alert("Set Box Top Limit must be filled with a valid number");
return false;
} else if (e == null || e == "") {
alert("Credit Limit must be filled out");
return false;
} else if (f == null || f == "") {
alert("Commission Percentage must be filled out");
return false;
} else if (g == null || g == "") {
alert("Service Charges must be filled out");
return false;
}
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="formvalidation.js" type="text/javascript"></script>
<title>Register Retailer</title>
</head>
<body>
<h1>Retailer Information</h1>
<form name="addRetailer" action="RetailerController" method="post" onsubmit="return validateForm()">
<table>
<tr>
<td>Name</td>
<td>
<input type="text" name="name" id="name"></input>
</td>
</tr>
<tr>
<td>Contact Number 1</td>
<td>
<input type="text" name="contact1" id="contact1"></input>
</td>
</tr>
<tr>
<td>Contact Number 2</td>
<td>
<input type="text" name="contact2" id="contact2"></input>
</td>
</tr>
<tr>
<td>Address Line 1</td>
<td>
<input type="text" name="address1" id="address1"></input>
</td>
</tr>
<tr>
<td>Address Line 2</td>
<td>
<input type="text" name="address2" id="address2"></input>
</td>
</tr>
<tr>
<td>City</td>
<td>
<input type="text" name="city" id="city"></input>
</td>
</tr>
<tr>
<td>State</td>
<td>
<input type="text" name="state" id="state"></input>
</td>
</tr>
<tr>
<td>Pin Code</td>
<td>
<input type="text" name="pin" id="pin"></input>
</td>
</tr>
<tr>
<td>Set Top Box Limit</td>
<td>
<input type="text" name="stblimit" id="stblimit" value="0"></input>
</td>
</tr>
<tr>
<td>Credit Limit</td>
<td>
<input type="text" name="creditlimit" id="creditlimit"></input>
</td>
</tr>
<tr>
<td>Commission Percentage</td>
<td>
<input type="text" name="commission" id="commission" value="0.0"></input>
</td>
</tr>
<tr>
<td>Service Charges</td>
<td>
<input type="text" name="servicecharges" id="servicecharges"></input>
</td>
</tr>
<tr>
<td>Date of Registration</td>
<td>
<input type="text" name="date" id="date"></input>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="hidden" value="registerCustomer" name="action"></input>
<input type="submit" value="Register"></input>
</td>
</tr>
</table>
</form>
<br>
<br>Click
Home To Return To The Main Screen
</body>
</html>
EDIT:
Here is a screenshot of my Eclipse IDE workspace. My js file and html file aren't in the same sub-folder, although they are under 'Web Content'. Could that be the issue?
Screenshot of Eclipse IDE Workspace

You may not have linked your JS file properly.
Looking at your screenshot I noticed you're using Tomcat and Java EE, which follows Unix style syntax for it's directory on the web server.
Your directory:
-Webcontent/
-WEB-INF/
+addRetailer
-JavaScript/
+validateForm.js
So, your HTML file is in WEB-INF which is under Webcontent and the form validator is under javascript, also under webcontent.
There's three solutions I have for this:
Move the JavaScript folder into WEB-INF and change the script reference to: "JavaScript/formvalidation.js"
Change the script reference to jump 'up' a directory layer using the double-dot'..' which should end up being: "../JavaScript/formvalidator.js"
Use HTML5's form validation instead, which doesn't need JavaScript. and is much neater. You can find details on the Mozilla Dev Network here.

Using Chrome, it seems to work for me:
The only thing that I changed is that I removed the link to the external JS file. It is possible the error is there and preventing your code from running. Check that file.

Cannot set property 'innerHTML' of null with array

Could somebody tell what is wrong here? I have a form with validation of email address and what is supposed to do is when is correct to make a new array and to print below form and when it's not just one simple alert. This is HTML:
<form>
<table>
<tr>
<td>Your email address</td>
<td>
<input type="text" id="txtEmail">
</td>
</tr>
<tr>
<td>
<input type="button" value="Register me" onclick="check();">
</td>
</tr>
</table>
</form>
This is JS:
function check() {
var email = document.getElementById("txtEmail").value;
var reEmail = /^(\w)+(\d)*(\.\_)*#[a-z]{2,10}\.[a-z]{2,5}$/;
var correct = new Array();
if(email.match(reEmail)){
correct.push(email);
document.getElementById("prikaz").innerHTML = correct;
}
else {
alert("Not correct");
}
}

Your HTML should be like this:
<form>
<table>
<tr>
<td>Your email address</td>
<td>
<input type="text" id="txtEmail">
</td>
</tr>
<tr>
<td>
<input type="button" value="Register me" onclick="check();">
</td>
</tr>
<tr>
</table>
</form>
<div id="prikaz">
</div>
And your JS should be like this:
var correct =new Array();
function check() {
var email = document.getElementById("txtEmail").value;
var reEmail = /^(\w)+(\d)*(\.\_)*#[a-z]{2,10}\.[a-z]{2,5}$/;
if(email.match(reEmail)){
correct.push(email);
}
else {
alert("Not correct");
}
var correctEmails = "<table>";
for(var i=0; i< correct.length; i++){
correctEmails+=("<tr><td>"+correct[i]+"</td></tr>");
}
correctEmails+="</table>"
document.getElementById("prikaz").innerHTML = correctEmails;
}

You have no element with the id "prikaz" so getElementById is returning null.
And even if it did return something, I don't see the point of setting it's innerHTML to an array since that field is for text that will be parsed as HTML.

How can I update a set of text fields on key press and avoid resetting a form on submit?

I'm trying to make a simple converter like this one, but in JavaScript, where you enter an amount in tons and it displays a bunch of different numbers calculated from the input, sort of like this:
This is what I've tried:
<html>
<head>
<title>Calculator</title>
<script type="text/javascript">
function calculate(t){
var j = document.getElementById("output")
var treesSaved = t.tons.value * 17;
j.value = treesSaved;
}
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" />
<input type="button" value="Calculate" onclick="calculate(this.form)" />
<br />
<input type="text" id="output" value="Output" />
</form>
</body>
</html>
This works, to the extent that when you press the button, it calculates and displays the right number. However, it also seems to reset the form when I press the button, and I'm hoping to eliminate the need for the button altogether (so on every key press it recalculates).
Why is the form resetting, and how could I extend this to not need the button at all?

Here is the fiddle link for it:
Calculator
Use the below code to achieve what I think you want to :
<html>
<head>
<title>Calculator</title>
<script type="text/javascript">
function calculate(t){
var j = document.getElementById("output");
var rege = /^[0-9]*$/;
if ( rege.test(t.tons.value) ) {
var treesSaved = t.tons.value * 17;
j.value = treesSaved;
}
else
alert("Error in input");
}
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" onkeyup="calculate(this.form)"/>
<input type="button" value="Calculate" onclick="calculate(this.form)" />
<br />
<input type="text" id="output" value="Output" />
</form>
</body>
</html>

Please check this FIDDLE.
All you need to adding attributes data-formula to your table cells.
HTML
<table border="1">
<tr>
<td>
<input type="text" id="initial-val" />
</td>
<td>card board</td>
<td>recycled</td>
<td>reusable</td>
</tr>
<tr>
<td>lovely trees</td>
<td data-formula='val*5'></td>
<td data-formula='val+10'></td>
<td data-formula='val/2'></td>
</tr>
<tr>
<td>what is acres</td>
<td data-formula='val*2'></td>
<td data-formula='val*(1+1)'></td>
<td data-formula='val*(10/5)'></td>
</tr>
</table>
JAVASCRIPT
$(function () {
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
var $input = $('#initial-val'),
$cells = $('td[data-formula]');
$input.on('keyup', function () {
var val = $input.val();
if (isNumber(val)) {
$.each($cells, function () {
var $thisCell = $(this);
$thisCell.text(
eval($thisCell.attr('data-formula').replace('val', val.toString()))
)
});
} else {
$cells.text('ERROR')
}
});
});

You'll need:
a drop down option that allows the user to select what type of calculation they want to do and then display an input field OR multiple input fields
an input field for user input
a submit button with a onclick() event which passes your input into your calculation
(you may want to do some validation on this so they can only enter numbers)
validation examples
your Javascript file that takes the input from your box on submit and performs your calculation
display the information back to user... something like innerHtml to an element you've selected or:
var output = document.getelementbyid("your outputbox")
output.value = "";
output.value = "your calculated value variable";
Here is a tutorial for grabbing user input.

Assuming your calculations are all linear, I would suggest that you create an array of the coefficients and then just loop that array to do the calculation and print it out. Something like this:
HTML:
<table>
<tr>
<th></th>
<th>Recycled Cardboard</th>
<th>Re-usable Cardboard</th>
</tr>
<tr>
<th>Trees Saved</th>
<td></td><td></td>
</tr>
<tr>
<th>Acres Saved</th>
<td></td><td></td>
</tr>
<tr>
<th>Energy (in KW)</th>
<td></td><td></td>
</tr>
<tr>
<th>Water (in Gallons)</th>
<td></td><td></td>
</tr>
<tr>
<th>Landfill (Cubic Yards)</th>
<td></td><td></td>
</tr>
<tr>
<th>Air Pollution (in Lbs)</th>
<td></td><td></td>
</tr>
</table>
Javascript:
function showStats(cardboardTons) {
var elements = $("td");
var coeffs = [17, 34, 0.025, 0.5, 4100, 8200, 7000, 14000, 3, 6, 60, 120];
for(var i=0;i<coeffs.length;i++)
elemnts.eq(i).html(cardboardTons * coeffs);
}
Once you get input from the user, pass it into the showStats function as a number and it will go through all of the cells in the table and calculate the proper number to go in it.

Form "submit" working in IE but not Firefox and Chrome

I have a sign up form on my site which works OK in IE but does not work in Firefox or Chrome. I have tried looking through other forum posts here with similar problems but still can't get my head round this silly problem. (I am not a code writer).
Here is the code
<script type="text/JavaScript">
function validate_form(){
{validation_text}
else{
return true;
}
}
var str_vars = '';
function all_fields(){
str_vars = '';
el = document.form1;
for (var i = 0; i < el.elements.length; i++) {
if (el.elements[i].value != '')
str_vars += el.elements[i].name+'='+el.elements[i].value+'&';
}
str_vars = str_vars.substr(0,str_vars.length-15);;
}
</script>
<div id="div_form" name="div_form">
<form id="form1" name="formx" method="{send_method}" action="{form_switch}">
<p> </p>
<table border="0" width="100%" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
{error}
{signup_list}
<tr>
<td align="right">{description_country} </td>
<td>{shiping_country_list}{required_country}</td>
</tr>
<tr><td align="right"> {promo}</td></tr>
{code_signup}
<tr>
<td colspan="2"><div align="center">
<input name="terms" id="terms" value="1" type="checkbox">
<label for="terms">I accept the terms & conditions</label>
</div></td>
</tr>
<tr>
<td colspan="2"><div align="center">
{captcha}</td>
</tr>
{arp_fields}
<tr>
<td><div align="right">*</div><br></td>
<td width="332">Denotes required</td>
</tr>
<tr>
<td>
<div align="right">
<input name="Submit" value="Submit" type="button" onclick="{request}{request_email}{form2items}">
</div></td>
<td> <br></td>
</tr>
</table>
</form>
</div>
</div>
Any help would be appreciated.

Maybe instead of
el = document.form1;
try
el = document.getElementById('form1');
I can't see all the JS so it is hard to guess, but one other thing to try is to change the name of the submit button from name="Submit" to something else like name="submitForm". If form.submit() is getting called somewhere in the script this can cause problems.
Your validate function should look something like this:
function validate_form(){
var form = document.getElementById('form1');
err = 'The following fields are not correct filled:\n';
if (form.first_name.value == ''){
err += 'No First Name.\n';
}
if (emailCheck(form.email.value) == false){
err += 'No Valid email.\n';
}
if (form.terms.checked != true){
err += 'You did not agree with the terms.\n';
}
if (err != 'The following fields are not correct filled:\n'){
alert (err);
return false;
}
else{
return true;
}
}
Lastly, change your submit button to this:
<input name="Submit" value="Submit" type="button" onclick="if (validate_form()) document.getElementById('form1').submit();">