to add elements in html form, this code works but...

**RobG** · Jul 23 '05, 08:58 PM

Re: to add elements in html form, this code works but...

ojvm wrote:[color=blue]
> ok. thanks again for the time spend reading this.
>
> this code adds 2 controls in html form but it places in top of the
> form.
>
> i want this
> control1 control2
> control1 control2
> control1 control2
>
> but i have this
>
> control1 control2 control1 control2 control1 control2 control1
> control2
> control1 control2 control1 control2 control1 control2 control1
> control2
>
> this is the code... just copy and paste[/color]
[...][color=blue]
> <script type=text/javascript>[/color]

Quotes are not always required for HTML attribute values, however the
W3C recommends always using them.

<script type="text/javascript">

[color=blue]
> function add(n,frmName){
> var hfield = document.create Element('input' );
> hfield.setAttri bute('type', 'text');
> hfield.setAttri bute('name', 'factura');[/color]

I prefer to access properties directly:

hfield.type = 'text';
hfield.name = 'factura';
[color=blue]
> hfield.setAttri bute('value', '');[/color]

There is no need to set the value to '', it is empty by default.
[color=blue]
> frmName.appendC hild(hfield);[/color]

formName is the name of the form as a string, better to use a proper
reference to the form which would be n.form ... but I've suggested
another method below.
[color=blue]
> frmName.somenam e = hfield;
> frmName.element s.somename = hfield;
> frmName.insertA djacentElement( "beforeBegin",h field);[/color]

I don't know what is being attempted here, the element has already been
added to the form, are you trying to move it?
[color=blue]
>
> var hfield = document.create Element('input' );
> hfield.setAttri bute('type', 'text');
> hfield.setAttri bute('name', 'cantidad');
> hfield.setAttri bute('value', '0');
> frmName.appendC hild(hfield);
> frmName.somenam e = hfield;
> frmName.element s.somename = hfield;
> frmName.insertA djacentElement( "beforeBegin",h field);
> }
> </script>[/color]

Because you are adding the new elements after the last element named
'factura' and there are going to be multiple 'factura' elements, there
really is no easy way of getting the last instance of it when calling
the function. Therefore, I've added finding the last one to the
function and don't bother to pass anything to it. You could perhaps
pass the name 'factura' as a string.

A commented version below.

function add(){

// Want to add nodes after the last 'factura' element, so find it:
var lastFactura = document.getEle mentsByName('fa ctura');
lastFactura = lastFactura[lastFactura.len gth-1];

// Get the parent node so add new elements to right node
var f = lastFactura.par entNode;

// Create a new 'cantidad' element
var hfield_0 = document.create Element('input' );
hfield_0.type = 'text';
hfield_0.name = 'cantidad';
hfield_0.value = '0';

// Create a new 'factura' element
var hfield_1 = document.create Element('input' );
hfield_1.type = 'text';
hfield_1.name = 'factura';

// Create a BR element
var oBr = document.create Element('br');

// Add them to the parent of the last factura
f.insertBefore( oBr, lastFactura.nex tSibling);
f.insertBefore( hfield_0, oBr.nextSibling );
f.insertBefore( hfield_1, hfield_0.nextSi bling);

}

Using 'insertBefore' ... 'nextSibling' on the last element will insert
the new node after the last one (i.e. it doesn't matter if there isn't
a nextSibling in this case)
[color=blue]
>
> <pre>Ingresa las facturas y los datos correspondiente s</pre>
> </head>
> <body>
>
> <form action="guarda_ Contrarecibo.js p" method="get"
> name="Contrarec ibo">
>
> <table align="center" bgcolor="#00fff f" border="2" cellpadding="5"
> cellspacing="0" >
> <td align="left"> Ingresa el numero de factura </td>
> <td align="left"> Ingresa la cantidad de la factura</td>
> </table>
>
> <div><input type="text" name="cantidad" maxlength="100"
> value="cantidad "/>[/color]

----------------^
Forget the faux XHTML, this is HTML.
[color=blue]
> <input type="text" name="factura" maxlength="100" /[/color]

This extra slash may trick some browsers ----------^ a good reason to
stick to HTML if that is your doctype.

[...]
[color=blue]
>
> <input class=button type=button value="Agregar"
> onclick=add(thi s,Contrarecibo) ><br>[/color]

'this' will be a reference the button, you don't use it for anything so
why pass it? You are using the form's name to pass a reference to the
form. 'this.form' would be better (but isn't required in the suggested
version). And the script should be quoted as it contains '()':

... onclick="add()" ><br>

[...]

--
Rob

**ojvm** · Jul 23 '05, 08:59 PM

Re: to add elements in html form, this code works but...

ok, it worked fine, it's just what i was looking for.
for now i only need to add a button beside the text box to delete the
line if the user whishes. the button is already in the form with your
code i only added a button, so looks like this now.

text1 text2 button
text1 text2 button
text1 text2 button

if the user press in the second button the second line should be
deleted. i hope you can help me (if i not asking too much).
i'm a beginner can you tell me where can i find more of JS??

**Danny** · Jul 23 '05, 08:59 PM

Re: to add elements in html form, this code works but...

Maybe at the folks over
http://www.javascriptkit.com/javatutors/index.shtml or www.irt.org js
section.

Danny

On Thu, 23 Jun 2005 08:12:08 -0700, ojvm <ojvm@productos mavi.com> wrote:
[color=blue]
> ok, it worked fine, it's just what i was looking for.
> for now i only need to add a button beside the text box to delete the
> line if the user whishes. the button is already in the form with your
> code i only added a button, so looks like this now.
>
> text1 text2 button
> text1 text2 button
> text1 text2 button
>
> if the user press in the second button the second line should be
> deleted. i hope you can help me (if i not asking too much).
> i'm a beginner can you tell me where can i find more of JS??
>[/color]

--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/

**RobG** · Jul 23 '05, 08:59 PM

Re: to add elements in html form, this code works but...

ojvm wrote:[color=blue]
> ok, it worked fine, it's just what i was looking for.
> for now i only need to add a button beside the text box to delete the
> line if the user whishes. the button is already in the form with your
> code i only added a button, so looks like this now.
>
> text1 text2 button
> text1 text2 button
> text1 text2 button
>
> if the user press in the second button the second line should be
> deleted. i hope you can help me (if i not asking too much).
> i'm a beginner can you tell me where can i find more of JS??
>[/color]

Please don't use the stuff at javascriptkit, it is awful. Here is an
example of how to clone a table row. Note that the new table
elements are essentially identical to the existing ones, so if you
have ids on the elements to be cloned, you will end up with duplicate
ids (which is not allowed). However, you seem happy with duplicate
names so that's OK.

tbody elements are used to isolate sections of a table. This is
important as when deleteRow is called, the rows inside the tbody are
counted and if there's only one left, the script doesn't delete any.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Header Work</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function cloneRow(x){
// Get the parent row
while ( 'tr' != x.nodeName.toLo werCase() ){
x = x.parentNode;
}
// Clone it
var y = x.cloneNode(tru e);
// Add the new row to the parent of the row (the tbody)
x.parentNode.ap pendChild(y);
}

function deleteRow(x){
// Get the parent row
while ( 'tr' != x.nodeName.toLo werCase() ){
x = x.parentNode;
}
// If only one row left, don't delete it
if ( x.parentNode.ro ws.length < 2 ) {
alert('Can\'t delete the last row');
return;
}
// Must be more than one left, so delete the row
x.parentNode.re moveChild(x);
}
</script>

</head>
<body>
<form action="">
<table border="1">

<tbody> 
<tr>
<td><input type="text" name="cantidad" ></td>
<td><input type="text" name="factura"> </td>
<td><input type="button" value="Add row" onclick="
cloneRow(this);
"></td>
<td><input type="button" value="Delete row" onclick="
deleteRow(this) ;
"></td>
</tr>
</tbody>

<tbody> 
<tr>
<td colspan="4"
style="text-align: right;"><input type="submit"></td>
</tr>
</tbody>

</table>
</form>
</body>
</html>

--
Rob

**ojvm** · Jul 23 '05, 08:59 PM

Re: to add elements in html form, this code works but...

thaks again, really works, its great, i like the table because is more
aesthetic, any way, i'll have 2 choices.

and also i am checking the 2 links you gave me.

and sorry about my english. i'll be practicing.

to add elements in html form, this code works but...

to add elements in html form, this code works but...

Comment

Comment

Comment

Comment

Comment