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.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problem with dynamic fields

    i have a script which i found on the internet. i modify that script according to my needs. what is in that script is there are three form fields with two buttons. one button is "Give me more fields" clicking on this button will give you more fields. and second button is submit so the data goes to server side and will be added to db. the problem is when i click give me more fields it gives me three more fields which is right but when i fill all these fields and click submit button it adds to the db but the data in the first three fields adds in the one row and the other three fields data adds in separate row which is not fine for me. so how can i do this so all the data will be added to only one row.

    here is js code
    Code:
    var counter = 0;
    //Start a counter. Yes, at 0
    function add_phone() {
        counter++;
    // I find it easier to start the incrementing of the counter here.
        var newFields = document.getElementById('addQualification').cloneNode(true);
        newFields.id = '';
        newFields.style.display = 'block';
        var newField = newFields.childNodes;
        for (var i=0;i<newField.length;i++) {
            var theName = newField[i].name
            if (theName)
                    newField[i].name = theName + counter;
    // This will change the 'name' field by adding an auto incrementing number at the end. This is important.
            }
            var insertHere = document.getElementById('addQualification');
    // Inside the getElementById brackets is the name of the div class you will use.
            insertHere.parentNode.insertBefore(newFields,insertHere);
    }
    here is my form
    Code:
    <form name="addAQualification" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
    <fieldset>
    <div id="phone">
       Degree:
        <input type="text" name="degree_0" value="" /><br>
        CGPA/Grade:
        <input type="text" name="cgpa_0" value="" /><br>
        Institute:
        <input type="text" name="institute_0" value="" /><br>
    </div>
    <div id="addQualification" style="display: none;">
    Degree:
        <input type="text" name="degree_" value="" /><br>
    CGPA/Grade:
        <input type="text" name="cgpa_" value="" /><br>
    Institute:
       <input type="text" name="institute_" value="" /><br>
    </div>
    <input type="button" id="add_phone()" onclick="add_phone()" value="Give me more fields!" /><br>
    <input type="submit" name="submit" value="submit" />
    </fieldset>
    </form>
    here is my php
    Code:
    <?php
        if(isset($_POST['submit']))
    //This checks to make sure submit was clicked
        {
            echo "You clicked submit!<br>";
            echo "Here is your data<br>";
            echo "<br>";
            if ($_POST['cgpa_0'])
    //This checks that the proper field has data
            {
                    $continue = FALSE;
                    $i = 0;
                    while ($continue == FALSE)
                    {
                        if (isset($_POST['degree_'.$i]))
    //This looks for an entry after 0 and increments
                        {
                        echo $_POST['degree_'.$i] . " = " . $_POST['cgpa_'.$i] . "<br>";
    //Echoing the data
                        $degree1 = $_POST['degree_'.$i];
                        $cgpa1 = $_POST['cgpa_'.$i];
                   $institute1 = $_POST['institute_'.$i];
                   $db = mysql_connect("localhost");
                   mysql_select_db("test", $db);
                        $query = "INSERT INTO cv 
                                     (
                                     degree1, 
                                     cgpa1, 
                                     institute1
                                      ) 
                                     VALUES 
                                      (
                                      '$degree1', 
                                      '$cgpa1', 
                                      '$institute1'
                                      )";
                        $result = mysql_query($query);
    //The four lines above is the example on how the data would be put into a MySQL database. It's not used here
                    }
                    else
                    {
                        $continue = TRUE;
                    }
                    $i++;
                }
            }
        }
    ?>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,027
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    In my opinion, *WAY* too hard and way too much work.

    I would just do this:
    Code:
    <html>
    <head>
    <style type="text/css">
    div#DEGREES div { display: none; }
    </style>
    <script type="text/javascript">
    var visible = 0;
    function nextDegree( )
    {
        if ( visibile >= 7 ) 
        {
            alert("You can only list 8 degrees");
            return;
        }
        var outer = document.getElementById("DEGREES");
        var degrees = outer.getElementsByTagName("div");
        degrees[++visible].style.display = "block";
        document.addAQualificateion.LastDegreeNumber.value = visible;
    }
    
    <body>
    ...
    <form name="addAQualification" action="" method="post">
    <input type="hidden" name="LastDegreeNumber" value="0" />
    ...
    <div id="DEGREES">
        <div style="display: block;">
            Degree: <input type="text" name="degree_0" value="" /><br>
            CGPA/Grade: <input type="text" name="cgpa_0" value="" /><br>
            Institute: <input type="text" name="institute_0" value="" /><br>
        </div>
        <div>
            Degree: <input type="text" name="degree_1" value="" /><br>
            CGPA/Grade: <input type="text" name="cgpa_1" value="" /><br>
            Institute: <input type="text" name="institute_1" value="" /><br>
        </div>
        ... 2 3 4 5 6 ...
        <div>
            Degree: <input type="text" name="degree_7" value="" /><br>
            CGPA/Grade: <input type="text" name="cgpa_7" value="" /><br>
            Institute: <input type="text" name="institute_7" value="" /><br>
        </div>
    </div>
    <input type="button" value="I have another degree to list" onclick="nextDegree()"/>
    ...
    </form>
    ...
    Why create the elements dynamically, at all? *SO* much simpler to just have them already sitting there, hidden, and you just reveal them one by one.

    You said in your other thread you would only have a max of 8 sets of data, so this seems eminently sensible, to me.

    You *COULD* even set this up so that it works if JavaScript is not enabled. Instead of having all the divs except 1 hidden, instead have them all showing. Then use page load to hide all but the first with JS. If JS is disabled, then all 8 will show, which may look ugly but at least the form works without needing JS!!!! [You'd have to detect the number of filled-in degrees in your PHP processing code, instead of passing along the number as I do here...but you SHOULD do that anyway, in case somebody accidentally pushes the "another" button too many times.]

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    In my opinion, *WAY* too hard and way too much work.

    I would just do this:
    Code:
    <html>
    <head>
    <style type="text/css">
    div#DEGREES div { display: none; }
    </style>
    <script type="text/javascript">
    var visible = 0;
    function nextDegree( )
    {
        if ( visibile >= 7 ) 
        {
            alert("You can only list 8 degrees");
            return;
        }
        var outer = document.getElementById("DEGREES");
        var degrees = outer.getElementsByTagName("div");
        degrees[++visible].style.display = "block";
        document.addAQualificateion.LastDegreeNumber.value = visible;
    }
    
    <body>
    ...
    <form name="addAQualification" action="" method="post">
    <input type="hidden" name="LastDegreeNumber" value="0" />
    ...
    <div id="DEGREES">
        <div style="display: block;">
            Degree: <input type="text" name="degree_0" value="" /><br>
            CGPA/Grade: <input type="text" name="cgpa_0" value="" /><br>
            Institute: <input type="text" name="institute_0" value="" /><br>
        </div>
        <div>
            Degree: <input type="text" name="degree_1" value="" /><br>
            CGPA/Grade: <input type="text" name="cgpa_1" value="" /><br>
            Institute: <input type="text" name="institute_1" value="" /><br>
        </div>
        ... 2 3 4 5 6 ...
        <div>
            Degree: <input type="text" name="degree_7" value="" /><br>
            CGPA/Grade: <input type="text" name="cgpa_7" value="" /><br>
            Institute: <input type="text" name="institute_7" value="" /><br>
        </div>
    </div>
    <input type="button" value="I have another degree to list" onclick="nextDegree()"/>
    ...
    </form>
    ...
    Why create the elements dynamically, at all? *SO* much simpler to just have them already sitting there, hidden, and you just reveal them one by one.

    You said in your other thread you would only have a max of 8 sets of data, so this seems eminently sensible, to me.

    You *COULD* even set this up so that it works if JavaScript is not enabled. Instead of having all the divs except 1 hidden, instead have them all showing. Then use page load to hide all but the first with JS. If JS is disabled, then all 8 will show, which may look ugly but at least the form works without needing JS!!!! [You'd have to detect the number of filled-in degrees in your PHP processing code, instead of passing along the number as I do here...but you SHOULD do that anyway, in case somebody accidentally pushes the "another" button too many times.]

    i did this way but when i click on "i have another degree to list" it does not list more fields?
    here is what i did
    Code:
    <html>
    <head>
    <style type="text/css">
    div#DEGREES div { display: none; }
    </style>
    <script type="text/javascript">
    var visible = 0;
    function nextDegree( )
    {
        if ( visibile >= 7 ) 
        {
            alert("You can only list 8 degrees");
            return;
        }
        var outer = document.getElementById("DEGREES");
        var degrees = outer.getElementsByTagName("div");
        degrees[++visible].style.display = "block";
        document.addAQualificateion.LastDegreeNumber.value = visible;
    }
    
    </script>
    
    </head>
    
    <body>
    <form name="addAQualification" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
    <input type="hidden" name="LastDegreeNumber" value="0" />
    
    <fieldset>
    <div id="DEGREES">
    	<div style="display: block;">
            Degree:<input type="text" name="degree_0" value="" /><br>
            CGPA/Grade:<input type="text" name="cgpa_0" value="" /><br>
            Institute:<input type="text" name="institute_0" value="" /><br>
    	</div>
        <div>
            Degree:<input type="text" name="degree_1" value="" /><br>
            CGPA/Grade:<input type="text" name="cgpa_1" value="" /><br>
            Institute:<input type="text" name="institute_1" value="" /><br>
        </div>
        <div>
            Degree:<input type="text" name="degree_2" value="" /><br>
            CGPA/Grade:<input type="text" name="cgpa_2" value="" /><br>
            Institute:<input type="text" name="institute_2" value="" /><br>
        </div>
        <div>
            Degree:<input type="text" name="degree_3" value="" /><br>
            CGPA/Grade:<input type="text" name="cgpa_3" value="" /><br>
            Institute:<input type="text" name="institute_3" value="" /><br>
        </div>
        <div>
            Degree:<input type="text" name="degree_4" value="" /><br>
            CGPA/Grade:<input type="text" name="cgpa_4" value="" /><br>
            Institute:<input type="text" name="institute_4" value="" /><br>
        </div>
        <div>
            Degree:<input type="text" name="degree_5" value="" /><br>
            CGPA/Grade:<input type="text" name="cgpa_5" value="" /><br>
            Institute:<input type="text" name="institute_5" value="" /><br>
        </div>
        <div>
            Degree:<input type="text" name="degree_6" value="" /><br>
            CGPA/Grade:<input type="text" name="cgpa_6" value="" /><br>
            Institute:<input type="text" name="institute_6" value="" /><br>
        </div>
        <div>
            Degree:<input type="text" name="degree_7" value="" /><br>
            CGPA/Grade:<input type="text" name="cgpa_7" value="" /><br>
            Institute:<input type="text" name="institute_7" value="" /><br>
        </div>
    </div>
    <input type="button" value="I have another degree to list" onclick="nextDegree()"/>
    <br>
    <input type="submit" name="submit" value="submit" />
    </fieldset>
    </form>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,027
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    You know, if you would just do the *tiniest* bit of DEBUGGING you would find this kind of stuff yourself.

    Even MSIE, if you turn on JavaScript debugging, can find this. But better is to use FireFox with the Firebug plugin.

    You have two spelling errors there:
    Code:
    function nextDegree( )
    {
        if ( visibile >= 7 ) 
        {
            alert("You can only list 8 degrees");
            return;
        }
        var outer = document.getElementById("DEGREES");
        var degrees = outer.getElementsByTagName("div");
        degrees[++visible].style.display = "block";
        document.addAQualificateion.LastDegreeNumber.value = visible;
    }
    Yes, those were my errors originally, but again if you had just turned on a debugger you would have immediately seen them.

    Do yourself a *huge* favor and install Firebug into your copy of FireFox.

  • #5
    New Coder
    Join Date
    Oct 2009
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi Old Pedant

    well i follow your script and implement it but it still has the same problem as i stated at the start of this post.

    how can that can be fixed?

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,027
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    What does your DB's schema look like? (Table and field definitions.)

    In your SQL code, I don't see you making any foreign key relationship back to the primary table:
    Code:
    $query = "INSERT INTO cv(degree1, cgpa1, institute1 ) 
                  VALUES ( '$degree1', '$cgpa1', '$institute1' )";
    Where is the ID field???

    And WHY are the fields named with the number 1??? Why aren't they use degree, cgpa, institute???

    I think you maybe have a very very poor DB design at the root of this.

  • #7
    New Coder
    Join Date
    Oct 2009
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    What does your DB's schema look like? (Table and field definitions.)

    In your SQL code, I don't see you making any foreign key relationship back to the primary table:
    Code:
    $query = "INSERT INTO cv(degree1, cgpa1, institute1 ) 
                  VALUES ( '$degree1', '$cgpa1', '$institute1' )";
    Where is the ID field???

    And WHY are the fields named with the number 1??? Why aren't they use degree, cgpa, institute???

    I think you maybe have a very very poor DB design at the root of this.

    there are eight columns in my table. and i am using only one table. so it has following columns.

    id degree1 cgpa1 institute1 degree2 cgpa2 institute2... degree8 cgpa8 institute8. so all those form fields will be saved in these columns.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,027
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Terrible horrible bad DB design.

    You should have *ANOTHER* table, as a many-to-one table to your main table.

    Google for the term "NORMALIZATION". Or just look at the entry in Wikipedia, as a starting point.

    If this is your own design, you should fix it. If you are stuck with it for some external reason, we *can* use it, but it's a really crappy idea.

    Just for starters, if you are asked to find all people who have a CGPA in any of those fields which is 3.5 or higher, how will you do it? With that design, it will be a truly ugly SQL query. With a normalized DB, it's a trivial query.


  •  

    Posting Permissions

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