#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    4
    Rep Power
    0

    How to add dynamic textbox (row) and save to database using PHP


    Hi. I have here my Javascript code that adds dynamic textbox (row) my problem is how can I save this to database using PHP script? How you can help me guys.. Thanks!

    Code:
    <script type="text/JavaScript"> 
    function addRow(r){ 
    var root = r.parentNode;//the root 
    var allRows = root.getElementsByTagName('tr');//the rows' collection 
    var cRow = allRows[0].cloneNode(true)//the clone of the 1st row 
    var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row 
    for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names) 
    cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1)) 
    } 
    root.appendChild(cRow);
    } 
    function shownames(){ 
    var allInp=document.getElementsByTagName('input'); 
    for(var i=0;i<allInp.length;i++){ 
    alert(allInp[i].name) 
    } 
    } 
    </script>
    My HTML code:

    Code:
    <form method= POST> <table width="1024" border="0" cellspacing="6" cellpadding="0"> <tr> <td width="195"><div class="user"><input type="text" name="textfield_a" id="user" tabindex="6"/></div></td> <td width="410"><div class="reported"><input type="text" name="textfield_b" id="reported" tabindex="7"/></div></td> <td width="399"><div class="reported"><input type="text" name="textfield_c" id="reported" tabindex="8"/></div></td> <td width="10"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td> </tr> </table> </form>
  2. #2
  3. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    Hi,

    please use [ CODE ] tags to make the code readable.

    I don't see why you should save each newly created row in the database. Simply let the user submit the form and then process the input data like you always do. It doesn't matter if a row was there from the beginning or has been created dynamically.

    Comments on this post

    • npl disagrees
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    4
    Rep Power
    0
    Sorry but I'm new in PHP. The problem is how can I get the values if the user fill out the dynamic textbox? In my JS code, it only clones the rows of the textbox.
  6. #4
  7. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    OK, what are you trying to do? Is this supposed to be a standard form that the user will fill out and then submit? In this case the dynamically created fields are just normal fields. PHP will receive the values like in any other form, so you'll have $_POST['textfield_a'], $_POST['textfield_a_2'], $_POST['textfield_a_3'], ... etc.

    You could loop through the values with
    PHP Code:
    for ($i 2; isset($_POST['textfield_a_' $i]); $i++)
        ... 
    However, it would make more sense to put the values into an actual array. Simply append "[]" to the names in the HTML form. So for example name="textfield_a[]" or even better name="user[]". In this case $_POST['user'] will be an array of all the values in the "user" fields (from top to bottom). Then you don't even need the renaming logic in your JavaScript.

    Or are the values supposed to be sent directly after the user has typed them in? Then you'll need to use AJAX. I wouldn't do that with plain JavaScript, though, but rather use a framework like jQuery.

    Comments on this post

    • npl disagrees
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    4
    Rep Power
    0
    Yes it is a standard form. In the code that you have given me it seems to only increment the first textbox (textbox_a). but how about the two more textboxes in the row? How can I get their values? Can I set it like this? how about in the PHP code?

    Code:
    <form method= POST> <table width="1024" border="0" cellspacing="6" cellpadding="0"> <tr> <td width="195"><div class="user"><input type="text" name="textbox_a[]" id="user" tabindex="6"/></div></td> <td width="410"><div class="reported"><input type="text" name="textbox_b[]" id="reported" tabindex="7"/></div></td> <td width="399"><div class="reported"><input type="text" name="textbox_c[]" id="reported" tabindex="8"/></div></td> <td width="10"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td> </tr> </table> </form>
  10. #6
  11. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    When you have the index, you can access any field.

    PHP Code:
    <?php

    for ($i 0$i count($_POST['textbox_a']); $i++) {
        
    $box_a $_POST['textbox_a'][$i];
        
    $box_b $_POST['textbox_b'][$i];
        ...
    }
    But like I said: You should use meaningful names like "user" or "reported" instead of "textbox_a" etc.

    Comments on this post

    • npl disagrees
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    677
    Rep Power
    7
    From the way I'm kinda glancin at it, it sounds you are saving it to an active row to maybe update a temperary table visible on the active page. Is this true in any way? If so, meerly saving the input data to your database real quick and rebuilding the visible page data from that wouldn't take much.

    I guess I'm wondering simply if this form's intent is simply to save something to your database, or actively use it as well on the clients page without leaving or reloading the page.

    Code:
    <script type="text/JavaScript"> 
        function addRow(r){ 
            var root = r.parentNode;                        //the root 
            var allRows = root.getElementsByTagName('tr');  //the rows' collection 
            var cRow = allRows[0].cloneNode(true)           //the clone of the 1st row 
            var cInp = cRow.getElementsByTagName('input');  //the inputs' collection of the 1st row 
            for(var i=0;i<cInp.length;i++){                 //changes the inputs' names (indexes the names) 
                cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1)) 
            } 
            root.appendChild(cRow);
        } 
        function shownames(){ 
            var allInp=document.getElementsByTagName('input'); 
            for(var i=0;i<allInp.length;i++){ 
                alert(allInp[i].name) 
            } 
        } 
    </script>
    Code:
    <form method= POST>
        <table width="1024" border="0" cellspacing="6" cellpadding="0">
            <tr>
                <td width="195">
                    <div class="user">
                        <input type="text" name="textfield_a" id="user" tabindex="6"/>
                    </div>
                </td>
                <td width="410">
                    <div class="reported">
                        <input type="text" name="textfield_b" id="reported" tabindex="7"/>
                    </div>
                </td>
                <td width="399">
                    <div class="reported">
                        <input type="text" name="textfield_c" id="reported" tabindex="8"/>
                    </div>
                </td>
                <td width="10">
                    <input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)">
                </td>
            </tr>
        </table>
    </form>
    Sry... Just testing code tagging.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2009
    Posts
    677
    Rep Power
    7
    Carlos26Todd, your pictures do not load. Is your inquiry related directly with this topic at all? If not, it would be in your best interest to start your own topic. Good luck.
  16. #9
  17. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,959
    Rep Power
    1014
    This guy posts random nonsense everywhere, he's probably just another SEO bot.
  18. #10
  19. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Originally Posted by Triple_Nothing
    Carlos26Todd, your pictures do not load. Is your inquiry related directly with this topic at all? If not, it would be in your best interest to start your own topic. Good luck.
    They are cloaked affiliate links. He has been banned.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  20. #11
  21. Transforming Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    14,112
    Rep Power
    9398
    Originally Posted by Kravvitz
    They are cloaked affiliate links. He has been banned.
    And the post's been deleted.

IMN logo majestic logo threadwatch logo seochat tools logo