SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question adding form values on page without page reload

    hi guys..

    i have a html form, fields are

    product code --> combo box
    product description --> text field
    Qty --> text field
    UOM --> text field
    Add button --> button (not submit button)

    now i want to have a script which holds the data insert by user
    on page stored in some variable or may be array.. on each click..
    and it should show on page too.. like grid..

    how to i do this with javascript

  2. #2
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,423
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi
    well i have check the code.. but found like.. values are difficult to capture in variable..

    is there any other solution for that..

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a little demo I wrote for someone recently. It is very similar to what you want.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Build Table from Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name='author' content='Mike Foster (Cross-Browser.com)'>
    <style type='text/css'>
    body {
      color: #000;
      background: #FFF;
    }
    h1 {
      font-size: large;
    }
    table {
      padding: 2px;
      border: 1px solid red;
    }
    td {
      padding: 4px 10px;
      border: 1px solid blue;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      if (document.getElementById
          && document.createTextNode
          && document.getElementById('table1').insertRow
         )
      { 
        document.getElementById('f1BtnAdd').onclick = addToTable;
      }
      else {
        alert('Your browser is old. Get Opera or Firefox!');
      }
    }
    function addToTable()
    {
      var com = document.getElementById('f1TxtComment').value;
      var e = document.getElementById('f1SelEvent');
      var evt = e.options[e.selectedIndex].text;
      if (!com.length) { alert('Please enter a comment.'); }
      else if (!e.selectedIndex) { alert('Please select an event.'); }
      else {
        var d = new Date();
        var tbl = document.getElementById('table1');
        var row = tbl.insertRow(1);
        var cell = row.insertCell(0);
        cell.appendChild(document.createTextNode(evt));
        cell = row.insertCell(1);
        cell.appendChild(document.createTextNode(com));
        cell = row.insertCell(2);
        cell.appendChild(document.createTextNode(d.toUTCString()));
      }
    }
    </script>
    </head>
    <body>
    
    <h1>Build Table from Form</h1>
    <p>Enter a comment and select an event then click the button to add your entry to the table.</p>
    
    <form id='form1' action=''>
    <p>Comment: <input id='f1TxtComment' type='text'></p>
    <p><select id='f1SelEvent'>
      <option selected>Select an event...</option>
      <option>Star Party</option>
      <option>Code Bash</option>
      <option>Pub Crawl</option>
    </select></p>
    <p><input id='f1BtnAdd' type='button' value='Add'></p>
    </form>
    
    <table id='table1'>
    <tr><td><b>Event</b></td><td><b>Comment</b></td><td><b>Date</b></td></tr>
    </table>
    
    </body>
    </html>

  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you very much.. this is the code i m looking for ... thanks once again..

    one more query... if i submit the form .. i can have table data in variable table1??

    coz i need to mail the table data to certain users...

    thanks once again..

    Saifee

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to submit all the data in the table then, on submit you'll have to assign all the data to hidden fields in the form - or use some other type of HttpRequest.

    Or, each time a row is added, then add a hidden field to the form with that row's data.

    Or, each time a row is added, create 'input' text fields in the cells. The entire table would be in a form. Then you can just submit that form.

  7. #7
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Mike for your reply..
    i have modified your code and made the code pasted below..

    as you can see that right now i have just put the alert to get the inner text of each cell, added by the user.
    and form is fired on abc.php file.. now my trouble is that how do i get the values/text of each cell on next php page...

    Guru, if you can help me out for this trouble it will be great help

    Code:
    <title>Build Table from Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name='author' content='Mike Foster (Cross-Browser.com)'>
    <style type='text/css'>
    body {
      color: #000;
      background: #FFF;
    }
    h1 {
      font-size: large;
    }
    table {
      padding: 2px;
      border: 1px solid blue;
    }
    td {
      padding: 4px 10px;
      border: 1px solid green;
    }
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      if (document.getElementById
          && document.createTextNode
          && document.getElementById('table1').insertRow
         )
      { 
        document.getElementById('f1BtnAdd').onclick = addToTable;
      }
      else {
        alert('Your browser is old. Get Opera or Firefox!');
      }
    }
    function addToTable()
    {
      var com = document.getElementById('f1TxtProduct').value;
      var e = document.getElementById('f1SelEvent');
      var evt = e.options[e.selectedIndex].text;
      if (!e.selectedIndex) { alert('Please select Product.'); }
      else {
        var d = new Date();
        var tbl = document.getElementById('table1');
        var row = tbl.insertRow(1);
        var cell = row.insertCell(0);
        cell.appendChild(document.createTextNode(evt));
        cell = row.insertCell(1);
        cell.appendChild(document.createTextNode(com));
        cell = row.insertCell(2);
        cell.appendChild(document.createTextNode(document.getElementById('f1TxtORN').value));
        cell = row.insertCell(3);
        cell.appendChild(document.createTextNode(document.getElementById('f1TxtQty').value));
        cell = row.insertCell(4);
        cell.appendChild(document.createTextNode(document.getElementById('f1TxtUOM').value));
        cell = row.insertCell(5);
        cell.appendChild(document.createTextNode(document.getElementById('f1TxtBatch').value));
        cell = row.insertCell(6);
        cell.appendChild(document.createTextNode(document.getElementById('f1TxtUBD').value));		
      }
    }
    
    </script>
    </head>
    <body>
    
    
    
    <form id='form1' action='abc.php'>
    <p></p>
    <p>Product <select id='f1SelEvent'>
      <option selected>Select Product</option>
      <option>Edible Oil</option>
      <option>Frozen Chicken</option>
      <option>Ice Cream</option>
    </select>
    Product Description: <input id='f1TxtProduct' type='text'>
    <br>
    Quantity : <input id='f1TxtQty' type='text'><br>
    UOM : <input id='f1TxtUOM' type='text'><br>
    Order Ref No: <input id='f1TxtORN' type='text'><br>
    Batch Code : <input id='f1TxtBatch' type='text'><br>
    Use by Date : <input id='f1TxtUBD' type='text'><br>
    
    </p>
    <p><input id='f1BtnAdd' type='button' value='Add'></p>
    
    
    <table id='table1'>
    <tr><td><b>Product Code</b></td><td><b>Product Description</b></td><td><b>Order Ref. No</b></td>
    <td><b>Quantity</b></td><td><b>UOM</b></td><td><b>Batch</b></td><td><b>Use by Date</b></td>
    </tr>
    </table>
    <br>
    <input type="button" value="click" onClick="checkdata()">
    <input type="submit" value="sumbit">
    <input type="button" value="Reset" onClick="window.location.reload(true);">
    </form>
    
    <script type='text/javascript'>
    
    function checkdata()
    {	
    	var tbrow = new Array();
    	tbrow = document.getElementById('table1').cells;
    	
    	for ( i=0; i<tbrow.length;i++)
    	{
    	alert (tbrow[i].innerText);
    	}
    
    }
    
    </script>
    
    </body>
    </html>
    Last edited by stymiee; Oct 4, 2006 at 06:38.

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Don't use innerText as most browsers don't understand it, use innerHTML instead.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks buddy..
    i have changed from innerText to innerHTML..

    as you can see above code that right now i have just put the alert to get the inner text of each cell, added by the user. and form is fired on abc.php file.. now my trouble is that how do i get the values/text of each cell on next php page

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I modified my original demo, and made 2 variations to illustrate the techniques I mentioned above.

    Demo 1 - This demo creates rows in a table from values in a form. The table data is not submitted to a server.

    Demo 2 - This demo creates rows in a table from values in a form. It creates text INPUT elements and inserts them in the table cells, so the table can be in a form and submitted.

    Demo 3 - This demo creates rows in a table from values in a form. It creates hidden INPUT elements for each cell in the table and inserts them into a form to be submitted.

  11. #11
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you very much guru...

    mike if u can share the code for php file, how do you show up the values will also be appreciated...


    regards

    Saifee S L

  12. #12
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    'echo.php' is a simple little thing I use for testing forms:
    PHP Code:
    <?php
    if (count($_POST))
    {
      echo 
    '<h1>POST</h1>';
      echo 
    '<pre>';
      
    print_r($_POST);
      echo 
    '</pre>';
    }
    if (
    count($_GET))
    {
      echo 
    '<h1>GET</h1>';
      echo 
    '<pre>';
      
    print_r($_GET);
      echo 
    '</pre>';
    }
    ?>

  13. #13
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks mike..

    now i m scratching my head with lots of multiple arrays...

    see the output..

    Array
    (
    [procode] => Array
    (
    [0] => ASL123
    )

    [prodesc] => Array
    (
    [0] => Car
    )

    [orn] => Array
    (
    [0] => car12
    )

    [qty] => Array
    (
    [0] => 100
    )

    [uom] => Array
    (
    [0] => Pc
    )

    [batch] => Array
    (
    [0] => car1s
    )

    [ubd] => Array
    (
    [0] => 22-dec-06
    )

    )


    now i have to show this data in table
    procode prodesc orn qty uom batch ubd
    ASL123 Car car12 100 Pc car1s 22-dec-06

  14. #14
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In my demos 2 and 3, the INPUT names are event[], comment[], etc. When the form is submitted to the server there will be an array for each column in the table. This is not the only way to do it. I assumed you would change the INPUT names depending on the requirements of your server-side code.

    I see you have a question in the PHP forum regarding this issue (ref). That's good. They are much better at PHP than I.

  15. #15
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mike..
    One Again Thank you very much.. i did the coding for php.. its working fine.. client is happy..the coding is pasted below.. for reference..

    if (count($_POST))
    {
    $message =
    "
    <table width=100% border=1 cellpadding=0 cellspacing=0 bordercolor=#CCCCCC>
    <tr>
    <td width=25%>Customer Name /td><td width=75%>&nbsp;</td>
    </tr>
    <tr>
    <td width=25%>Expected Date /td><td width=75%>".$_POST[ed]."</td>
    </tr>
    <tr>
    <td width=25%>Expected Time /td><td width=75%>".$_POST[et]."</td>
    </tr>

    </table><br>
    <table width=100% border=1 cellpadding=0 cellspacing=0 bordercolor=#CCCCCC>
    <tr>
    <td width=14% align=center><b>Product Code</b></td>
    <td width=19% align=center><b>Product Description</b></td>
    <td width=14% align=center><b>Order Ref. No</b></td>
    <td width=13% align=center><b>Quantity</b></td>
    <td width=12% align=center><b>UOM</b></td>
    <td width=12% align=center><b>Batch</b></td>
    <td width=16% align=center><b>Use by Date</b></td>
    </tr>";
    for ($i=0 ; $i < count($_POST[procode]); $i++)
    {
    $message .= "<tr>
    <td width=14% align=center>".$_POST[procode][$i]."</td>
    <td width=19% align=center>".$_POST[prodesc][$i]."</td>
    <td width=14% align=center>".$_POST[orn][$i]."</td>
    <td width=13% align=center>".$_POST[qty][$i]."</td>
    <td width=12% align=center>".$_POST[uom][$i]."</td>
    <td width=12% align=center>".$_POST[batch][$i]."</td>
    <td width=16% align=center>".$_POST[ubd][$i]."</td>
    </tr>";
    }
    $message .="</table>";
    }

    all done smoothly... once again thank you very much guru..
    i will be back.. if any such complicated requirement occure...

    Saifee S L


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •