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>CONTRARE CIBO</title>
<link rel="stylesheet " type="text/css" href="./CSS/FORMATO.css">

<script type=text/javascript>
function add(n,frmName){
var hfield = document.create Element('input' );
hfield.setAttri bute('type', 'text');
hfield.setAttri bute('name', 'factura');
hfield.setAttri bute('value', '');
frmName.appendC hild(hfield);
frmName.somenam e = hfield;
frmName.element s.somename = hfield;
frmName.insertA djacentElement( "beforeBegin",h field);

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>

<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 "/>
<input type="text" name="factura" maxlength="100" /
value="factura" ></div>

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

<button type="submit" >Guardar</button>
<button type="reset">Bo rrar</button>
</form>

</body>
</html>

Jul 23 '05 #1

Subscribe Reply

1896

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.create Element('input' );
hfield.setAttri bute('type', 'text');
hfield.setAttri bute('name', 'factura');
I prefer to access properties directly:

hfield.type = 'text';
hfield.name = 'factura';
hfield.setAttri bute('value', '');
There is no need to set the value to '', it is empty by default.
frmName.appendC hild(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.somenam e = hfield;
frmName.element s.somename = hfield;
frmName.insertA djacentElement( "beforeBegin",h field);
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.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>
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)

<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 "/>
----------------^
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(thi s,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**@productos mavi.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.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

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

Similar topics

40776

Problems with form elements that are hidden with <div style="display:none">

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 style="display:none"> can be displayed by setting the style attribute to "display:", or hidden with "display:none". This gives the illusion that the person filling out the form is switching from page to page...without the overhead of extra hits on the server,...

Javascript

4758

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 box, I concatenate the selections from the two boxes and add the string to a list at the top of the form, using createElement and appendChild. The list is actually a bunch of span elements contained within a div. Each span element includes a small...

Javascript

1629

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 in the form are part of the elements collection. Further, this element doesn't appear in the (DOM0) document.images collection either; so it's really not well-accounted for.

Javascript

7406

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 PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

HTML / CSS

3343

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: <form name="myform"> <input name="myinput" /> </form> 1. var input = document.forms.myform.myinput;//from nn3+ 2. var input = document.forms.myinput;//from nn3+

Javascript

3589

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 same way like regular input fields can. strForm = "<form name=""myForm"" runat=""server"">" & vbCrLf strForm += "<asp:button name=""myName"" .... runat=""server"" />" & vbCrLf

ASP.NET

1930

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 enough to get the idea). Here is the code: ----------------------------------------------------------------- <html>

Javascript

16764

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 div information. I want a nested show hide element though. So when you click on "Do you have carpets to be cleaned?" Small Rooms & Medium Rooms appears (that I got working) But Then when you click on Small rooms or medium rooms i want the three lines...

Javascript

2347

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. Is that so?

Javascript

10593

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10340

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9163

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7626

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6858

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5527

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5663

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3830

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

3000

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General