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

Discussion in 'Javascript' started by ojvm, Jun 22, 2005.

  1. ojvm

    ojvm Guest

    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>
    ojvm, Jun 22, 2005
    #1
    1. Advertising

  2. ojvm

    RobG Guest

    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
    RobG, Jun 23, 2005
    #2
    1. Advertising

  3. ojvm

    ojvm Guest

    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??
    ojvm, Jun 23, 2005
    #3
  4. ojvm

    RobG Guest

    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
    RobG, Jun 24, 2005
    #4
  5. ojvm

    ojvm Guest

    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.
    ojvm, Jun 24, 2005
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. F. GEIGER
    Replies:
    3
    Views:
    768
    F. GEIGER
    Aug 6, 2004
  2. Jake Barnes
    Replies:
    9
    Views:
    762
    dave cutts
    Feb 21, 2006
  3. patrickkellogg
    Replies:
    3
    Views:
    159
  4. Replies:
    5
    Views:
    186
  5. Replies:
    4
    Views:
    180
Loading...

Share This Page