By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,705 Members | 1,301 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,705 IT Pros & Developers. It's quick & easy.

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

P: n/a
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>

Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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
Jul 23 '05 #2

P: n/a
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??

Jul 23 '05 #3

P: n/a

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 <oj**@productosmavi.com> 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??


--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
Jul 23 '05 #4

P: n/a
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
Jul 23 '05 #5

P: n/a
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.

Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.