auto add pre defined input fields in a form and total the same dynamically

[meenakshia]

hi forum:)
i have a form in which i have four input fields for pieces to be entered and 4 fields for amount
what i want is that the first pieces-t1 should be visible and rest three should not show up on the form unless asked for.
can anyone suggest me a way to do this
i have come across a lot of help areas where we can add input fields but in my case i have only predefined 3 fields
the code is below

[COLOR="Navy"]<td>Pieces-t1</td>
<td><input type="text" name="txttp1" tabindex="5"  size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>

Amount-t1
<input type="text" name="txttamt1" tabindex="5"  size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
</td>
</tr>
<tr>
<td>

Pieces-t2
</td>
<td>
<input type="text" name="txttp2" tabindex="5"  size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>

Amount-t2
<input type="text" name="txttamt2" tabindex="5"  size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
</td>
</tr><tr>
<td>

Pieces-t3
</td>
<td>
<input type="text" name="txttp3" tabindex="5"  size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>

Amount-t3
<input type="text" name="txttamt3" tabindex="5"  size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
</td></tr><tr>
<td>

Pieces-t4
</td>
<td>
<input type="text" name="txttp4" tabindex="5"  size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>

Amount-t4
<input type="text" name="txttamt4" tabindex="5"  size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>[/COLOR]
</td></tr>

can you guys suggest me some solution for this?
also is there any way i can get the total of pieces and amount at the end
and a grand total being total pieces*amount
smile always
anand:)

[acoder]

First of all, welcome to Bytes!

When you say "unless asked for", what do you mean exactly by 'asking for'? What triggers the display of those input fields? Is it a button or via some other means?

You can either have them hidden initially and then show them when required, or create them dynamically when required. One last thing: would you want to hide the table rows too which contain the input fields?

[meenakshia]

hi
thanks for the prompt reply for help:)
well what i mean is that i want to make the three fields including the input boxes hidden unless i click on a button to add one by one
that is
pieces-t1 and amount-t1 is visible all the time
when i click on a button to add new
pieces-t2 and amount-t2 should becomes visible(along with their input fields)
next when i press same should happen as above for t3 and last for t4
i m using javascript for front end and msaccess as the database for a standalone machine
thanks
anand:)
smile always

[acoder]

Initially, set all the style display properties of the three rows to "none". Give ids to the rows, then call a function onclick (of the button) which gets the row and sets the style.display to '':
[code=javascript]document.getEle mentById(id).st yle.display = "";[/code]

[meenakshia]

sir
thanks for ur help but i have not understood what u meant by the answer
would you be kind enough to give a illustration for one row code
this way i wud be able to understand what all i have to do.
i hope i m not bugging you with this
thanks
anand
smile always:)

[meenakshia]

hi
i have tried to do the same thing but m facing some problem
pls rectify me where i m wrong in the code

in the script the function is
[CODE=javascript]function test12() {
document.getEle mentById(test1) .style.display = "";
}
[/CODE]
and in the body
[HTML]<input type="text" name="txttp1" id="test1" style="display: none" value="0" tabindex="5" size="4" onkeyup="calc() "></font> /* the function calc() is used to calculate the total of the fields */

<input type="button" onclick="test12 ();">
[/HTML]thanks
anand
smile always
:)

[meenakshia]

hi
sorry to disturb u again
i got it write
i was doing a stupid mistake of missing "" around the id of the text in getelementbyid area
anyways
thanks a tonn for the help:)
smile always
anand
thanks once again:)

[meenakshia]

hi one more question
is it possible to hide the text also along with the input fields?
that wud be great to do if i can hide input fields along with text and then unhide it

[acoder]

Yes, if you hide the whole row instead of just the input field. Give the ID to the row instead of the input field.

PS. please use code tags when posting code. See How to ask a question.

[meenakshia]

hi
thanks for the reply
well yes i will take care of the posting rquirements before posting any questions
but the fact is you really helped me up in this regard:)
thanks a million
smile always:)
anand

[acoder]

You're welcome. Glad I was able to help. If you have more questions, post back to the forum :)