How to create a form that handle multiple arrays items

Dancode · September 22, 2018

Building a tool to manage text variables, found a php code in a blog that create an array from multiples form item. It works that way:

<?php

//Remove the spaces in PHP opening tag

$variable = $_POST['txtname'];

 

foreach( $variable as $n ) {

  print "The name is ".$n ."</BR>";

}

?>

 

<html>

<body>

<form action="" method="post">

 

<p><label>Enter Name 1</label><input type="text" name="txtname[]" /><br /></p>

<p><label>Enter Name 2</label><input type="text" name="txtname[]" /><br /></p>

<p><label>Enter Name 3</label><input type="text" name="txtname[]" /><br /></p>

 

<input type="submit" value="Submit and display name by Array"/>

</form>

</body>

</html>

And it gives back a text like that:

The name is [FirstName]
The name is [SecondName]
The name is [ThirdName]

While I need multiple variables for each array, in this example let’s say add age at any people name to have such a result:

This entry is related to [FirstName] which is aged [Age1]
This entry is related to [SecondName] which is aged [Age2]
This entry is related to [ThirdName] which is aged [Age3]

I tried adding an “id” to the paragraph declaration and creating the array from that “id” attribute but it did not work, surely am missing some quite basic php rules but can’t find out which.

I guess final form should look something like that:

<p id="NewPeople">

<label>Enter Name 1</label><input type="text" name="txtname[]" />

<label>Enter Age 1</label><input type="text" name="txtage[]" /><br /></p>

<p id="NewPeople">

<label>Enter Name 2</label><input type="text" name="txtname[]" />

<label>Enter Age 2</label><input type="text" name="txtage[]" /><br /></p>

But it actually seems to have some errors or anyway – if it is really ok – am not able to manage it php side.

Thanks to show your support.

Barand · September 22, 2018

try

<?php
if ($_SERVER['REQUEST_METHOD']=='POST') {                            // has data been posted?
    foreach ($_POST['txtname'] as $k => $name) {
        // get the age for name $k
        $age = $_POST['txtage'][$k];

        echo "This entry is related to \"$name\" which is aged \"$age\"<br>";
    }
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample</title>
</head>
<body>
<form method='post'>
<?php  
    for ($i=1; $i<=3; $i++) {  
        echo <<<HTML
           <p id="NewPeople$i">                                                            <!-- ids must be unique -->
           <label>Enter Name $i <input type="text" name="txtname[$i]" ></label> <br>
           <label>Enter Age $i <input type="text" name="txtage[$i]" ></label>
           </p>
HTML;
}   
?>
<input type="submit" name="btnSubmit" value="Submit">
</form>
</body>
</html>

Dancode · September 22, 2018

Barand, thank you so much.

Saw you've used a loop to display more than one <p> item, it would be also possible to create an adding/removing buttons option?

Barand · September 22, 2018

Add/remove from where?

Dancode · September 22, 2018

creating a couple of buttons, I only figured out to do that trough javascript but doing it directly in php if possible would be great.

Imagine a button like that on top of the paragraphs - maybe as well as at the end of them

<input type="button" id="addParagraph" value="Add new block of forms item" onclick="addParagraph()" />

and another button like that at the end of all paragraphs:

<input type="button" id="removeParagraph" value="Remove this block of forms item" onclick="removeParagraph()" />

Barand · September 22, 2018

It would be better to use javascript. To do it with PHP you would have to submit the form and regenerate the page, or use javascript with AJAX.

Where are you intending to save the data that is input?

Barand · September 22, 2018

As an aside, do not store the person's age. Store the date of birth instead. If you store the age it requires continual updating.

CREATE TABLE `people` (
  `people_id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(45) DEFAULT NULL,
  `dob` date DEFAULT NULL,
  PRIMARY KEY (`people_id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

mysql> SELECT * FROM people;
+-----------+-------+------------+
| people_id | name  | dob        |
+-----------+-------+------------+
|         1 | Peter | 1985-12-03 |
|         2 | Paul  | 1990-02-15 |
|         3 | Mary  | 1998-06-12 |
+-----------+-------+------------+

You can then calculate the age when required

SELECT people_id
     , name
     , dob
     , TIMESTAMPDIFF(YEAR, dob, CURDATE()) as age
FROM people;

+-----------+-------+------------+------+
| people_id | name  | dob        | age  |
+-----------+-------+------------+------+
|         1 | Peter | 1985-12-03 |   32 |
|         2 | Paul  | 1990-02-15 |   28 |
|         3 | Mary  | 1998-06-12 |   20 |
+-----------+-------+------------+------+

Alternatively, if you are not using a database, you can do the same calculation in PHP with

    $dob = '1985-12-03';
    $dt = new DateTime($dob);
    $age = $dt->diff( new DateTime() )->y;
    echo "DOB is $dob therefore age is now $age";      //-> DOB is 1985-12-03 therefore age is now 32

Dancode · September 22, 2018

actually in this case I do not have to save them - even if it wuold be an option to apply at my budget managemnt tool now running in a data sheet, maybe a new post would be better for those other features including SQL storage

if am not asking too much, would you post an example including the javascript action?

Barand · September 22, 2018

Buttons added

<?php
if ($_SERVER['REQUEST_METHOD']=='POST') {
    foreach ($_POST['txtname'] as $k => $name) {
        // get the age for name $k
        $age = $_POST['txtage'][$k];
        
        echo "This entry is related to \"$name\" who is aged \"$age\"<br>";
    }
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var itemcount = 3

    $().ready( function() {
        
        $("#additem").click( function() {
            itemcount++
            var itmtxt = "<p id='NewPeople"+itemcount+"'>\n"
            itmtxt += "<label>Enter Name "+itemcount+" <input type='text' name='txtname["+itemcount+"]' ></label> <br>\n"
            itmtxt += "<label>Enter Age "+itemcount+" <input type='text' name='txtage["+itemcount+"]' ></label></p>\n"
            
            $("#formitems").append(itmtxt)
        })
        
        $("#delitem").click( function() {
            if (itemcount==1) return            // can't delete remaining item
            $("#NewPeople"+itemcount).css("display", "none").html("").attr("id", "") // hide para and remove content
            itemcount--
        })
        
    })
</script>
</head>
<body>
<hr>
<button id="additem">Add new form item</button>
<button id="delitem">Remove last form item</button>
<hr>
<form method='post'>
<div id="formitems">
<?php  
    for ($i=1; $i<=3; $i++) {  
        echo <<<HTML
           <p id = 'NewPeople$i'>                                                            <!-- id must be unique -->
           <label>Enter Name $i <input type="text" name="txtname[$i]" ></label> <br>
           <label>Enter Age $i <input type="text" name="txtage[$i]" ></label>
           </p>\n
HTML;
    }   
?>
</div>
<input type="submit" name="btnSubmit" value="Submit">
</form>
</body>
</html>

Dancode · September 23, 2018

I thought to be able modify the code and in an attempt to remove the external library reference tried this:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Sample</title>

<script src="8/form2.js" type="text/javascript"></script>

</head>

<body>

 

 

<?php

if ($_SERVER['REQUEST_METHOD']=='POST') {                           

    foreach ($_POST['txtname'] as $k => $name) {

        // get the age for name $k

        $age = $_POST['txtage'][$k];

                                $nick = $_POST['txtnickname'][$k];

 

        echo "This entry is related to ".$name ." which is aged ".$age." and has nick ".$nick."<br>";

    }

}

?>

 

 

<form method='post'>

 

           <p id="myForm">                                                          

           <label>Enter Name <input type="text" name="txtname[$i]" ></label> <label>Enter Age  <input type="text" name="txtage[$i]" ></label><label>Enter nickname <input type="text" name="txtnickname[$i]" ></label><br></p>

                               

                                 

 

<input type="submit" name="btnSubmit" value="Submit">

</form>

 

 

<button onclick="addFunction()">Add form item</button>

 

</body>

</html>

Being commands in action file 8/form2.js:

var i = 0; /* Set Global Variable i */

function increment(){

i += 1; /* Function for automatic increment of field's "Name" attribute. */

}

/*

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

 

Function to Remove Form Elements Dynamically

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

 

*/

function removeElement(parentDiv, childDiv){

if (childDiv == parentDiv){

alert("The parent div cannot be removed.");

}

else if (document.getElementById(childDiv)){

var child = document.getElementById(childDiv);

var parent = document.getElementById(parentDiv);

parent.removeChild(child);

}

else{

alert("Child div has already been removed or does not exist.");

return false;

}

}

 

/*

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

 

Functions that will be called upon, when user click on the add item button.

 

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

*/

function addFunction(){

var r = document.createElement('span');

var y = document.createElement("INPUT");

var z = document.createElement("INPUT");

var x = document.createElement("INPUT");

var br = document.createElement('br');

y.setAttribute("type", "text");

y.setAttribute("placeholder", "name"+ i);

z.setAttribute("type", "text");

z.setAttribute("placeholder", "age"+ i);

x.setAttribute("type", "text");

x.setAttribute("placeholder", "nick"+ i);

var g = document.createElement("IMG");

g.setAttribute("src", "delete.png");

increment();

y.setAttribute("Name", "txtname"+ i);

z.setAttribute("Name", "txtage" + i);

x.setAttribute("Name", "txtnick" + i);

r.appendChild(y);

r.appendChild(z);

r.appendChild(x);

g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");

r.appendChild(g);

r.setAttribute("id", "id_" + i);

r.appendChild(br);

document.getElementById("myForm").appendChild(r);

}

 

/*

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

 

Functions that will be called upon, when user click on the Reset Button.

 

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

*/

function resetElements(){

document.getElementById('myForm').innerHTML = '';

}

It is far away from Barand stylish solution being roughly copied and adapted from a blog stand alone solution and it seems me fail to manage paragraph number from working solution – of course I did changed the id names in my test:

<?php 

    for ($i=1; $i<=3; $i++) { 

        echo <<<HTML

           <p id = 'NewPeople$i'>                                                            <!-- id must be unique -->

           <label>Enter Name $i <input type="text" name="txtname[$i]" ></label> <br>

           <label>Enter Age $i <input type="text" name="txtage[$i]" ></label>

           </p>\n

HTML;

    }  

?>

In any case, beside removing external reference, it also managed single paragraph delete action.

Did you think there is a way to merge those features in order not to use external libraries?

Barand · September 23, 2018

In order to process the $_POST items as arrays, their names need to be of the form "txtname[X]".

Your javascript is giving them the form "txtnameX"

31 minutes ago, Dancode said:

y.setAttribute("Name", "txtname"+ i);

Dancode · September 23, 2018

I did it to the fields and it worked fine except for the fact that I should have done some error int the last nick field becouse it seems not to work... I'll fix it

y.setAttribute("Name", "txtname[$"+ i +"]");

did you think should I also changed the var i value to 1 or it has no influence that time?

var i = 1; /* Set Global Variable i */

Barand · September 23, 2018

The "$" should not be there in the javascript (that's for php variable names)

y.setAttribute("Name", "txtname[$"+ i +"]");
                                ^
                                remove

The initial value for i should be the number of input groups already on the page. If you create 3 to start with when the page loads, then it should be 3. That way, when you add a new one it becomes 4.

Dancode · September 23, 2018

I removed the $ as you told and it did work anyway, thanks for the suggestion.

Am now trying keep on form fields submitted data, a lot of people suggested that:

value="<?php echo isset($_POST['name']) ? $_POST['name']

but it did not really worked, while using ‘txtname’ it shows array, it is ok using that other:

<label>Enter Name <input type="text" name="txtname[$i]" value="<?PHP print $name ; ?>">

It works for those case in which there only is one field item. When there are two or more items there are those problems:

Java script did not keep the number of added items
Variables only pass the data of the last line of info to the value of the just one remaining item

Well, I take some time during the week to work on it. Maybe just to copy the option to use javascript writing html code at adding the value through a php call – as showed above in the option I discharged and if it is possible in this case ^o) - but for number of added items at the moment have no other idea.
Probably will move back to Barand's suggested code and add php call for the values.

Barand · September 23, 2018

You need to store records that are submitted (text file, database). The input fields should just be for new data.

When you submit the form, append the new data to the stored data. Then read back all the data stored so far amd list those. After those, output the fields for new data to be added.

Barand · September 24, 2018

This version uses a text file "people.txt" to store your added records

<?php
$tdata = '';
if ($_SERVER['REQUEST_METHOD']=='POST') {
    foreach ($_POST['txtname'] as $k => $name) {
        if ( trim($name == '') ) continue;
        // get the age for name $k
        $age = $_POST['txtage'][$k];
        $nick = $_POST['txtnick'][$k];
        file_put_contents('people.txt', "\"$name\",\"$age\",\"$nick\"\n", FILE_APPEND);     // save to text file
    }
    
}
    
if (file_exists('people.txt')) {
    // get existing records and display in a table
    $tdata = "<table border='1'>\n<tr><th>Name</th><th>Age</th><th>Nickname</th></tr>\n";
    
    $fp = fopen('people.txt', 'r');   // open the file for reading
    while ($rec = fgetcsv($fp)) {
        $tdata .= "<tr><td>" . join('</td><td>', $rec) . "</td></tr>\n";
    }
    fclose($fp);
    $tdata .= "</table>\n";
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var itemcount = 3

    $().ready( function() {
        
        $("#additem").click( function() {
            itemcount++
            var itmtxt = "<p id='NewPeople"+itemcount+"'>\n"
            itmtxt += "<label>Enter Name "+itemcount+" <input type='text' name='txtname["+itemcount+"]' ></label> <br>\n"
            itmtxt += "<label>Enter Age "+itemcount+" <input type='text' name='txtage["+itemcount+"]' ></label><br>\n"
            itmtxt += "<label>Nickname "+itemcount+" <input type='text' name='txtnick["+itemcount+"]' ></label></p>\n"
            
            $("#formitems").append(itmtxt)
        })
        
        $("#delitem").click( function() {
            if (itemcount==1) return         // can't remove only item
             $("#NewPeople"+itemcount).css("display", "none").html("").attr("id", "") // hide para and remove content
            itemcount--
        })
        
    })
</script>
<style type='text/css'>
    table {
        width: 500px;
        margin: 20px auto;
        border-collapse: collapse;
    }
    th {
        background-color: #8F1FCF;
        color: white;
        padding: 4px;
    }
    td {
        padding: 4px;
    }
</style>
</head>
<body>
<?=$tdata?>
<hr>
<button id="additem">Add new form item</button>
<button id="delitem">Remove last form item</button>
<hr>
<form method='post'>
<div id="formitems">
<?php  
    for ($i=1; $i<=3; $i++) {  
        echo <<<HTML
           <p id = 'NewPeople$i'>                                                            <!-- id must be unique -->
           <label>Enter Name $i <input type="text" name="txtname[$i]" ></label> <br>
           <label>Enter Age $i <input type="text" name="txtage[$i]" ></label> <br>
           <label>Nickname $i <input type="text" name="txtnick[$i]" ></label>
           </p>\n
HTML;
    }   
?>
</div>
<input type="submit" name="btnSubmit" value="Submit">
</form>
</body>
</html>

Dancode · September 25, 2018

I just read your note while are two days am focusing on localStorage (that apparently would be ok but did not have a proper way to get back all added items) and innerHTML (combined to PHP commands) in javascript.

I understand my aim is quite different from standard one, let’s say is more similar to those page that shows data for a check before send them in storage – which of course would be better to do through SQL or any other DB, I am really thankful for this effort to write something even a beginner as me would be able to understand and manage. Anyway, in this case, no data should be permanently stored but just used to merge text and variables (something similar to word office’s letter mail merge)

Theoretically still think should be possible to do what I thought rewriting html/php in Javascript via innerHTML but also save data in a file and print back the values would work just as well (a drop table command in SQL is the first think I would think about).

To be honest, up to know I neither had a try at any of this because the time I would need to attempt exceed my availability.

Dancode · September 30, 2018

Up to now had created a stable way to recreate inputs form under the statement for update occurrences but had no way to make it work properly – maybe would be able to open new windows from that bat it would really be horrible when using.

That’s my code:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Sample</title>

<script src="8/form2.js" type="text/javascript"></script>

</head>

<body>

 

 

<?php

if ($_SERVER['REQUEST_METHOD']=='POST') {                           

    foreach ($_POST['txtname'] as $k => $name) {

                                                                                                                                                                                                             // get the age for name $k

                                                                                                                                                                                                             $age = $_POST['txtage'][$k];

                                                                                                                                                                                                             $nick = $_POST['txtnickname'][$k];

 

                                                                                                                                                                                                             echo "This entry is related to ".$name ." which is aged ".$age." and has nick ".$nick."<br>";

 

                                                                                                                                                                                             }

 

                foreach ($_POST['txtname'] as $k => $name) {

                                                                                                                                                                                                             // get the age for name $k

                                                                                                                                                                                                             $age = $_POST['txtage'][$k];

                                                                                                                                                                                                             $nick = $_POST['txtnickname'][$k];

 

                                                                                                                                                                                                             echo "<input type='text' name='txtname[$i]' value='".$name ."'><input type='text' name='txtage[$i]' value='".$age ."'><input type='text' name='txtnickname[$i]' value='".$nick ."'><br>";

    }

               

 

                echo "<input type='submit' name='btnSubmit' value='update'>";

}

 

 

?>

 

 

<form method='post'>

 

           <p id="myForm">                                                          

           <label>Enter Name <input type="text" name="txtname[$i]" value="<?php echo isset($_POST['name']) ? $_POST['name'] : '' ?>"></label>

                                   <label>Enter Age  <input type="text" name="txtage[$i]" ></label>

                                   <label>Enter nickname <input type="text" name="txtnickname[$i]" ></label><br></p>

                                  

                                 

 

<input type="submit" name="btnSubmit" value="Submit">

</form>

 

 

<button onclick="addFunction()">Add form item</button>

 

</body>

</html>

Should Barand or any other be able to suggest how to fix it I would really appreciate it.

Barand · September 30, 2018

Is something like this closer to what you are trying to do?

<?php
$tdata = '';
$people = [];
$i = 0;
if ($_SERVER['REQUEST_METHOD']=='POST') {
    foreach ($_POST['txtname'] as $k => $name) {
        if ( trim($name == '') ) continue;
        // get the age for name $k
        $age = $_POST['txtage'][$k];
        $nick = $_POST['txtnick'][$k];

        $people[] = [ 'name' => $name,                // save to session array
                      'age'  => $age,
                      'nick' => $nick
                    ];                                
    }
    if (!empty($people)) {
        // get existing records and display
            foreach ($people as $k=>$p) {  
                $i = $k+1;
                $tdata .= <<<HTML
                <fieldset id = 'NewPeople$i'>                                                         <!-- id must be unique -->
                <legend>Person $i</legend>                                                            
                <div class='label'>Enter Name </div><input type="text" name="txtname[$i]"  value="{$p['name']}"> <br>
                <div class='label'>Enter Age </div><input type="text" name="txtage[$i]"  value="{$p['age']}"> <br>
                <div class='label'>Nickname </div><input type="text" name="txtnick[$i]"  value="{$p['nick']}" >
                </fieldset>\n
HTML;
            }
            
        if ($_POST['btnSubmit']=='Save all') {             // was save button clicked?
            $fp = fopen('people.txt', 'a');
            foreach ($people as $p) {
                fputcsv($fp, $p);
            }
            fclose($fp);
            $tdata .= "<h3>Data saved</h3>\n";
        }  
    }
    
}
    
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample</title>
<style type='text/css'>
    body {
        font-family: verdana, sans-serif;
        font-size: 10pt;
    }
    fieldset {
        width: 70%;
        margin: 5px auto;
    }
    legend {
        padding: 3px;
        background-color: #8F1FCF;
        color: #FFF;
    }
    .label {
        width: 120px;
        display: inline-block;
    }
</style>
</head>
<body>

<form method='post'>
<div id="formitems">
<?php  
        ++$i;
        echo $tdata;
        echo <<<HTML
           <fieldset id = 'NewPeople$i'>                                                            <!-- id must be unique -->
           <legend>New Person</legend>
           <div class='label'>Enter Name </div><input type="text" name="txtname[$i]" > <br>
           <div class='label'>Enter Age </div><input type="text" name="txtage[$i]" > <br>
           <div class='label'>Nickname </div><input type="text" name="txtnick[$i]" >
           </fieldset>\n
HTML;
?>
</div>
<input type="submit" name="btnSubmit" value="Add person"><br>
<input type="submit" name="btnSubmit" value="Save all">
</form>

</body>
</html>

Dancode · September 30, 2018

Actually no, is much more like the one am posting now but in my example are neither working ok the calls at value variable in the update name buttons – of course my syntax skill have to be really poor also mismatching frequently between php and java script: I wrote both value='update name $i' and value='update name $' none seemed me ok.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Sample</title>

<script src="8/form3.js" type="text/javascript"></script>

</head>

<body>

 

 

<?php

if ($_SERVER['REQUEST_METHOD']=='POST') {                           

    foreach ($_POST['txtname'] as $k => $name) {

                                                                                                                                                                                                             // get the age for name $k

                                                                                                                                                                                                             $age = $_POST['txtage'][$k];

                                                                                                                                                                                                             $nick = $_POST['txtnickname'][$k];

 

                                                                                                                                                                                                             echo "<p>This entry is related to <b id='idname[$i]'>".$name ."</b> which is aged <b id='idage[$i]'>".$age."</b> and has nick <b id='idnick[$i]'>".$nick."</b></p><br>";

 

                                                                                                                                                                                             }

 

                foreach ($_POST['txtname'] as $k => $name) {

                                                                                                                                                                                                             // get the age for name $k

                                                                                                                                                                                                             $age = $_POST['txtage'][$k];

                                                                                                                                                                                                             $nick = $_POST['txtnickname'][$k];

 

                                                                                                                                                                                                            

                                                                                                                                                                                                             echo      "<input type='text' name='txtname[$i]' value='".$name ."'><input type='button' onclick='changeText2()' value='update name $i'/>

                                                                                                                                                                                                                                             <input type='text' name='txtage[$i]' value='".$age ."'><input type='button' onclick='changeText2()' value='update age $i'/>

                                                                                                                                                                                                                                             <input type='text' name='txtnickname[$i]' value='".$nick ."'><input type='button' onclick='changeText2()' value='update nickname $i'/><br>";

    }

               

 

                echo "<input type='submit' name='btnSubmit' value='update'>";

}

 

 

?>

 

 

<form method='post'>

 

           <p id="myForm">                                                          

           <label>Enter Name <input type="text" name="txtname[$i]" >"></label>

                                   <label>Enter Age  <input type="text" name="txtage[$i]" ></label>

                                   <label>Enter nickname <input type="text" name="txtnickname[$i]" ></label><br></p>

                                  

                                 

 

<input type="submit" name="btnSubmit" value="Submit">

</form>

 

 

<button onclick="addFunction()">Add form item</button>

 

</body>

</html>

Being javascript:

var i = 0; /* Set Global Variable i */

function increment(){

i += 1; /* Function for automatic increment of field's "Name" attribute. */

}

/*

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

 

Function to Remove Form Elements Dynamically

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

 

*/

function removeElement(parentDiv, childDiv){

if (childDiv == parentDiv){

alert("The parent div cannot be removed.");

}

else if (document.getElementById(childDiv)){

var child = document.getElementById(childDiv);

var parent = document.getElementById(parentDiv);

parent.removeChild(child);

}

else{

alert("Child div has already been removed or does not exist.");

return false;

}

}

 

/*

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

 

Functions that will be called upon, when user click on the add item button.

 

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

*/

function addFunction(){

var r = document.createElement('span');

var y = document.createElement("INPUT");

var z = document.createElement("INPUT");

var x = document.createElement("INPUT");

var br = document.createElement('br');

y.setAttribute("type", "text");

y.setAttribute("placeholder", "name"+ i);

z.setAttribute("type", "text");

z.setAttribute("placeholder", "age"+ i);

x.setAttribute("type", "text");

x.setAttribute("placeholder", "nickname"+ i);

var g = document.createElement("IMG");

g.setAttribute("src", "delete.png");

increment();

y.setAttribute("Name", "txtname["+ i +"]");

z.setAttribute("Name", "txtage["+ i +"]");

x.setAttribute("Name", "txtnickname["+ i +"]");

r.appendChild(y);

r.appendChild(z);

r.appendChild(x);

g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");

r.appendChild(g);

r.setAttribute("id", "id_" + i);

r.appendChild(br);

document.getElementById("myForm").appendChild(r);

}

 

/*

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

 

Functions that will be called upon, when user click on the Reset Button.

 

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

*/

function resetElements(){

document.getElementById('myForm').innerHTML = '';

}

 

 

/*

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

 

Functions that will be called upon, when user click on update name.

 

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

*/

 

 

function changeText2(){

                var userInput = document.getElementById('txtname["+ i +"]').value;

                document.getElementById('idname["+ i +"]').innerHTML = userInput;

}

Sign In

How to create a form that handle multiple arrays items

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived

Important Information