Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > to add elements in html form, this code works but...

Reply
Thread Tools

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

 
 
ojvm
Guest
Posts: n/a
 
      06-22-2005
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

//----------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>CONTRARECIBO</title>
<link rel="stylesheet" type="text/css" href="./CSS/FORMATO.css">

<script type=text/javascript>
function add(n,frmName){
var hfield = document.createElement('input');
hfield.setAttribute('type', 'text');
hfield.setAttribute('name', 'factura');
hfield.setAttribute('value', '');
frmName.appendChild(hfield);
frmName.somename = hfield;
frmName.elements.somename = hfield;
frmName.insertAdjacentElement("beforeBegin",hfield );

var hfield = document.createElement('input');
hfield.setAttribute('type', 'text');
hfield.setAttribute('name', 'cantidad');
hfield.setAttribute('value', '0');
frmName.appendChild(hfield);
frmName.somename = hfield;
frmName.elements.somename = hfield;
frmName.insertAdjacentElement("beforeBegin",hfield );
}
</script>

<pre>Ingresa las facturas y los datos correspondientes</pre>
</head>
<body>

<form action="guarda_Contrarecibo.jsp" method="get"
name="Contrarecibo">

<table align="center" bgcolor="#00ffff" 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"/>
<input type="text" name="factura" maxlength="100" /
value="factura"></div>

<input class=button type=button value="Agregar"
onclick=add(this,Contrarecibo) ><br>

<button type="submit" >Guardar</button>
<button type="reset">Borrar</button>
</form>

</body>
</html>

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      06-23-2005
ojvm wrote:
> 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

[...]
> <script type=text/javascript>


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

<script type="text/javascript">


> function add(n,frmName){
> var hfield = document.createElement('input');
> hfield.setAttribute('type', 'text');
> hfield.setAttribute('name', 'factura');


I prefer to access properties directly:

hfield.type = 'text';
hfield.name = 'factura';

> hfield.setAttribute('value', '');


There is no need to set the value to '', it is empty by default.

> frmName.appendChild(hfield);


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.

> frmName.somename = hfield;
> frmName.elements.somename = hfield;
> frmName.insertAdjacentElement("beforeBegin",hfield );


I don't know what is being attempted here, the element has already been
added to the form, are you trying to move it?

>
> var hfield = document.createElement('input');
> hfield.setAttribute('type', 'text');
> hfield.setAttribute('name', 'cantidad');
> hfield.setAttribute('value', '0');
> frmName.appendChild(hfield);
> frmName.somename = hfield;
> frmName.elements.somename = hfield;
> frmName.insertAdjacentElement("beforeBegin",hfield );
> }
> </script>


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.getElementsByName('factura');
lastFactura = lastFactura[lastFactura.length-1];

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

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

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

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

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

}


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)

>
> <pre>Ingresa las facturas y los datos correspondientes</pre>
> </head>
> <body>
>
> <form action="guarda_Contrarecibo.jsp" method="get"
> name="Contrarecibo">
>
> <table align="center" bgcolor="#00ffff" 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"/>


----------------^
Forget the faux XHTML, this is HTML.

> <input type="text" name="factura" maxlength="100" /


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

[...]

>
> <input class=button type=button value="Agregar"
> onclick=add(this,Contrarecibo) ><br>


'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
 
Reply With Quote
 
 
 
 
ojvm
Guest
Posts: n/a
 
      06-23-2005
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??

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      06-24-2005
ojvm wrote:
> 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??
>


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.toLowerCase() ){
x = x.parentNode;
}
// Clone it
var y = x.cloneNode(true);
// Add the new row to the parent of the row (the tbody)
x.parentNode.appendChild(y);
}

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

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

<tbody> <!-- This tbody contains only the row(s) to be cloned -->
<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> <!-- Other tbodys can contain whatever -->
<tr>
<td colspan="4"
style="text-align: right;"><input type="submit"></td>
</tr>
</tbody>

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


--
Rob
 
Reply With Quote
 
ojvm
Guest
Posts: n/a
 
      06-24-2005
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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
how to add several HTML elements to the web page dynamically using AJAX ton ASP .Net 3 08-22-2008 05:03 PM
When I turn on my PC, it works, works, works. Problem! Fogar Computer Information 1 01-17-2006 12:57 AM
How do you add HTML elements dynamically? mouseit101@gmail.com Javascript 8 01-11-2006 07:05 PM
Add elements to Aspx page from vb.net code? Thanks. Shapper ASP .Net 3 08-17-2005 08:28 PM
After rebooting my PC works, works, works! Antivirus problem? Adriano Computer Information 1 12-15-2003 05:30 AM



Advertisments