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

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>

Jul 23 '05 #1

Subscribe Post Reply

1868

RobG

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

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

Jul 23 '05 #3

Danny

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

RobG

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

Jul 23 '05 #5

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.

Jul 23 '05 #6

by: Dan R Brown | last post by:

I have a large form that is generated dynamically in a jsp using xml / xslt. So, to break up this form into several "tabbed" sections, I break up the form using <div> tags. Each <div...

Javascript

IE6 won't hide dynamically created span elements

by: Nicholas Couch | last post by:

I have a little form with a couple of dynamically generated list boxes. When the user makes a selection from the first box, the second box is refreshed. When they make a selection from the second...

Javascript

Form images don't appear in form.elements

by: Howard Jess | last post by:

Apparently, form elements of type <input type="image" src="...> are not included in the form's elements collection. I don't understand why not; according to DOM2, all form control elements...

Javascript

Form and nested elements

by: Markus Ernst | last post by:

Hi I have a validation problem with a form and nested divs. I understand what the problem is, but I don't see how to fix it. This is my normal page structure, and it validates: <!DOCTYPE HTML...

HTML / CSS

Basics... addressing html elements in js

by: Luke | last post by:

Elements with name attribute: form, input, textarea, a, frame, iframe, button, select, map, meta, applet, object, param, img (if you know more reply...) Methods of addresing html elements:...

Javascript

Generating dynamic form elements "<asp:button ..."

by: Venus | last post by:

Hello, I am trying to generate a dynamic form at runtime and would like to do it using "<asp: ..." form elements as follows Build up the string that is placed somewhere in the HTML code the...

ASP.NET

Dynmically creating elements in a table works with firefox, opera, but not ie

by: patrickkellogg | last post by:

I have this code when you click the buttom is suppose to add a job history. it works with firefox, opera, but not ie. (please note - new entries don't have all the elements in them yet, but...

Javascript

Nested Show Hide Div Form Elements

by: asilverpeach | last post by:

Hey Guys! Found some great scripts here on this topic but have to make to changes to the code that I can't seem to figure out. First, In the following code clicking on the headers shows the...

Javascript

MSIE Does Not Do OnMouseXXX Events On Span Elements?

by: mavigozler | last post by:

IE7 does not appear to set an event on contained text inside SPAN elements whose 'onclick', 'onmouseover', and 'onmouseout' events, defying the HTML recommendation. Firefox appears to conform. ...

Javascript

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

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

Similar topics