Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Change input with value from table

    I'm trying to change a row of input fields to have the value(s) of a table row.
    When I click a button called Next, I want to pull in the value(s) that are already on the display. If I click Next again, I want to pull in the next row's values or if I click the button called Previous I want to get the prior lines values. Can someone please help or push me in the right direction? Thanks.
    Code:
    <script type="text/javascript">
    function copyLine()
    {
    document.getElementById("pitem").value=document.getElementById("p1item").value;
    document.getElementById("ploc").value=document.getElementById("p1loc").value;
    document.getElementById("plot").value=document.getElementById("p1lot").value;
    document.getElementById("pqty").value=document.getElementById("p1qty").value;
    }
    </script>
    
    <table>
    <tr>
    <td><input type="text" name="item" id="pitem" size="15" value=""></td>
    <td><input type="text" name="loc" id="ploc" size="7" value=""></td>
    <td><input type="text" name="lot" id="plot" size="7" value=""></td>
    <td><input type="text" name="qty" id="pqty" size="10" value=""></td>
    </tr>
    <tr>
    <td><input type="button" value="Next" onclick="copyLine()">
    &nbsp;&nbsp;
    <input type="button" value="Previous" /></td>
    </tr>
    
    <tr>
    <td id="p1item">Item 1</td>
    <td id="p1loc">Location 1</td>
    <td id="p1lot">Lot 1</td>
    <td id="p1qty">100</td>
    </tr>
    <tr>
    <td id="p2item">Item 2</td>
    <td id="p2loc">Location 2</td>
    <td id="p2lot">Lot 2</td>
    <td id="p2qty">200</td>
    </tr>
    <tr>
    <td id="p3item">Item 3</td>
    <td id="p3loc">Location 3</td>
    <td id="p3lot">Lot 3</td>
    <td id="p3qty">300</td>
    </tr>
    </table>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Perhaps something along the lines of:

    Code:
    var n = 1;
    function copyLine(i) {
    document.getElementById("pitem").value=document.getElementById("p"+i+"item").value;
    document.getElementById("ploc").value=document.getElementById("p"+i+"loc").value;
    document.getElementById("plot").value=document.getElementById("p"+i+"lot").value;
    document.getElementById("pqty").value=document.getElementById("p"+i+"qty").value;
    return i++;
    }
    Code:
    onclick="n = copyLine(n)"
    You would of course need to add validation that the ids actually exist.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    I'm really curious why you would want to use all those IDs in the first place.

    Couldn't we do it a ton more simply?

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var currentLine = 0;
    
    function copyLine( )
    {
        ++currentLine;
        var row = document.getElementById("line" + currentLine);
        if ( row == null ) 
        {
             // past the end of rows...want to issue error msg or something?
             return; // in any case nothing to do
        }
    
        var formRow = document.getElementById("formLine");
        
        var cells = row.getElementsByTagName("td");
        var inputs = formRow.getElementsByTagName("input")
        for ( var c = 0; c < cells.length; ++c )
        {
            inputs[c].value = cells[c].innerHTML;
        }
    }
    </script>
    </head>
    <body>
    <table>
    <tr id="formLine">
        <td><input type="text" name="item" size="15" value=""></td>
        <td><input type="text" name="loc"  size="7" value=""></td>
        <td><input type="text" name="lot"  size="7" value=""></td>
        <td><input type="text" name="qty"  size="10" value=""></td>
    </tr>
    <tr>
        <td><input type="button" value="Next" onclick="copyLine()"></td>
    </tr>
    <tr id="line1">
        <td>Item 1</td>
        <td>Location 1</td>
        <td>Lot 1</td>
        <td>100</td>
    </tr>
    <tr id="line2">
        <td>Item 2</td>
        <td>Location 2</td>
        <td>Lot 2</td>
        <td>200</td>
    </tr>
    <tr id="line3">
        <td>Item 3</td>
        <td>Location 3</td>
        <td>Lot 3</td>
        <td>300</td>
    </tr>
    </table>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    JoeWhitlock (05-14-2012)

  • #4
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    I'm really curious why you would want to use all those IDs in the first place.

    Couldn't we do it a ton more simply?

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var currentLine = 0;
    
    function copyLine( )
    {
        ++currentLine;
        var row = document.getElementById("line" + currentLine);
        if ( row == null ) 
        {
             // past the end of rows...want to issue error msg or something?
             return; // in any case nothing to do
        }
    
        var formRow = document.getElementById("formLine");
        
        var cells = row.getElementsByTagName("td");
        var inputs = formRow.getElementsByTagName("input")
        for ( var c = 0; c < cells.length; ++c )
        {
            inputs[c].value = cells[c].innerHTML;
        }
    }
    </script>
    </head>
    <body>
    <table>
    <tr id="formLine">
        <td><input type="text" name="item" size="15" value=""></td>
        <td><input type="text" name="loc"  size="7" value=""></td>
        <td><input type="text" name="lot"  size="7" value=""></td>
        <td><input type="text" name="qty"  size="10" value=""></td>
    </tr>
    <tr>
        <td><input type="button" value="Next" onclick="copyLine()"></td>
    </tr>
    <tr id="line1">
        <td>Item 1</td>
        <td>Location 1</td>
        <td>Lot 1</td>
        <td>100</td>
    </tr>
    <tr id="line2">
        <td>Item 2</td>
        <td>Location 2</td>
        <td>Lot 2</td>
        <td>200</td>
    </tr>
    <tr id="line3">
        <td>Item 3</td>
        <td>Location 3</td>
        <td>Lot 3</td>
        <td>300</td>
    </tr>
    </table>
    </body>
    </html>
    Thanks for this. It works great. However, I really have eight TDs and want to pull data from four of them. I tried putting an id on the TDs that I want and can't just pull those in. I've tried several things. My latest additional code is:
    Code:
    var cid = cells[c].getAttribute("id");    
            if ( cid == "p" ) {   
            	inputs[c].value = cells[c].innerHTML;
            }else{
            	return;
            }
    What else do I need to just pull those with an ID of p?

    Code:
    <tr id="line1">
        <td id="p">Item 1</td>
        <td>Description 1</td>
        <td>Required 1</td>
        <td>Unit of Measure 1</td>
        <td>Available 1</td>
        <td id="p">Location 1</td>
        <td id="p">Lot 1</td>
        <td id="p">100</td>
    </tr>

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You can't use the same id more than once. If you want the same value on mutliple tags then use a class instead.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    iBall's code is still wrong. He is using the same ID more than once on the page.

    You could follow Felgall's solution instead. Use a classname, only.
    Code:
    <tr id="line1">
        <td class="copy">Item 1</td>
        <td>Description 1</td>
        <td>Required 1</td>
        <td>Unit of Measure 1</td>
        <td>Available 1</td>
        <td class="copy">Location 1</td>
        <td class="copy">Lot 1</td>
        <td class="copy">100</td>
    </tr>
    But now that you are, indeed, force to use class names, why not make the class names meaningful?

    Thus:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var currentLine = 0;
    
    function copyLine( )
    {
        ++currentLine;
        var row = document.getElementById("line" + currentLine);
        if ( row == null ) 
        {
             // past the end of rows...want to issue error msg or something?
             return; // in any case nothing to do
        }
    
        var form = document.getElementById("theForm");
        
        var cells = row.getElementsByTagName("td");
        for ( var c = 0; c < cells.length; ++c )
        {
            var td = cells[c];
            var cname = td.className;
            if ( cname != null && cname != "" && form[cname] != null )
            {
                form[cname].value = td.innerHTML;
            }
        }
    }
    </script>
    </head>
    <body>
    <form id="theForm">
    <table border="1">
    <tr id="formLine">
        <td><input type="text" name="item" size="15" value=""></td>
        <td><input type="text" name="loc"  size="7" value=""></td>
        <td><input type="text" name="lot"  size="7" value=""></td>
        <td><input type="text" name="qty"  size="10" value=""></td>
    </tr>
    <tr>
        <td><input type="button" value="Next" onclick="copyLine()"></td>
    </tr>
    <tr id="line1">
        <td class="item">Item 1</td>
        <td>Description 1</td>
        <td>Required 1</td>
        <td>Unit of Measure 1</td>
        <td>Available 1</td>
        <td class="loc">Location 1</td>
        <td class="lot">Lot 1</td>
        <td class="qty">100</td>
    </tr>
    <tr id="line2">
        <td class="item">Item 2</td>
        <td>Description 2</td>
        <td>Required 2</td>
        <td>Unit of Measure 2</td>
        <td>Available 2</td>
        <td class="loc">Location 2</td>
        <td class="lot">Lot 2</td>
        <td class="qty">200</td>
    </tr>
    <tr id="line3">
        <td class="item">Item 3</td>
        <td>Description 3</td>
        <td>Required 3</td>
        <td>Unit of Measure 3</td>
        <td>Available 3</td>
        <td class="loc">Location 3</td>
        <td class="lot">Lot 3</td>
        <td class="qty">300</td>
    </tr>
    </table>
    </form>
    </body>
    Which kind of reverses my opinion of before re not needing the ids (though now they are class names), but does seem to clarify the coding, no?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    JoeWhitlock (05-15-2012)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    You can easily avoid putting the class names into each row if you have a header row that has them.

    Thus:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var currentLine = 0;
    
    function copyLine( )
    {
        ++currentLine;
        var row = document.getElementById("line" + currentLine);
        if ( row == null ) 
        {
             // past the end of rows...want to issue error msg or something?
             return; // in any case nothing to do
        }
    
        var form = document.getElementById("theForm");
        
        var cells = row.getElementsByTagName("td");
        var hcells = document.getElementById("header").getElementsByTagName("th");
        for ( var c = 0; c < cells.length; ++c )
        {
            var hth = hcells[c];
            var td = cells[c];
            var cname = hth.className;
            if ( cname != null && cname != "" && form[cname] != null )
            {
                form[cname].value = td.innerHTML;
            }
        }
    }
    </script>
    </head>
    <body>
    <form id="theForm">
    <table border="1">
    <tr>
        <td><input type="text" name="item" size="15" value=""></td>
        <td><input type="text" name="loc"  size="7" value=""></td>
        <td><input type="text" name="lot"  size="7" value=""></td>
        <td><input type="text" name="qty"  size="10" value=""></td>
        <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
        <td><input type="button" value="Next" onclick="copyLine()"></td>
        <td colspan="7">&nbsp;</td>
    </tr>
    <tr id="header">
        <th class="item">Item#</th>
        <th>Description</th>
        <th>Required</th>
        <th>Units</th>
        <th>Available</th>
        <th class="loc">Location</th>
        <th class="lot">Lot</th>
        <th class="qty">Quantity</th>
    </tr>
    <tr id="line1">
        <td>Item 1</td>
        <td>Description 1</td>
        <td>Required 1</td>
        <td>Unit of Measure 1</td>
        <td>Available 1</td>
        <td>Location 1</td>
        <td>Lot 1</td>
        <td>100</td>
    </tr>
    <tr id="line2">
        <td>Item 2</td>
        <td>Description 2</td>
        <td>Required 2</td>
        <td>Unit of Measure 2</td>
        <td>Available 2</td>
        <td>Location 2</td>
        <td>Lot 2</td>
        <td>200</td>
    </tr>
    <tr id="line3">
        <td>Item 3</td>
        <td>Description 3</td>
        <td>Required 3</td>
        <td>Unit of Measure 3</td>
        <td>Available 3</td>
        <td>Location 3</td>
        <td>Lot 3</td>
        <td>300</td>
    </tr>
    </table>
    </form>
    </body>
    Note the the "header" row and "line1" *could* be one and the same, of course.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Gee, I wonder how iBall managed to accidentally come back and see that he goofed on leaving the duplicate id in there. He *clearly* isn't reading my posts, right?

    Of course, now he is no longer copying the item fields, since he omitted the class names on them. I wonder how long it will be before he "discovers" that goof?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,308
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by Old Pedant View Post
    Gee, I wonder how iBall managed to accidentally come back and see that he goofed on leaving the duplicate id in there. He *clearly* isn't reading my posts, right?

    Of course, now he is no longer copying the item fields, since he omitted the class names on them. I wonder how long it will be before he "discovers" that goof?
    iBall (previously bullant, webdev1958, Mishu - all banned!) can (and doubtless does) peek at our posts simply with a couple of clicks.

    He seems to make a lot of goofs, but is quick to excuse himself. He treats other people's goofs, however trivial, rather differently.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Code:
    <script type="text/javascript">
    var currentLine = 0;
    
    function copyLine( )
    {
        ++currentLine;
        var row = document.getElementById("line" + currentLine);
        if ( row == null ) 
        {
             // past the end of rows...want to issue error msg or something?
             return; // in any case nothing to do
        }
    
        var form = document.getElementById("theForm");
        
        var cells = row.getElementsByTagName("td");
        for ( var c = 0; c < cells.length; ++c )
        {
            var td = cells[c];
            var cname = td.className;
            if ( cname != null && cname != "" && form[cname] != null )
            {
                form[cname].value = td.innerHTML;
            }
        }
    }
    </script>
    Works great! Thanks again. I added the following to allow for a Next and Previous button. The reason I'm doing this page is for use on a scanner, no mouse pointer. I needed to use buttons to allow changes to be made by scanning. I ruled out a grid update because I had to allow new or different items to be scanned. It's being created on a Motorola scanner using what's called an industrial browser. The page and data are created on an IBM i box with PHP thru a Zend server.

    Code:
    function showLine(d)
    {
    var dir = d;	
        if (dir == 'N'){
           ++currentLine;  
        }else{
           --currentLine;
        } 
    .
    . other code
    .
    }

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    That works. I would have done this:
    Code:
    function copyLine( bumpBy )
    {
        currentLine += bumpBy;
        ... rest of code ...
    And then simply
    Code:
        <input type="button" value="Next" onclick="copyLine(1)" />
        <input type="button" value="Previous" onclick="copyLine(-1)" />
    But, as in all programming problems, there is always one more way to do things.

    (And the answer to almost all programming questions is: "It depends...")
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,308
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    And who the **** is David240, pray?

    As I have said before,

    iBall (previously bullant, webdev1958, Mishu - all banned!) can (and doubtless does) peek at our posts simply with a couple of clicks.

    He seems to make a lot of goofs, but is quick to excuse himself. He treats other people's goofs, however trivial, rather differently.

    Note the breaktaking effrontery of "There is nothing anywhere that says html must be valid. The w3c have issued only recommendations, not must-do's". If anyone else posted invalid HTML he would vomit his bile all over the screen.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #13
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    That works. I would have done this:
    Code:
    function copyLine( bumpBy )
    {
        currentLine += bumpBy;
        ... rest of code ...
    And then simply
    Code:
        <input type="button" value="Next" onclick="copyLine(1)" />
        <input type="button" value="Previous" onclick="copyLine(-1)" />
    But, as in all programming problems, there is always one more way to do things.

    (And the answer to almost all programming questions is: "It depends...")
    Thanks, I will remember this for the future. I'm also checking the button pushed to determine if the user is at the top or bottom of the list.

    The copyLine function works to display the values on the screen. But when I view the source the value attribute is blank. I need to populate the values, so that when I hit the submit button they are sent to the server.
    Code:
    form[cname].value = td.innerHTML;
    Everything I'm reading says the following would work if I were doing one field. But isn't that what the code above is doing? Sort of.
    Code:
    document.getElementById("pitem").value=document.getElementById("item").innerHTML;
    Last edited by JoeWhitlock; 05-16-2012 at 08:21 PM.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Ummm...maybe you need to show your code, again.

    The ID of a form field is *USELESS* if you need to send the contents of the form to the server. *ONLY* fields with NAMES are sent.

    So this code will work to set the field's value:
    Code:
    document.getElementById("pitem").value=document.getElementById("item").innerHTML;
    But if you want to BE SURE that the pitem field can be sent along to the next page, you would be better doing
    Code:
    var form = document.getElementById("theFormId");
    form.pitem.value = document.getElementById("item").innerHTML;
    *MY* code used the NAMES of the fields. On purpose. If you modified it to use ids, and if your form fields don't have ids, then it's clear why nothing is being sent from the form.

    On the other hand...

    *************

    when I view the source the value attribute is blank.
    Yes. It will always be. VIEW==>>SOURCE shows you the HTML code *AS ORIGINALLY SENT* from server to browser.

    If you want to see the *current* state of the HTML, use the debugger and examine the page using it. (Exactly how depends on which browser you are using.)

    Or for a quick test, just change your form to <form id="theForm" method="get"> and add a submit button. After loading the form with data, click the submit button. Look at the URL of the page, now. You will see something like this:
    Code:
    http://localhost/demo.html?item=Item+2&loc=Location+2&lot=Lot+2&qty=200
    thus proving that the form fields *ARE* being sent.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    JoeWhitlock (05-16-2012)

  • #15
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for that. It's been years since I've used a Get. Yes, those values are being sent. My page submits to itself since it is PHP and I grab the Posted values and update my server. I will look elsewhere for my problems.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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