SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add form elements on the fly

    I'm creating a news section for a CMS in PHP and mySQL in which I have a text field for the headline and an textarea for the article. Instead of making the user add each article one-at-a-time I would like to know if there's a way to dynamically create/remove these elements with a button?

    for instance; at page load the form contains 1 article - it has 1 text field and 1 textarea. The user decides that he wants to add 2 more articles, so he clicks the "add" button twice. Now the form has 3 articles (3 text fields and 3 textareas), each with a unique id (art1_head,art1_txt, art2_head,art2_txt, art3_head,art3_txt).

    Then, I also need to have a button or checkbox to remove each article.

    Forgive my ignorance. I'm not a js guy, I work in PHP. Is this possible?

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                var elCount = 0;
                function add() {
                    var parent = document.getElementById('parent');
                    
                    var article = document.createElement('DIV');
                        article.id = 'article_' + elCount;
                    var article_title_label = document.createElement('LABEL');
                        article_title_label.appendChild(document.createTextNode('Title: '));
                    var article_title_text = document.createElement('INPUT');
                        article_title_text.id = 'article_' + elCount + '_title';
                    var article_textarea = document.createElement('TEXTAREA');
                        article_textarea.id = 'article_' + elCount + '_content';
                    var article_remove_a = document.createElement('A');
                        article_remove_a.appendChild(document.createTextNode('Remove'));
                        article_remove_a.href = 'javascript:remove(\'article_' + elCount + '\');';
    
                        article.appendChild(article_title_label);
                        article.appendChild(article_title_text);
                        article.appendChild(document.createElement('BR'));
                        article.appendChild(article_textarea);
                        article.appendChild(document.createElement('BR'));
                        article.appendChild(article_remove_a);
                        
                        parent.appendChild(article);
    
                        elCount++;
                }
                function remove(el) {
                    if(typeof(el) == 'string')
                        el = document.getElementById(el);
    
                    var parent = el.parentNode;
    
                    parent.removeChild(el);
                }
            </script>
        </head>
        <body>
            
            <div id="parent">
                
                <div id="article_1">
                    <label for="article_1_title">Title: </label><input type="text" id="article_1_title" /><br />
                    <textarea id="article_1_content"></textarea><br />
                    <a href="javascript:remove('article_1');">Remove</a>
                </div>
    
            </div>
    
            <br /><br />
            <div><a href="javascript:add();">Add</a>
    
        </body>
    </html>


  3. #3
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is dead on, exactly what I'm looking for!

    However, nothing is being POSTed upon submit because a name doesn't exist for each element. Would it be as simple as adding article_textarea.name = 'article_' + elCount + '_content'; and so on?

    Thank you!

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yep thats correct.


  5. #5
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That didn't work.

    It returns 'article_0' for all other form items other than 'article_1'. Also, if I click the "add another article" link twice, so that I now have 3 articles on the page, the third article actually replaces the first article.

    If you have PHP on your server, just create a new file (name it add.php), put the following code into it and try it out to see what I mean. My explanations are usually lacking...
    PHP Code:
    <?php
    if(isset($_POST['submit'])) {
        
        foreach(
    $_POST as $key=>$value) {
            echo 
    "Key: $key; Value: $value<br />\n";
        }
    }
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" media="screen" />
    <style type="text/css"></style>
    <script type="text/javascript">
    var elCount = 0;
    function add() {
        var parent = document.getElementById('parent');
        
        var article = document.createElement('DIV');
            article.id = 'article_' + elCount;
            article.name = 'article_' + elCount;                                     // NEW LINE
        var article_title_label = document.createElement('LABEL');
            article_title_label.appendChild(document.createTextNode('Title: '));
        var article_title_text = document.createElement('INPUT');
            article_title_text.id = 'article_' + elCount + '_title';
            article_title_text.name = 'article_' + elCount + '_title';                // NEW LINE
        var article_textarea = document.createElement('TEXTAREA');
            article_textarea.id = 'article_' + elCount + '_content';
            article_textarea.name = 'article_' + elCount + '_content';                // NEW LINE
        var article_remove_a = document.createElement('A');
            article_remove_a.appendChild(document.createTextNode('Remove'));
            article_remove_a.href = 'javascript:remove(\'article_' + elCount + '\');';

            article.appendChild(article_title_label);
            article.appendChild(article_title_text);
            article.appendChild(document.createElement('BR'));
            article.appendChild(article_textarea);
            article.appendChild(document.createElement('BR'));
            article.appendChild(article_remove_a);
            
            parent.appendChild(article);

            elCount++;
    }
    function remove(el) {
        if(typeof(el) == 'string')
            el = document.getElementById(el);

        var parent = el.parentNode;

        parent.removeChild(el);
    }
    </script>
    </head>
    <body>
    <form action="add.php" method="post">
    <div id="parent">
        <div id="article_1">
            <label for="article_1_title">Title: </label><input type="text" name="article_1_title" id="article_1_title" /><br />
            <textarea name="article_1_content" id="article_1_content"></textarea><br />
            <a href="javascript:remove('article_1');">Remove this article</a>
        </div>
    </div>
    <br /><br />
    <a href="javascript:add();">Add another article</a>
    <input type="submit" name="submit" value="submit">
    </form>
    </body>
    </html>

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry if you've already read my reply.

    If you look at the elCount it starts at 0 and the static one is starting at 1. (not good).

    You can either change var elCount = 0 to var elCount = 1 or you can change the static content from article_1 to article_0 (and so on)


  7. #7
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed elCount to 1 and am still getting the same results. Please see attachment.
    Attached Images Attached Images

  8. #8
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry i'm not with it today:

    Code:
    <?php
    
    if(isset($_POST['submit'])) {
    
        
    
        foreach($_POST as $key=>$value) {
    
            echo "Key: $key; Value: $value<br />\n";
    
        }
    
    }
    
    ?>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <title>Untitled Document</title>
    
    <link rel="stylesheet" type="text/css" media="screen" />
    
    <style type="text/css"></style>
    
    <script type="text/javascript">
    
    var elCount = 1;
    
    function add() {
    
        var parent = document.getElementById('parent');
    
        
    
        var article = document.createElement('DIV');
    
            article.id = 'article_' + elCount;
    
            article.name = 'article_' + elCount;                                     // NEW LINE
    
        var article_title_label = document.createElement('LABEL');
    
            article_title_label.appendChild(document.createTextNode('Title ' + elCount + ': '));
    
        var article_title_text = document.createElement('INPUT');
    
            article_title_text.id = 'article_' + elCount + '_title';
    
            article_title_text.name = 'article_' + elCount + '_title';                // NEW LINE
    
        var article_textarea = document.createElement('TEXTAREA');
    
            article_textarea.id = 'article_' + elCount + '_content';
    
            article_textarea.name = 'article_' + elCount + '_content';                // NEW LINE
    
        var article_remove_a = document.createElement('A');
    
            article_remove_a.appendChild(document.createTextNode('Remove'));
    
            article_remove_a.href = 'javascript:remove(\'article_' + elCount + '\');';
    
    
    
            article.appendChild(article_title_label);
    
            article.appendChild(article_title_text);
    
            article.appendChild(document.createElement('BR'));
    
            article.appendChild(article_textarea);
    
            article.appendChild(document.createElement('BR'));
    
            article.appendChild(article_remove_a);
    
            
    
            parent.appendChild(article);
    
    
    
            elCount++;
    
    }
    
    function remove(el) {
    
        if(typeof(el) == 'string')
    
            el = document.getElementById(el);
    
    
    
        var parent = el.parentNode;
    
    
    
        parent.removeChild(el);
    
    }
    
    </script>
    
    </head>
    
    <body>
    
    <form action="test.php" method="post">
    
    <div id="parent">
    
        <div id="article_0">
    
            <label for="article_0_title">Title 0: </label><input type="text" name="article_0_title" id="article_0_title" /><br />
    
            <textarea name="article_0_content" id="article_0_content"></textarea><br />
    
            <a href="javascript:remove('article_0');">Remove this article</a>
    
        </div>
    
    </div>
    
    <br /><br />
    
    <a href="javascript:add();">Add another article</a>
    
    <input type="submit" name="submit" value="submit">
    
    </form>
    
    </body>
    
    </html>


  9. #9
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beautiful!

    I hate to ask this after all your help, but can I get the articles to start at 1 instead of 0? I have to put these into mySQL, and I can use 1 as an id, but not 0.

    Thanks again!

  10. #10
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <title>Untitled Document</title>
    
    <link rel="stylesheet" type="text/css" media="screen" />
    
    <style type="text/css"></style>
    
    <script type="text/javascript">
    
    var elCount = 2;
    
    function add() {
    
        var parent = document.getElementById('parent');
    
        
    
        var article = document.createElement('DIV');
    
            article.id = 'article_' + elCount;
    
            article.name = 'article_' + elCount;                                     // NEW LINE
    
        var article_title_label = document.createElement('LABEL');
    
            article_title_label.appendChild(document.createTextNode('Title ' + elCount + ': '));
    
        var article_title_text = document.createElement('INPUT');
    
            article_title_text.id = 'article_' + elCount + '_title';
    
            article_title_text.name = 'article_' + elCount + '_title';                // NEW LINE
    
        var article_textarea = document.createElement('TEXTAREA');
    
            article_textarea.id = 'article_' + elCount + '_content';
    
            article_textarea.name = 'article_' + elCount + '_content';                // NEW LINE
    
        var article_remove_a = document.createElement('A');
    
            article_remove_a.appendChild(document.createTextNode('Remove'));
    
            article_remove_a.href = 'javascript:remove(\'article_' + elCount + '\');';
    
    
    
            article.appendChild(article_title_label);
    
            article.appendChild(article_title_text);
    
            article.appendChild(document.createElement('BR'));
    
            article.appendChild(article_textarea);
    
            article.appendChild(document.createElement('BR'));
    
            article.appendChild(article_remove_a);
    
            
    
            parent.appendChild(article);
    
    
    
            elCount++;
    
    }
    
    function remove(el) {
    
        if(typeof(el) == 'string')
    
            el = document.getElementById(el);
    
    
    
        var parent = el.parentNode;
    
    
    
        parent.removeChild(el);
    
    }
    
    </script>
    
    </head>
    
    <body>
    
    <form action="test.php" method="post"><div id="parent">
    
        <div id="article_1">
    
            <label for="article_1_title">Title 1: </label><input type="text" name="article_1_title" id="article_1_title" /><br />
    
            <textarea name="article_1_content" id="article_1_content"></textarea><br />
    
            <a href="javascript:remove('article_1');">Remove this article</a>
    
        </div>
    
    </div>
    
    <br /><br />
    
    <a href="javascript:add();">Add another article</a>
    
    <input type="submit" name="submit" value="submit">
    
    </form>
    
    </body>
    
    </html>


  11. #11
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect! Thank you very much for you help!

  12. #12
    SitePoint Addict
    Join Date
    Aug 2007
    Posts
    318
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Storing Document Object Model in database

    --------contents of story.php------------

    <?php
    $con = mysql_connect("localhost","root","");
    if (!$con)
    {
    die('Could not connect: ' . mysql_error());
    }

    mysql_select_db("mysql", $con);
    mysql_close($con);
    ?>

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Add/Remove child: Javascript</title>
    <script type="text/javascript">
    <!--

    function insertRowPHP()
    {
    var tbl = document.getElementById('tblInsertRowPHP');
    var iteration = tbl.tBodies[0].rows.length+1;
    newRow = tbl.tBodies[0].insertRow(-1);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = 'tag ' + iteration;
    var newCell1 = newRow.insertCell(1);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'tag[]';
    el.id = 'tag' + iteration;
    el.size = 15;
    newCell1.appendChild(el);
    }

    function deleteRows(tblId)
    {
    var tbl = document.getElementById(tblId);
    var i=tbl.tBodies[0].rows.length-1; {
    tbl.tBodies[0].deleteRow(i);
    }
    }</script>
    </head>

    <body>

    <form action="storyinsert.php" method="post">
    Title: <input type="text" name="title" /><br>
    Contributed By: <input type="text" name="contributed_by" /><br>
    Name: <input type="text" name="name" /><br>
    Content: &nbsp;<TEXTAREA NAME="content" ROWS="10", COLS="30">Your data</TEXTAREA><br>
    Moral: <input type="text" name="moral" /><br>

    <a name="tag" onClick="insertRowPHP();" href="#">Add Tag</a>
    <a name="tag" onClick="deleteRows('tblInsertRowPHP');" href="#">Remove Tag</a><br>

    <table border="0" cellspacing="0" id="tblInsertRowPHP">
    <thead>
    <tr>
    <th colspan="2">tblInsertRowPHP header</th>

    </tr>
    </thead>
    <tbody></tbody>
    </table>

    <?php

    $tagarray= addslashes(serialize($tag));

    ?>

    Category: <select name="category">
    <option value="Chocolate Pie">Chocolate Pie</option>
    <option value="It's Him">It's Him</option>
    <option value="Mixed Bag">Mixed Bag</option>
    <option value="Director's Cut">Director's Cut</option>
    <option value="Tickle Your Bone">Tickle Your Bone</option>
    <option value="The Living Legends">The Living Legends</option>
    <option value="Rhythm n Blue">Rhythm n Blue</option>
    <option value="Tiny Thoughts">Tiny Thoughts</option>
    </select><br>
    Choose The Mood:
    <input type="radio" name="mood" value="Cheerful" checked> Cheerful <input type="radio" name="mood" value="Confused"> Confused <input type="radio" name="mood" value="Sad"> Sad <input type="radio" name="mood" value="Anxious"> Anxious <input type="radio" name="mood" value="Laughing"> Laughing
    <input type="radio" name="mood" value="Surprised"> Surprised<br>
    <input type="submit" />
    <?php
    $date = mktime(date("G"), date("i"), date("s"), date("m"), date("d"), date("Y"));
    echo date("d/m/Y G:i:s", $date);
    ?>
    <input type="hidden" name="date" value="<?php echo date("d/m/Y G:i:s", $date);?>" />
    <input type="hidden" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR'];?>" />
    </form>
    </body>
    </html>



    --------------contents of storyinsert.php------------

    <?php
    $con = mysql_connect("localhost","root","");
    if (!$con)
    {
    die('Could not connect: ' . mysql_error());
    }

    mysql_select_db("mysql", $con);

    $sql="INSERT INTO story (title, contributed_by, name, content, moral, category, mood, tag, date,ip)
    VALUES
    ('$_POST[title]','$_POST[contributed_by]','$_POST[name]','$_POST[content]','$_POST[moral]','$_POST[category]','$_POST[mood]','$_POST[tagarray]','$_POST[date]','$_POST[ip]')";

    if (!mysql_query($sql,$con))
    {
    die('Error: ' . mysql_error());
    }

    echo "Article added on ";
    echo date('l dS F Y h:i:s A');
    echo " from ";
    echo $_SERVER['REMOTE_ADDR'];

    mysql_close($con)
    ?>

    ------------------------------


    In the above code it gives me Notice: Undefined variable: tag in c:\program files\easyphp1-8\www\story.php on line 68

    and if i submit this it gives me Notice: Undefined index: tagarray in c:\program files\easyphp1-8\www\storyinsert.php on line 12

    My task is to add tag field box when user presses add tag button and store whatever data he puts in the tag fields (must be an array as it's size varies)
    in an database mysql having phpnews_news table having a tag field. the tag field has a type tinytext and collation latin1_swedish_ci . Please help me store the value user puts in the tag field in the database. Thanks a lot. Waiting for your replies. please tell me the changes which can be made or the modifications

  13. #13
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please do not post your questions in someone elses post. If you want someone to help you, please create new post.



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
  •