Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Sorry, I am reallllly new to Javascript/HTML. Okay so I am writing a program that shows the user a form. On that form they enter the price of an object they bought and click the shipping they want (standard or expedited). Then they click calculate and then it will show the S&H price, tax, and the total of the order. So the problem I am having is being able to communicate between the javascript code and the html form. We are also using very bacis techniques so I do not know how to do anything advanced. the code is here:
<head>
<title> </title>
<script type="text/javascript">
<!--
//this will prompt the user to enter the price(s) of their item(s) and add them together to get a 'total' of what they have input so far.
function calc()
{
var iPrice = document.getElementById("iPrice").value;
iPrice=parseInt(iPrice);
if(iPrice <=0)
alert("Please enter a number greater than 0");
var shipMeth=document.getElementById("shipMethS").checked;
var shippingPrice;
if(shipMeth)
{
if(iPrice<0 && iPrice <25)
shippingCost =4.50;
else if(iPrice <50)
shippingCost=7;
else
shippingCost=10.25;
}
else
{
if(iPrice<0 && iPrice <25)
shippingCost =9.50;
else if(iPrice <50)
shippingCost=12;
else
shippingCost=15.25;
}
shippingCost=parseFloat(shippingCost);
var tax = iPrice*.06;
tax=parseFloat(tax);
var totalPrice=iPrice+shippingCost+tax;
document.getElementById("totalPrice").value=totalPrice;
}
-->
</script>
<body>
<form>
<p><label> Price: $
<input name="iPrice"id="iPrice"type="text"size="25"/>
</label>
</p>
<p>Shipping Method (Please only select one)</p>
<p><Label>Standard
<input name="CB"type="checkbox"value="Standard"id="shipMethS"/>
</label>
<label>Expedited
<input name="CB"type="checkbox"value="Expedited"id="shipMethE"/>
</label>
</p>
<p><label>S&H Charges:
<input name="S&H Charges" type="text" size="25" readOnly />
</label>
</p>
<p><label>Tax (#6.00%):
<input name="taxCharges" type="text" size="25" readOnly />
</label>
</p>
<p><label>Total Price:
<input name="totalPrice" type="text" size="25" value="totalPrice" readOnly />
</label>
</p>
<p>
<input type="button"value="Calculate"onClick="calc()"/>
<input type="reset"value="Clear"/>
</p>
</form>
<input name="totalPrice" type="text" size="25" value="totalPrice" readOnly />
needs to be
<input id="totalPrice" name="totalPrice" type="text" size="25" value="totalPrice" readOnly />
if you want to use "getElementById"
document.getElementById("totalPrice").value=totalPrice;
Then add the other fields at the end of the function:
document.getElementById("taxCharges").value=tax;
document.getElementById("shCharges").value=shippingCost;
You definitely don't need the comment tag in the script, but it shouldn't hurt anything. It looks like you could use more validation to make sure that there is a number in the input.
You are missing many things to make this works if this you are saying this the whole thing, see all of the changes I have done to it.
<html>
<head>
<title> </title>
<script type="text/javascript">
<!--
//this will prompt the user to enter the price(s) of their item(s) and add them together to get a 'total' of what they have input so far.
-->
function calc()
{
var iPrice = document.getElementById("iPrice").value;
iPrice=parseInt(iPrice);
if(iPrice <=0)
alert("Please enter a number greater than 0");
var shipMeth=document.getElementById("shipMethS").checked;
var shippingPrice;
if(shipMeth)
{
if(iPrice<0 && iPrice <25)
shippingCost =4.50;
else if(iPrice <50)
shippingCost=7;
else
shippingCost=10.25;
}
else
{
if(iPrice<0 && iPrice <25)
shippingCost =9.50;
else if(iPrice <50)
shippingCost=12;
else
shippingCost=15.25;
}
shippingCost=parseFloat(shippingCost);
var tax = iPrice*.06;
tax=parseFloat(tax);
var totalPrice=iPrice+shippingCost+tax;
document.getElementById("totalPrice").value=totalPrice;
}
</script>
</head>
<body>
<form>
<p><label> Price: $
<input name="iPrice" id="iPrice" type="text" size="25"/>
</label>
</p>
<p>Shipping Method (Please only select one)</p>
<p><Label>Standard
<input name="CB" type="checkbox" value="Standard" id="shipMethS"/>
</label>
<label>Expedited
<input name="CB" type="checkbox" value="Expedited" id="shipMethE"/>
</label>
</p>
<p><label>S&H Charges:
<input name="S&H Charges" type="text" size="25" readOnly />
</label>
</p>
<p><label>Tax (#6.00%):
<input name="taxCharges" type="text" size="25" readOnly />
</label>
</p>
<p><label>Total Price:
<input id="totalPrice" type="text" size="25" value="totalPrice" readOnly />
</label>
</p>
<p>
<input type="button" value="Calculate" onClick="calc()"/>
<input type="reset" value="Clear"/>
</p>
</body>
</html>
Related
<!DOCTYPE html>
<head lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</head>
<body>
<section><b><b>
<form action="" target="_blank">
Bill No: <input type="text" name="bill no" size="">
<input type="submit" class="button" value="Add">
<input type="submit" class="button" value="Complete all entries">
<br><br>
Bill Details: <input type="text" name="bill no" size="50">
<br><br>
Amount: <input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="53">
<br><br>
<textarea rows="5" cols="50"></textarea>
<br><br>
<label for="To Pay">To Pay:</label>
<select name="mydropdown" id="To Pay">
<option value="Director">Director</option>
<option value="Cheif">Cheif</option>
<option value="RPC">RPC</option></select>
Cheque No: <input type="text" name="Cheque No">
<br><br>
Amount: <input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="15">
Date: <input type="date" placeholder="dd-mm-yyyy" name="Dated">
<input type="submit" class="button" value="Ok">
</form>
</article>
</section>
</body>
</html>
i want to crate a form in which i have two buttons on the top when i click on add button then it will be work as bill ,details bill no and amount = textbox(textarea) then these all entry are shown in the textarea and add another entry that all are show as a tablewhen when i complete my all entries i click on complete all entries and than total amount off all entries are show on the bottom of textarea and this total amount automatically show in the bottom amount field. please suggest how can i do this task
As you know the usage of jquery, so I use jquery to get the element:
$(document).ready(function(){
var total=0;
var temp="";
var tempResult=$("#tempResult");
$("#btn1").click(function(){
var billNo=$("#billNo").val();
var billDetails=$("#billDetails").val();
var amnt=$("#amnt").val();
tempResult.val(tempResult.val()+ billNo + "-" +billDetails+ "-" +amnt+"\n");
total+=parseFloat(amnt);
});
$("#btn2").click(function(){
tempResult.val(tempResult.val()+ total);
$("#totalAmount").val(total);
});
});
And I change :
<input type="text" name="amount" pattern="[0-9]+" title="please enter amount"size="15">
to
<input type="text" name="amount" id="totalAmount" pattern="[0-9]+" title="please enter amount"size="15">
That all.
First, you need to give an id for every element for example:
<input type="text" id="billNo" size="">
<textarea id="tempResult" rows="5" cols="50"></textarea>
And then add function to capture the button click event.
Change the following HTML:
<input type="submit" class="button" value="Add">
To:
<input type="submit" class="button" value="Add" onclick="addEntry()">
after that add a function:
function addEntry()
{
}
In this function,using the following coding to get the value of the element:
var billNo=document.getElementById("billNo").value;
Finally, using the following coding to write what you want to add to textarea:
var tempResult=document.getElementById("tempResult");
tempResult.value=billNo
For append value to textarea:
tempResult.value+=*what you want to add to textarea*
To parse input value as an integer, you need to use parseInt function, for decimal no. you may use parseFloat function.
Now, you have all the ingredient to complete your function.
For the total amount, ha ha, let you try first.
i am using html and jquery to do some form vaildations
for ex if user click on a field and doesn't enter any thing, than he clicks on different field... i want to turn field border to red. this way user will know that he can not skip this field...
also when user clicks on button submit, than i also want to do this same, if field is empty than turn border to red
below is what i have so far, is there a better way to do this? bbc it seem like i am repeating alot of same code
on up side it does work fine, so guess i can just keep on repeating code
note i have like 20+ fields so jquery function will be long
forgot to tell that i am using asp fields:
<asp:TextBox ID="FirstNameCTB" ClientIDMode="Static" class="input form-control input-md" runat="server"></asp:TextBox>
javascript code:
<script type="text/javascript">
$(function () {
$('#FirstNameCTB').blur('input', function () {
if ($('#<%=FirstNameCTB.ClientID%>').val().trim() == '')
$('#<%=FirstNameCTB.ClientID%>').css('border-color', 'red');
else
$('#<%=FirstNameCTB.ClientID%>').css('border-color', '');
});
$('#LastNameCTB').blur('input', function () {
if ($('#<%=LastNameCTB.ClientID%>').val().trim() == '')
$('#<%=LastNameCTB.ClientID%>').css('border-color', 'red');
else
$('#<%=LastNameCTB.ClientID%>').css('border-color', '');
});
$('.CHECKOUTLBC').click(function () {
if ($('#<%=FirstNameCTB.ClientID%>').val().trim() == '') {
$('#<%=FirstNameCTB.ClientID%>').css('border-color', 'red');
return false; // dont go to server side
} else {
$('#<%=FirstNameCTB.ClientID%>').css('border-color', '');
}
if ($('#<%=LastNameCTB.ClientID%>').val().trim() == '') {
$('#<%=LastNameCTB.ClientID%>').css('border-color', 'red');
return false; // dont go to server side
} else {
$('#<%=LastNameCTB.ClientID%>').css('border-color', '');
}
});
});
</script>
https://jqueryvalidation.org/ can be your solution.
Also here's the examples.
https://jqueryvalidation.org/files/demo/
This plugin has, red border, submit control etc.
Also this plugin will be good.
http://www.formvalidator.net/#reg-form
$.validate({
modules : 'location, date, security, file',
onModulesLoaded : function() {
$('#country').suggestCountry();
}
});
// Restrict presentation length
$('#presentation').restrictLength( $('#pres-max-length') );
<form action="" id="registration-form">
<p>
E-mail
<input name="email" data-validation="email">
</p>
<p>
User name
<input name="user" data-validation="length alphanumeric"
data-validation-length="3-12"
data-validation-error-msg="User name has to be an alphanumeric value (3-12 chars)">
</p>
<p>
Password
<input name="pass_confirmation" data-validation="strength"
data-validation-strength="2">
</p>
<p>
Repeat password
<input name="pass" data-validation="confirmation">
</p>
<p>
Birth date
<input name="birth" data-validation="birthdate"
data-validation-help="yyyy-mm-dd">
</p>
<p>
Country
<input name="country" id="country" data-validation="country">
</p>
<p>
Profile image
<input name="image" type="file" data-validation="mime size required"
data-validation-allowing="jpg, png"
data-validation-max-size="300kb"
data-validation-error-msg-required="No image selected">
</p>
<p>
User Presentation (<span id="pres-max-length">100</span> characters left)
<textarea name="presentation" id="presentation"></textarea>
</p>
<p>
<input type="checkbox" data-validation="required"
data-validation-error-msg="You have to agree to our terms">
I agree to the terms of service
</p>
<p>
<input type="submit" value="Validate">
<input type="reset" value="Reset form">
</p>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
Assuming all your form inputs are called input, you could loop through them and apply the function with something similar to this.
var inputs = document.getElementsByTagName('input');
for(n = 0; n < inputs.length; n++){
$(function () {
inputs[n].blur('input', function () {
if (inputs[n].val().trim() == '')
inputs[n].css('border-color', 'red');
else
inputs[n].css('border-color', '');
});
});
}
couple things:
issue maybe be that javascript is beeing run before the controls
you should not mix core javascript with jquery libary
you do not need loop when using blur, on, click, etc jquery functions
keeping all those above things in mind, below is a better solutions. works for me
$(function () {
$(".input").blur(function () {
if ($(this).val().trim() == '')
$(this).css('border-color', 'red');
else
$(this).css('border-color', '');
});
});
Have a look at this example below.
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
Have a look at this example:
Thanks to having to work so much, I am completely confused on JavaScript. I have tried so many things and have not gotten my form to validate even once. I have to use plain JavaScript to:
**Validate the email - the email must have # and the domain should be yahoo.com
Phone No.: Must contain exactly 10 digits
Age: Must be a positive number less than 120
The validation should happen when the user submits the form. In case any of the above validation fails, the corresponding fields should be highlighted in red
If the validation is successful, the page should redirect to http://yahoo.com**
I'm not looking for someone to necessarily give me the exact answer, but push me in the right direction, because I do have a basic understanding of JS.
<!DOCTYPE HTML>
<div id="form">
<form name="myForm" action="http://fsu.edu" onsubmit="return validateForm()" method="post">
<head>
<link rel="stylesheet" HREF="C:\Users\Neshia\Desktop\CGS3066\Form Validation Style Sheet.css" TYPE="text/css">
<script>
function ValidatemyForm()
{
var email = document.myForm.email;
var phone = document.myForm.phonenumber;
var age = document.myForm.age;
}
{
age = age.replace(/[^0-9]/g, '');
if(age.length != 10)
{
alert("not 10 digits");
}
else {
alert("yep, its 10 digits");
}
}
</script>
</head>
<div id="header">
<hr id="HR1">
<h1> Web Programming: Assignment 3 </h1>
<p> Form Validation with Javascript </p>
<hr id="HR2">
</div>
<div id="input">
First name: <br>
<input type="text" name="firstname">
<br>
Last name: <br>
<input type="text" name="lastname">
<br>
FSU Email: <br>
<input type= "text" name="email">
<br>
Phone No.: <br>
<input type="numbers" name="phonenumber">
<br>
Age: <br>
<input type="numbers" name="age">
</div>
<hr id="HR3">
<br>
<div id="Sex">
Sex: <br>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
<br>
<input type="radio" name="sex" value="other"> Other
</div>
<hr id="HR32">
<div id="languages">
Programming languages you want to learn: <br>
<input type="checkbox" name="python" value="python"> Python
<br>
<input type="checkbox" name="java" value="java"> Javascript
<br>
<input type="checkbox" name="C++" value="C++"> C++
<br>
<input type="checkbox" name="lisp" valie="lisp"> Lisp
</div>
<hr id="HR32">
<div id="submit">
<input type="Submit" value="Submit">
</div>
<hr id="HR12">
</form>
</div>
Aneshia,
You have a few problems. First the function listed in the "onsubmit" attribute of your form does not match your javascript function. Also there are some problems with your {} braces. After you get that fixed be sure to call .value after your form elements to get the value of the input ie. (document.myForm.email.value).
Here is the code with some fixes:
<form name="myForm" onsubmit="return validateForm()" method="post">
<head>
<link rel="stylesheet" HREF="C:\Users\Neshia\Desktop\CGS3066\Form Validation Style Sheet.css" TYPE="text/css">
<script>
function validateForm() {
var email = document.myForm.email.value;
var phone = document.myForm.phonenumber.value;
var age = document.myForm.age.value;
console.log(age)
var okToSubmit = true;
age = age.replace(/[^0-9]/g, '');
if (age.length != 10) {
alert("not 10 digits");
okToSubmit = false;
} else {
alert("yep, its 10 digits");
}
if (age > 120 || age < 0) {
alert("Must be a positive number less than 120");
okToSubmit = false;
}
return okToSubmit;
}
Another thing that may help is to bring up the javascript console in your browser and run your function manually in the console by typeing 'validateForm();'
You may be intrigued to note that html5 now validates some of these forms so you do not need to use Javascript.
See HTML Form Validation
You asked about email, age and phone.
Consider the following examples::
<form>
<input type="email" name="email" pattern=".*#yahoo\.com"> <br>
<input type="number" min="18" max="120" name="age"> <br>
<input type="tel" name="phonenumber"> <br>
<input type='submit'>
</form>
If you want the fields to be required you could use
<form>
<input type="email" name="email" pattern=".*#yahoo\.com" required> <br>
<input type="number" min="18" max="120" name="age" required> <br>
<input type="tel" name="phonenumber" required> <br>
<input type='submit'>
</form>
See http://diveintohtml5.info/forms.html
In your comments a few days later, you mentioned needing to do this in Javascript. I think the best way is still using HTML5 and a clever way to do this if you have to use javascript might be to set the input attributes through javascript. Something like this could get you started on the logic.
While I generally do not like getting this specific in the code, I commented things so you can get a general feel for how you can work with data in javascript.
function validate(event){
// First we stop the form from even submitting until we run the code below
event.stopPropagation();
// Here we are going to place a reference to the objects we want to validate in an array
var references = ['email','age','phonenumber'];
// Now we are going to grab our list of inputs from the page
var inputs = document.getElementsByTagName('input');
// We run through a for loop to look for specific elements
for(i = 0; i < inputs.length; i++){
/*
This line simply asks, is the 'name' of this element inside our references array.
This works by using the indexOf function which is built into Javascript.
indexOf simply provides the index where it finds the phrase you are looking for.
In this example, we are using it to see if an index exists by checking it against negative 1
*/
if(references.indexOf(inputs[i].getAttribute('name')) > -1){
// A switch block lets you present a different outcome based on the criteria being looked for
switch(inputs[i].getAttribute('name')){
// In this case we see if we get an email named element
case 'email':
// We set the attributes to match our requirements for this email element and so on through this switch block for age and phonennumber
inputs[i].setAttribute('type','email');
inputs[i].setAttribute('pattern','.*#yahoo\.com');
break;
case 'age':
inputs[i].setAttribute('type','number');
inputs[i].setAttribute('min',18);
inputs[i].setAttribute('max',120);
break;
case 'phonenumber':
inputs[i].setAttribute('type','tel');
break;
}
// When we are all done, we set the elements to be required
inputs[i].setAttribute('required',true);
}
}
// Now we submit the form
event.submit();
}
<form>
<input type="text" name="email"> <br>
<input type="text" name="age"> <br>
<input type="text" name="phonenumber"> <br>
<input type='submit' onclick='validate(event)'>
</form>
<input type='text' id='txtEmail'/>
<input type='submit' name='submit' onclick='Javascript:checkEmail();'/>
<script language="javascript">
function checkEmail() {
var email = document.getElementById('txtEmail');
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email.value)) {
alert('Please provide a valid email address');
email.focus;
return false;
}
}
</script>
I'm trying to get the elements from textboxes nameBox and foodBox to be displayed in the paragraph id=message after the submit button is clicked, with the message:
“Hello <name in namebox>! We want to let you know that <food in foodbox> has 50% discount in our restaurant!”
But i can't figure out how to do that. I'm pretty sure i'm doing something (if not all) wrong but since i'm new at this i can't figure it out what.
<body>
<br>
<br>
<div>
<p id="message"></p>
</div>
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
<button id="submitButton">Submit</button>
<script>
var parent=document.getElementById("message");
var child=document.getElementById("nameBox");
parent.removeChild(child);
</script>
</body>
That's because parent is not the parent of child. To make it so, edit your code to put the two input elements inside the <p> tag:
<p id="message">
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
</p>
Here you go :
<html>
<head>
<script>
function showText(){
var name=document.getElementById("nameBox").value;
var food=document.getElementById("foodBox").value;
document.getElementById("msg").innerHTML="Hello " + name + " ! We want to let you know that has 50% discount in our restaurant! for " + food;
}
</script>
</head>
<body>
<br>
<br>
<div id="msg">
</div>
Enter your name:
<input type="text" id="nameBox" value=""/><br>
Enter your favorite food
<input type="text" id="foodBox" value=""/><br>
<input type="button" id="submitButton" onclick="showText()" value="Submit" />
</body>
</html>
You can make your alignments as you wish, try to use firebug (https://getfirebug.com/) in case of finding UI related issues. It is pretty easy to figure out what is wrong in the UI
Check your HTML. Maybe it should look like this?
<div id="message">
Enter your name:
<input type="text" id="nameBox" value=""><br>
Enter your favorite food
<input type="text" id='foodBox' value=""><br>
<button id="submitButton">Submit</button>
</div>
You can call function on clicking submit button and then change the message.
<input type="button" id="submit" value="Submit" onclick="somefunction()"/>
Here is the javascript:
function somefunction() {
var fieldNameElement = document.getElementById('message');
fieldNameElement.innerHTML = “Hello ! We want to let you know that has 50% discount in our restaurant!” ;
}
While changing the innerHTML you can add appropriate formatting tags as well.
Also you should add inputs in a table, and add border's and required formatting if required:
<table>
<tr>
<td>
Enter your name:
</td>
<td>
<input type="text" id="nameBox" value=""><br>
</td>
</tr>
<tr>
<td>
Enter your favorite food
</td>
<td>
<input type="text" id='foodBox' value=""><br>
</td>
</tr>
</table>
You can also think about using a Javascript library which provides lot of methods to make your life easy, would suggest JQUERY
Cheers !!
Hey guys i am having some problems with javascript, and i was wondering whether you could help me out?
This is my HTML code
<div class="Answer1">
<form name="form">
Enter your answer here :
<input type="text" size="10" name="answer" value="">
<input type="button" value="Check" onclick="result();">
</form>
</div>
<!--2st sum -->
<div class="Answer2">
<form name="form">
Enter your answer here :
<input type="text" size="10" name="answer" value="">
<input type="button" value="Check" onclick="result2();">
</form>
</div>
and this is my javascript
function result() {
var score = (document.form.answer.value);
if(score == 8) {
document.location.href="CorrectAdditionAnswer.html"
} else {
document.location.href="IncorrectAddition.html"
}
}
function result2() {
var score = (document.form.answer.value);
if(score == 8) {
document.location.href="CorrectAdditionAnswer2.html"
} else {
document.location.href="IncorrectAddition.html"
}
}
If I comment out one of these it works perfectly fine but if its not commented it doesnt work :( I dont understand what ive done wrong :(
You have two form with the same value for name attribute and two input with the same value for name.
js
function result()
{
var score =document.getElementsByName('answer1')[0].value;
if(score == 8)
{
document.getElementsByName('form1')[0].action = "http://www.wordpress.com";
document.getElementsByName('form1')[0].submit();
}
else
{
document.getElementsByName('form1')[0].action = "http://www.bing.com";
document.getElementsByName('form2')[0].submit();
}
}
function result2()
{
var score = document.getElementsByName('answer2')[0].value;
if(score == 8)
{
document.getElementsByName('form2')[0].action = "http://www.wordpress.com";
document.getElementsByName('form2')[0].submit();
}
else
{
document.getElementsByName('form2')[0].action = "http://www.bing.com";
document.getElementsByName('form2')[0].submit();
}
}
html
<div>
<form name="form1">
Enter your answer here :
<input type="text" size="10" name="answer1" value="">
<input type="button" value="Check" onclick=" result();">
</form>
</div>
<!--2st sum -->
<div class="Answer2">
<form name="form2">
Enter your answer here :
<input type="text" size="10" name="answer2" value="">
<input type="button" value="Check" onclick=" result2();">
</form>
</div>
To have same id for several elements put javascript in 'gridlock'. Identify your element with an unique id name is usually faster and easier for DOM / Javascript / jQuery to find the node/element faster.
This format is appropriate method if all of elements are in the same page.
<form name="form1">
Enter your answer here :
<input type="text" size="10" id="answer1" name="answer1" value="">
<input type="button" value="Check" onclick="result1();">
</form>
</div>
<!--2st sum -->
<div class="Answer2">
<form name="form2">
Enter your answer here :
<input type="text" size="10" id="answer2" name="answer2" value="">
<input type="button" value="Check" onclick="result2();">
</form>