I have a Html page which uses Java Script and I am opening that page in WebView
My problem is when I enabled max length validation on text area, then after validating text area all the text areas in page are freezed and I am not able to edit or delete from any text area.
Please help me how to resolve this issue that after validating text areas no text area is freezed.
My HTML Page is as
<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
cellspacing="2">
<tr>
<td colspan=2>
<center>
<font size=4><b>Student Registration Form</b></font>
</center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="number" maxlength='6' name="pincode"
id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
I added max length and only number in Pincode textarea. when I entered pin code after that each text area is freezed.
If I did not put these validation in pincode text area then it never freezes.
The issue that you are facing is a bug and has already been reported as issue #35264.
I have created a workaround for it at jsfiddle. For convenience pasted code below.
HTML:
<input type="number" maxlength='6' name="pincode" id="pincode" size="30" max="999999" >
Javascript:
var pincode = document.getElementById('pincode');
var maxLength = pincode.maxLength;
pincode.onkeypress = function(e){
if( pincode.value.length >= maxLength ){
return false;
}
};
The solution is, just ensure the content of input element does not cross the max limit.
On each keypress event, compare the input value length against max length. If it is more return false so that the input will be discarded.
Set max attribute on input element, to prevent user providing input more than max value using up arrow key.
First of all what you said is not text area. It's just a text filed. Text area should be defied as <textarea rows="10" cols="15"></textarea>.
Actually maxlength attribute is used to limit number of characters that user can enter. you gave maxlength='6' here which means maximum values user here can enter is just 6 digits or character.
I hope you were trying to adjust the width of the input filed. For that, give the following attribute and value : style="width:100px;max-width:60%;". ie., <input type="number" maxlength='6' name="pincode" id="pincode" size="30" style="width:100px;max-width:60%;">
In HTML you can use max attribute to set a maximum length to an input type number.
<input type="number" min="1" max="999999" name="pincode" id="pincode" size="30">
Documentation about maxLength attribute in HTML
maxlength
If the value of the type attribute is text, email, search, password,
tel, or url, this >attribute specifies the maximum number of
characters (in Unicode code points) that the user can enter; for other
control types, it is ignored. It can exceed the value of the size
attribute. If it is not specified, the user can enter an unlimited
number of characters. Specifying a negative number results in the
default behavior; that is, the user can enter an unlimited number of
characters. The constraint is evaluated only when the value of the
attribute has been changed.
Thus its designed to be ignored for input type="number"
Look here for complete set of attributes description for < input >
It will only set the maximum allowed number as the max value specified, it won't be blocking any value grater than max Value. Max attribute shows an error popup showing that the limit is exceeded.
If you want to block the text value from not getting any bigger than 6, you can uses JavaScript
SCRIPT
<script> function validateLength(obj)
{
if(obj.value.length > 6)
obj.value = obj.value.substr(0, 6);
}
</script>
HTML
<input type="number" min="1" max="999999" name="pincode" id="pincode" onkeyup="validateLength(this)">
I think that the only way to accomplish what you want is with JavaScript. I would use a method similar to Dileep's with a few differences:
Instead of just splicing the first six characters from the current value, I would save the last entered valid value and revert to that. A similar functionality, but more stable as far as I can tell.
Instead of using an inline HTML event callback, I would recommend assigning it directly via the DOM in the JavaScript. For a discussion of the differences between these methods, see this SO.
I also think that having the input box briefly flash a different color, at least for debugging purposes, would help to see when and how the code was executing if anything doesn't work.
Finally, I would use an <input type="tel"/> rather than an <input type="number"/>. The tel will still bring up a number-pad on mobile devices, but, unlike number, won't have an empty value when non-numeric data is entered. (See this SO.)
I've put all of this into a brief JSFiddle for you to see. Feel free to reuse it if it helps:
http://jsfiddle.net/VPL5e/1/
Does this solve your problem? If you need anything else, please ask!
There is nothing wrong in your html code may be the issue is in "form validation".
anyway i am providing you that full html and form validation code.
HTML
<html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration" onsubmit="return(validate());">
<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
cellspacing="2">
<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>
<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>
<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>
<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>
<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>
<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>
Form Validation
function validate()
{
if( document.StudentRegistration.textnames.value == "" )
{
alert( "Please provide your Name!" );
document.StudentRegistration.textnames.focus() ;
return false;
}
if( document.StudentRegistration.fathername.value == "" )
{
alert( "Please provide your Father Name!" );
document.StudentRegistration.fathername.focus() ;
return false;
}
if( document.StudentRegistration.paddress.value == "" )
{
alert( "Please provide your Postal Address!" );
document.StudentRegistration.paddress.focus() ;
return false;
}
if( document.StudentRegistration.personaladdress.value == "" )
{
alert( "Please provide your Personal Address!" );
document.StudentRegistration.personaladdress.focus() ;
return false;
}
if ( ( StudentRegistration.sex[0].checked == false ) && ( StudentRegistration.sex[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if( document.StudentRegistration.City.value == "-1" )
{
alert( "Please provide your City!" );
document.StudentRegistration.City.focus() ;
return false;
}
if( document.StudentRegistration.Course.value == "-1" )
{
alert( "Please provide your Course!" );
return false;
}
if( document.StudentRegistration.District.value == "-1" )
{
alert( "Please provide your Select District!" );
return false;
}
if( document.StudentRegistration.State.value == "-1" )
{
alert( "Please provide your Select State!" );
return false;
}
if( document.StudentRegistration.pincode.value == "" ||
isNaN( document.StudentRegistration.pincode.value) ||
document.StudentRegistration.pincode.value.length != 6 )
{
alert( "Please provide a pincode in the format ######." );
document.StudentRegistration.pincode.focus() ;
return false;
}
var email = document.StudentRegistration.emailid.value;
atpos = email.indexOf("#");
dotpos = email.lastIndexOf(".");
if (email == "" || atpos < 1 || ( dotpos - atpos < 2 ))
{
alert("Please enter correct email ID")
document.StudentRegistration.emailid.focus() ;
return false;
}
if( document.StudentRegistration.dob.value == "" )
{
alert( "Please provide your DOB!" );
document.StudentRegistration.dob.focus() ;
return false;
}
if( document.StudentRegistration.mobileno.value == "" ||
isNaN( document.StudentRegistration.mobileno.value) ||
document.StudentRegistration.mobileno.value.length != 10 )
{
alert( "Please provide a Mobile No in the format 123." );
document.StudentRegistration.mobileno.focus() ;
return false;
}
return( true );
}
let me know if it worked or any other issue you faced in this.
Related
<script type="text/javascript" src = "diabetestool.js"> </script>
<meta charset="utf-8"/>
</head>
<body>
<form id = "test2" name = "test2">
<table cellpadding="2" width="20%" bgcolor="red"
align="center"
cellspacing="2"
<tr>
<td colspan =2>
<center> <font size = 4>FORM TO FILL IN </font></center>
</td>
</tr>
<td> Title </td>
<td> <select Name="Title">
<option value= "-1 selected"> select...</option>
<option value= "Mr"> Mr </option>
<option value= "Mrs"> Mrs </option>
<option value= "Miss"> Miss </option>
<option value= "Ms"> Ms </option>
<option value= "Master"> Master</option>
</select></td>
</tr>
<tr>
<td>First Name</td>
<td><input type ="text" name= "firstName" id ="firstName" size ="30"> </td>
</tr>
<tr>
<td> Last Name</td>
<td> <input type ="text" name ="lastName" id = "lastName" size ="30"> </td>
</tr>
<tr>
<td> Health Authority Number</td>
<td> <input type ="text" name ="healthNumber" id = "healthNumber" size ="30"> </td>
</tr>
<tr>
<td> Email</td>
<td> <input type ="text" name ="email" id = "email" size ="30"> </td>
</tr>
<tr>
<td> Telephone Number</td>
<td> <input type ="text" name ="telephoneNumber" id = "telephoneNumber" size ="30"> </td>
</tr>
<tr>
<td colspan ="2"> <input type="submit" value="submit form" onsubmit="return validate()"; </td>
</tr>
</table>
</form>
</body>
</html>
this is my code to create the code for my contact form to be filled
there are a selection of options
function validate ()
{
// Declare all the variables here
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var Title = document.getElementById("Title").value;
var healthNumber = parseInt(document,getElementById("healthNumber").value);
var email = document.getElementById("email").value;
var validEmail = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9._-]+\.[a-zA-Z]{2,6}$/;
if(firstName!="" && lastName!= "" && Title!="" && email !="")
{
if(email.match(validEmail))
{
alert("All Values Validated");
return true;
}
else
{
alert("Enter a valid Email");
return false;
}
}
else
{
alert("All Fields are required");
return false;
}
}
this is just a randomly created js validation code just to test to see if the validating process works with my code and then i will change it to actually do the proper validation i want
the issue is that with my html page for my contact form after submitting, it just refreshes that page i have tried different things but not able to find a solution
You code has lot of syntax error. I fix syntax error. Here is the js fiddle: https://jsfiddle.net/0ngs96n0/13/
Use onsubmit in form tag something like that :
<form id = "test2" name = "test2" onsubmit="return validate(event);">
and In JS:
function validate (e){
e.preventDefault();
.................
.................
.................
.................
.................
}
it will stop the form from refreshing.
parseInt(document,getElementById("healthNumber").value);
Check the above line there is a , comma instead of. Dot . In document.getElementById("healthNumber").value;
Another one is close table element in html part, it will be solved
Thanks
You have some mistakes in your code
such as calling the function in HTML
And "parseInt "function in JS
HTML :
<html>
<head>
<script type="text/javascript" src = "diabetestool.js"> </script>
<meta charset="utf-8"/>
</head>
<body>
<form id = "test2" name = "test2" onsubmit="validate()">
<table cellpadding="2" width="20%" bgcolor="red"
align="center"
cellspacing="2"
<tr>
<td colspan =2>
<center> <font size = 4>FORM TO FILL IN </font></center>
</td>
</tr>
<td> Title </td>
<td> <select Name="Title" id="Title">
<option value= "-1 selected"> select...</option>
<option value= "Mr"> Mr </option>
<option value= "Mrs"> Mrs </option>
<option value= "Miss"> Miss </option>
<option value= "Ms"> Ms </option>
<option value= "Master"> Master</option>
</select></td>
</tr>
<tr>
<td>First Name</td>
<td><input type ="text" name= "firstName" id ="firstName" size ="30"> </td>
</tr>
<tr>
<td> Last Name</td>
<td> <input type ="text" name ="lastName" id = "lastName" size ="30"> </td>
</tr>
<tr>
<td> Health Authority Number</td>
<td> <input type ="text" name ="healthNumber" id = "healthNumber" size ="30"> </td>
</tr>
<tr>
<td> Email</td>
<td> <input type ="text" name ="email" id = "email" size ="30"> </td>
</tr>
<tr>
<td> Telephone Number</td>
<td> <input type ="text" name ="telephoneNumber" id = "telephoneNumber" size ="30"> </td>
</tr>
<tr>
<td colspan ="2"> <input type="submit" value="submit form" >
</td>
</tr>
</table>
</form>
</body>
</html>
javascript:
// Declare all the iables here
var firstName;
var lastName;
var Title ;
var healthNumber;
var email ;
validEmail = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9._-]+\.[a-zA-Z]{2,6}$/;
function validate ()
{
firstName = document.getElementById("firstName").value;
lastName = document.getElementById("lastName").value;
Title = document.getElementById("Title").value;
// healthNumber = parseInt(document,getElementById("healthNumber").value);
email = document.getElementById("email").value;
validEmail = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9._-]+\.[a-zA-Z]{2,6}$/;
if(firstName!="" && lastName!= "" && Title!="" && email !="")
{
if(email.match(validEmail))
{
alert("All Values Validated");
}
else
{
alert("Enter a valid Email");
}
}
else
{
alert("All Fields are required");
}
}
I have a page that I need to pop up an error message if the user leaves information in a box.
The user is selecting "Yes" from the Sale drop down and selecting a price (for example £10) from the New Product drop down. They are then changing the Sale drop down to "No" but leaving the price (£10) and this information is being submitted to the database.
How can I add code that warns the user that they have left the price (£10) when they have selected "No" in the Sale drop down?
<form name="test" onsubmit="return validateForm()" method="POST">
<table width="716">
<input name="CallType2" type="hidden" id="CallType2" value="Unfulfilled Sales"/></td>
</tr><tr>
<td style="text-align: left;">Mobile Number: </td>
<td colspan="2" style="text-align: left;"><input name="MobileNumber" type="text" id="MobileNumber" maxlength="11" /></td>
</tr>
<tr>
<td style="text-align: left;">Sale:</td>
<td colspan="2" style="text-align: left;"><select name="Sale" id="Sale" onchange="display(this,'Yes','No');" >
<option value=""></option>
<option value="No">No</option>
<option value="Yes">Yes</option>
</select> </td>
</tr>
<tbody id="Yes" style="display: none;">
<tr>
<td class="title"><div align="left">New Product:</div></td>
<td colspan="2" class="field">
<div align="left">
<label>
<select name="SaleProduct" id="SaleProduct">
<option value=""></option>
<option value="£10">£10</option>
<option value="£6.50">£6.50</option>
</select> </label>
</div></td>
</tr>
<tr>
</p>
</div></td>
</tr>
<tbody id="No" style="display: none;">
<tr>
<td class="title"><div align="left">Non Sale Reason:</div></td>
<td colspan="2" class="field">
<div align="left">
<label>
<span style="text-align: left;">
<select name="CancelReason" id="CancelReason">
<option value=""></option>
<option value="Account changes incomplete">Account changes incomplete</option>
<option value="Customer Credit Rating">Customer Credit Rating</option>
<option value="Handset Ineligible Damaged">Handset Ineligible Damaged</option>
<option value="Handset Ineligible (Matrix)">Handset Ineligible (Matrix)</option>
<option value="Migration not yet complete">Migration not yet complete</option>
<option value="No transaction number">No transaction number</option>
<option value="Insurance already on account">Insurance already on account</option>
</select>
</span></label>
</div></td>
</tr>
</tbody>
</tr>
</tr>
<br>
</tr>
</table>
<p>
<input type="hidden" name="MM_insert" value="test">
<p align="center">
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
</fieldset>
</body>
https://jsfiddle.net/hpowe25j/
There is already a validateForm() running on submit to check that other boxes (that I have removed from this example) are not left blank
Thank you
I don't think warning a user at that point is the right thing to do. They don't want to sale, why they should be getting a warning about the price. I think you should just remove the value in your validateForm function if Sale=No.
if(document.getElementById("Sale").value == undefined || document.getElementById("Sale").value == 'No')
document.getElementById('SaleProduct').value = "";
Or, if you really want to warn the user, change your 'display' function triggered from the onchange event. add this to the code
if(document.getElementById("Sale").value == 'No' && document.getElementById('SaleProduct').value != '')
alert('You should remove the price!'); // or make some div visible that contains the error message
You can also do this on validateForm.
My javascript won't properly load. I am not sure why. I am new to programming/scripting.. i appreciate the help.
The idea behind this is to validate a form without using alerts, however it does not seem to execute at all.
Here's my code:
validateForm()
{
var province = document.getElementByID("province");
var postalcode = document.getElementByID("postalcode");
if(province.value == "Select a province")
{
document.write('Select your province from the list');
province.focus();
return false;
}
else
{
return true;
}
if(postalcode.length<6)
{
document.write("You must enter a valid postal code .");
}
var widget1qty=document.getElementById("widget1qty").innerHTML;
var widget2qty=document.getElementById("widget2qty").innerHTML;
var widget3qty=document.getElementById("widget3qty").innerHTML;
if(widget1qty ==0)
{
document.write("You must select some widgets.");
}
if(widget2qty < 0 )
{
document.write("You must select some widgets.");
}
if(widget3qty < 0 )
{
document.write("You must select some widgets.");
}
}
HTML:
<h2>Order Form</h2>
<form name="myForm" method="post" action="processForm.html" onsubmit="validateForm()">
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="firstName" id="firstName" size="30" required></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lastName" id="lastName" size="30" required></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="address" id="address" size="30" required></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" name="city" id="city" size="30" required></td>
</tr>
<tr>
<td>Province:</td>
<td><select name="province" id="province" size="1" required>
<option disabled>Select a province</option>
<option value="BC">British Columbia</option>
<option value="AB">Alberta</option>
<option value="SK">Saskatchewan</option>
<option value="MB">Manitoba</option>
<option value="ON">Ontario</option>
<option value="QC">Québec</option>
<option value="NB">New Brunswick</option>
<option value="NS">Nova Scotia</option>
<option value="PE">Prince Edward Island</option>
<option value="NF">Newfoundland</option>
<option value="YK">Yukon</option>
<option value="NWT">Northwest Territories</option>
<option value="NU">Nunavut</option>
</select>
</td>
</tr>
<tr>
<td>Postal Code:</td>
<td><input type="text" name="postalCode" id="postalCode" maxlength="6" minlength="6" required></td>
</tr>
<tr>
<th colspan="2">Order Information</th>
</tr>
<tr>
<td rowspan="3">Select your products:<br>
<span id="productError" class="errorMessage" hidden></span></td>
<td>Widget #1
<input type="text" name="widget1qty" id="widget1qty" size="1" value="0">Qty # <strong>$5.00/ea</strong></td>
</tr>
<tr>
<td>Widget #2
<input type="text" name="widget2qty" id="widget2qty" size="1" value="0">Qty # <strong>$15.00/ea</strong></td>
</tr>
<tr>
<td>Widget #3
<input type="text" name="widget3qty" id="widget3qty" size="1" value="0">Qty # <strong>$25.00/ea</strong></td>
</tr>
<tr>
<td rowspan="3">Shipping Type:</td>
<td>Standard ($5.00)<input type="radio" name="shippingType" id="shippingTypeStandard" value="Standard" checked></td>
</tr>
<tr>
<td>Express ($10.00)<input type="radio" name="shippingType" id="shippingTypeExpress" value="Express"></td>
</tr>
<tr>
<td>Overnight ($20.00)<input type="radio" name="shippingType" id="shippingTypeOvernight" value="Overnight"></td>
</tr>
<tr>
<th colspan="2">Submit Order</th>
</tr>
<tr>
<td><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit Order" onSubmit="validateForm()"></td>
<td><input type="reset" name="btnReset" id="btnReset" value="Reset Form" ></td>
</tr>
</table>
</form>
</body>
`
Is that your full javascript? It is going to be pulling an unexpected end since you haven't finished your closures. If you are using Google Chrome to view the HTML, hit F12 to get the developer tools and view the console.
Also it is getElementById or getElementsByName
document.getElementById(string);
That call can only return one element since Ids are unique.
document.getElementsByName(string);
That call can return multiple elements as names are not unique. Meaning you are going to get an array even if there is one.
You don't need the excess 'else's. If you don't have logic in it, no need to include it.
You are getting the same widget value and handing it into widgetqty1, widgetqty2, and widgetqty3.
You never close the function definition. You need the last ending curly brace (}) to make sure it is a valid function.
You should end up with the following code:
<html>
<head>
<script>
function validateForm(ev){
var province, postalcode, widget1qty, widget2qty, widget3qty;
province = document.getElementById("province");
postalcode = document.getElementById("postalcode");
widget1qty = document.getElementById("widget1qty").innerHTML;
widget2qty = document.getElementById("widget2qty").innerHTML;
widget3qty = document.getElementById("widget3qty").innerHTML;
if(province.value == "Select a province")
{
document.write('Select your province from the list');
// You realize this overwrites your entire document?
province.focus();
return false;
}
if(postalcode.length<6)
{
document.write("You must enter a valid postal code .");
// You realize this overwrites your entire document?
postcalcode.focus();
return false;
}
if(widget1qty == 0 || widget2qty < 0 || widget3qty < 0)
{
document.write("You must select some widgets.");
// You realize this overwrites your entire document?
return false;
}
}
</script>
</head>
<body>
<h2>Order Form</h2>
<form onsubmit="return validateForm()"name="myForm" method="post" action="processForm.html">
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="firstName" id="firstName" size="30" required></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lastName" id="lastName" size="30" required></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="address" id="address" size="30" required></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" name="city" id="city" size="30" required></td>
</tr>
<tr>
<td>Province:</td>
<td><select name="province" id="province" size="1" required>
<option disabled>Select a province</option>
<option value="BC">British Columbia</option>
<option value="AB">Alberta</option>
<option value="SK">Saskatchewan</option>
<option value="MB">Manitoba</option>
<option value="ON">Ontario</option>
<option value="QC">Québec</option>
<option value="NB">New Brunswick</option>
<option value="NS">Nova Scotia</option>
<option value="PE">Prince Edward Island</option>
<option value="NF">Newfoundland</option>
<option value="YK">Yukon</option>
<option value="NWT">Northwest Territories</option>
<option value="NU">Nunavut</option>
</select>
</td>
</tr>
<tr>
<td>Postal Code:</td>
<td><input type="text" name="postalCode" id="postalCode" maxlength="6" minlength="6" required></td>
</tr>
<tr>
<th colspan="2">Order Information</th>
</tr>
<tr>
<td rowspan="3">Select your products:<br>
<span id="productError" class="errorMessage" hidden></span></td>
<td>Widget #1
<input type="text" name="widget1qty" id="widget1qty" size="1" value="0">Qty # <strong>$5.00/ea</strong></td>
</tr>
<tr>
<td>Widget #2
<input type="text" name="widget2qty" id="widget2qty" size="1" value="0">Qty # <strong>$15.00/ea</strong></td>
</tr>
<tr>
<td>Widget #3
<input type="text" name="widget3qty" id="widget3qty" size="1" value="0">Qty # <strong>$25.00/ea</strong></td>
</tr>
<tr>
<td rowspan="3">Shipping Type:</td>
<td>Standard ($5.00)<input type="radio" name="shippingType" id="shippingTypeStandard" value="Standard" checked></td>
</tr>
<tr>
<td>Express ($10.00)<input type="radio" name="shippingType" id="shippingTypeExpress" value="Express"></td>
</tr>
<tr>
<td>Overnight ($20.00)<input type="radio" name="shippingType" id="shippingTypeOvernight" value="Overnight"></td>
</tr>
<tr>
<th colspan="2">Submit Order</th>
</tr>
<tr>
<td><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit Order" ></td>
<td><input type="reset" name="btnReset" id="btnReset" value="Reset Form" ></td>
</tr>
</table>
</form>
</body>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I've a table as given below:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table class="productList" width="600">
<tr>
<th colspan="9" align="left"> Select your product list</th>
</tr>
<tr class="head">
<td width="25" align="right"></td>
<td width="270" align="center">Product Name</td>
<td width="80" align="center">Quantity</td>
<td width="80" align="center">Unit Price</td>
<td width="80" align="center">Line Total</td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
</table>
<label for="net_ammount">Net Ammount:</label>
<input type="text" name="net_ammount" class="summary" disabled>
</body>
</html>
Please help me to find sum of each "Line Total" column input value and show in "Net Amount" input element. every input has same id actually I found them with it's row and column index value..........
data are coming from the server. when user change the product code all field get enable and when user select product total line value showing in "Total Line" column. Please check at http://www.lpgbookkeeping.in/
username: blueflame2014
password: Blueflame#2014
I want when user select product code in datagrid . Sum of all "Line Total" show in Net Amount.
Please somebody help me........
Here is jsfiddle demo of my table
As you donot have any content on linetotal input so this may give NAN, but this method u have to write and call it on button click or any other event where u wana update the textbox.
function getTotal() {
var linetotal =0;
var line = document.forms[0].elements["linetotal"];
for (var i = 0, len = line.length; i < len; i++) {
linetotal = linetotal + parseInt(line[i].value) ;
}
document.getElementById("summary").value = linetotal;
}
ID can never be same ,Id is unique,classes can be same (multiple) in HTML
I by mistake put it in comment instead of answer box :)
Assuming you make the id of your "Net Amount" input element, "summary_net_amount", the answer is something like this:
function calculateLineTotals(){
var $linetotals = $("input[name=\"linetotal\"]");
var sum = 0;
$linetotals.each(function() {
sum += parseInt($(this).val());
});
$("#summary_net_amount").val(sum);
}
Here I have two radio buttons,what I want is if i select radio button student then class row should be visible else profession row is visible. but at a time only one row is visible.
<tr><td>Member</td>
<td><input type="radio" name="member" value="student" onClick = "select_mem()">Student<br></td>
<td><input type="radio" name="member" value="parent" onClick = "select_mem()">Parent<br></td></tr>
<tr><td>Class</td>
<td><select name="class" style="width:50px" >
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option></select></td></tr>
<tr><td>Profession</td>
<td colspan="2"><input type="text" name="prof"</td></tr>
I tried to use this java script
function select_mem()
{
var stu= $('input:radio[name=member]:checked').val();
document.write(stu);
}
Here I was trying to get stu value to see what i will get and then i can put if condition.
Please help me how to do it
This should help
<tr><td>Member</td>
<td><input type="radio" name="member" value="student" onClick = "select_mem(this.value)">Student<br></td>
<td><input type="radio" name="member" value="parent" onClick = "select_mem(this.value)">Parent<br></td></tr>
<tr id="cls"><td>Class</td>
<td><select name="class" style="width:50px" >
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option></select></td></tr>
<tr id="pro"><td>Profession</td>
<td colspan="2"><input type="text" name="prof"</td></tr>
function select_mem(val)
{
if ( val == "student" ){
document.getElementById("cls").style.display = "table-row";
document.getElementById("pro").style.display = "none";
} else {
document.getElementById("cls").style.display = "none";
document.getElementById("pro").style.display = "table-row";
}
}
Try this
<tr><td>Member</td>
<td><input type="radio" name="member" value="student" >Student<br></td>
<td><input type="radio" name="member" value="parent" >Parent<br></td></tr>
<tr><td>Class</td>
<td><select name="class" style="width:50px" >
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option></select></td></tr>
<tr><td class="Prof">Profession</td>
<td colspan="2"><input type="text" name="prof"</td></tr>
$(function() {
$(".class").hide();
$(".Prof").hide();
$('input[type="radio"]').bind('click',function() {
if($(this).val()=="student")
{
$(".class").show();
}
else
{
$(".Prof").show();
}
});
});
Keep ID for two sections..
<tr class="hideclass" id="student"><td>Class</td>
<td><select name="class" style="width:50px" >
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option></select></td></tr>
<tr class="hideclass" id="parent">
<td>Profession</td>
<td colspan="2"><input type="text" name="prof"</td>
</tr>
JQuery:
function select_mem()
{
var stu= $('input[type="radio"]:checked').val();
$('.hideclass').css({"display":"none"});
$('#'+stu).css({"display":"block"});
}
Working JSFiddle
Working code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function select_mem() {
if ($("input[name='member']:checked").val() == "student") {
$('.studentrow').hide();
$('.parentrow').show();
}
else if ($("input[name='member']:checked").val() == "parent") {
$('.parentrow').hide();
$('.studentrow').show();
}
}
</script>
<title></title>
</head>
<body>
<table>
<tr>
<td>Member</td>
<td><input type="radio" name="member" value="student" onClick = "select_mem()">Student<br></td>
<td><input type="radio" name="member" value="parent" onClick = "select_mem()">Parent<br></td>
</tr>
<tr class="studentrow">
<td>Class</td>
<td>
<select name="class" style="width:50px" >
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option>
</select>
</td>
</tr>
<tr class="parentrow">
<td>Profession</td>
<td colspan="2"><input type="text" name="prof"</td>
</tr>
</table>
</body>
</html>
What all I have done is
Do if() on the value of checked radio button
hide / show rows inside if() body
to hide\show rows, I specified class for each row and called .show() and .hide() method on them.
Instead of click use .on('change') event handler.
$(document).ready(function () {
$('input[name=member]').on('change', function () {
var value = $(this).val(); //get the selected option
if(value === 'student'){ //show or hide based on condition
$('.student').show();
$('.parent').hide();
}
else {
$('.parent').show();
$('.student').hide();
}
});
});
You can remove the onclick from the HTML bit, and add an ID for each row to show/hide:
<tr>
<td>Member</td>
<td>
<input type="radio" name="member" value="student">Student<br>
</td>
<td>
<input type="radio" name="member" value="parent">Parent<br>
</td>
</tr>
<tr id="class" style="display:none">
<td>Class</td>
...
</tr>
<tr id="profession" style="display:none">
<td>Profession</td>
...
</tr>
And change your JS, to bind the click event handler:
// Add this piece of script to the page header. Inline, or add to your JS file (preferably).
// On page load, it will attach the handler to the click event. Which means, the code will be executed every time the radio buttons are clicked.
$(function () {
$("input:radio[name=member]").on("click", function () {
$("#class").toggle($(this).val() == "student");
$("#profession").toggle($(this).val() == "parent");
});
});
See it working: http://jsfiddle.net/R4gej/
UPDATE
As you seem to be having problems using this solution, below you can find the whole code as it should be placed in the page, including the jQuery library link:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$("input:radio[name=member]").on("click", function () {
$("#class").toggle($(this).val() == "student");
$("#profession").toggle($(this).val() == "parent");
});
});
</script>
</head>
<body>
<table>
<tr>
<td>Member</td>
<td>
<input type="radio" name="member" value="student">Student<br>
</td>
<td>
<input type="radio" name="member" value="parent">Parent<br>
</td>
</tr>
<tr id="class" style="display:none">
<td>Class</td>
</tr>
<tr id="profession" style="display:none">
<td>Profession</td>
</tr>
</table>
</body>
UPDATE #2
You've posted in the comments that this solution doesn't work. I've tested it a dozen times and can't find a single problem. Are you sure you know what you're doing? Do you know how to debug a piece of Javascript code? Are you adding the jQuery library properly? Are you loading the piece of script in the right place?
It's all more than explained here. Sorry, but I don't see any other way to help you.
Check the following images to see that it works: