[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

add the value in text field using document.getElementById()

Posted on 2005-05-14
5
Medium Priority
?
1,818 Views
Last Modified: 2008-02-01
Hi experts,

my page has several check boxs, radios , and each item has its value (number). i wanna add all the value to be a amount value and display it in a text field.

i have red the old questions talk about the similar content. but why my friends said should use the:
document.getElementById().nameOfTextField.value = amount;

and until now... my text field function still doesn't work

please help
0
Comment
Question by:yuxie
5 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 1000 total points
ID: 14002917
Hi yuxie,

Well, it should be:

document.getElementById("idOfTextField").value

Techinally, if you want to use name, it would be:

document.getElementsByName("NameOfTextField")[0].value

where the [0] is for the first element with that name in case there are multiple elements of the same name (notice it's getElementsBy, not getElementBy like with id)

I however, would recommend:

document.forms["formname"].elements["elementname"]

or

document.forms["formname"].elementname

as your approach.

Regards,
Zyloch
0
 
LVL 32

Expert Comment

by:Batalf
ID: 14002918
document.getElementById() is used on elements that got an id

example:

<input type="text" id="idOfTextField" name="nameOfTextField">

then you could refer to it like this:

document.getElementById('idOfTextField').value = amount;

If they don't have any id, you have to use the formobject, and refer to it by this syntax

document.formName.nameOfTextField.value = amount;

example:

<form name="formName">
<input type="text" id="idOfTextField" name="nameOfTextField">
</form>

Batalf

0
 
LVL 36

Expert Comment

by:Zyloch
ID: 14002921
Oops. Forgot the .value at the end

Should be document.forms["formname"].elementname.value

Regards...
0
 

Author Comment

by:yuxie
ID: 14003301
i have tried what u teach, but still doesn't show the sum in the textfield. my page is .shtml file.

how can i test my page? there are some codes of my page. r there any parts wrong causing my problem?

form name: quoForm
text field name: amount

<script type="text/javascript">
function calAmount(){
var sum=0;
var v1=0;
v1=document.quoForm.model.value;
sum=v1;
document.quoForm.amount.value=sum;
}
//-->javascript calculate total amount
</script>

<form id="quo" name="quoForm" action="#" method="get">
<select name="model">
      <option value="13000"> HS001 </option>
      <option value="39000"> HI002 </option>
      <option value="55000"> HI003 </option>
</select>
<input type="text" name="amount" size="10" maxlength="20" value="0"/>
<input type="button" value="submit" onclick="calAmount()" />
0
 
LVL 11

Expert Comment

by:raj3060
ID: 14003322
OK try this:

<script type="text/javascript">
function calAmount(){
var sum=0;
sum=document.getElementById('model1').value*1 + document.getElementById('model2').value*1
document.getElementById('amount').value = sum
}
//-->javascript calculate total amount
</script>

<form id="quo" name="quoForm" action="#" method="get">
<select name="model" id="model1">
     <option value="13000"> HS001 </option>
     <option value="39000"> HI002 </option>
     <option value="55000"> HI003 </option>
</select>
<select name="model" id="model2">
     <option value="13000"> HS001 </option>
     <option value="39000"> HI002 </option>
     <option value="55000"> HI003 </option>
</select>

<input type="text" id="amount" size="10" maxlength="20" value="0"/>
<input type="button" value="submit" onclick="calAmount()" />
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question