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

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
yuxieAsked:
Who is Participating?
 
ZylochCommented:
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
 
BatalfCommented:
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
 
ZylochCommented:
Oops. Forgot the .value at the end

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

Regards...
0
 
yuxieAuthor Commented:
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
 
raj3060Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.