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

O

ojvm

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>
 
R

RobG

ojvm said:
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>
Click to expand...

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

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

I prefer to access properties directly:

hfield.type = 'text';
hfield.name = 'factura';
hfield.setAttribute('value', '');
Click to expand...

There is no need to set the value to '', it is empty by default.
frmName.appendChild(hfield);
Click to expand...

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);
Click to expand...

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>
Click to expand...

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"/>
Click to expand...

----------------^
Forget the faux XHTML, this is HTML.
<input type="text" name="factura" maxlength="100" /
Click to expand...

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>
Click to expand...

'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>

[...]
 
O

ojvm

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??
 
R

RobG

ojvm said:
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??
Click to expand...

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>
 
O

ojvm

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I want to Display Excel As HTML In js 2
Registration form 13
How to have two html audio players on one page? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Help me sort out this script 1
Help with code 0
How can I add arrows to my FAQ 0
Why is this WordPress comments form not submitting? 1

Members online

Total: 21 (members: 1, guests: 20)
Robots: 437

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,053
Latest member
BrodieSola

Latest Threads

Top