Store input of dynamically created text fields

Question

I have made a button which creates a text with name=1,2,3 ... on every click. I want to store all the inputs of these text fields in database.

<?php 
    $con = mysqli_connect("localhost", "root","", "abc");

    // Check connection
    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
    $maxoptions = 10;

    // I don't want only 10 inputs from text fields 
    // but as many as the user creates and fills
    for ($i = 1; $i < $maxoptions; $i++) {
        $sql="INSERT INTO qa (q, a$i)
        VALUES
        ('$_POST[q1]', '$_POST[i]')";
        // '$_POST[i]' is not working
    }

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

    mysqli_close($con);

?>

Now, how to create columns in the database dynamically with these text fields?

Here is the JavaScript code with which I am creating the text fields:

var intTextBox1 = 0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement1()
{
    intTextBox1 = intTextBox1 + 1;
    var contentID = document.getElementById('content1');
    var newTBDiv = document.createElement('div');
    newTBDiv.setAttribute('id','strText'+intTextBox1);
    newTBDiv.innerHTML = "Option" + intTextBox1 + 
      ": <input type='text' id='" + intTextBox1 + 
      "'    name='" + intTextBox1 + "'/>";
    contentID.appendChild(newTBDiv);
}

//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement1()
{
    if (intTextBox1 != 0)
    {
        var contentID = document.getElementById('content1');
        contentID.removeChild(document.getElementById('strText'+intTextBox1));
        intTextBox1 = intTextBox1 - 1;
    }
}

and here is the code of button:

<form id="s1form" name="s1form" method="post" action="qno1.php">
    <input type="text" name="q1">
<input type="button" value="Add a choice" onClick="javascript:addElement1();" />
    <input type="button" value="Remove a choice" onClick="javascript:removeElement1();" />
    <div id="content1"></div>

Answer 1

Here's my 2 cents: First off start with echoing the text fields and the button

<?php
$columns=10; //we'll start off with 10
for($i=0; $i<$columns; $i++){
    echo "<input type=\"text\" id=\"$i\" name=\"$field_i\">";
}
//the placeholder for the next element
echo "<div id=\"newfield\"></div>";
//and the buttons
echo "<input type=\"button\" value=\"Add Field\" onclick=\"addfield()\">";
echo "<input type=\"button\" value=\"Remove Field\" onclick=\"removefield()\">";

Next continue to the JS script

<script type="text/javascript">
<?php echo "fields=".$columns-1 .";"; /*from before, mind the off-by-one*/ ?>
function addfield(){
    elm=document.getElementById("newfield");
    //construct the code for new field
    nf="<input type=\"text\" name=\"field_"+ fields +"\">";
    nf+="<div id=\"newfield\"></div>"; //placeholder for next field
    elm.innerHTML=nf;
}

function removefield(){
    (elem=document.getElementById(fields)).parentNode.removeChild(elem);
    fields--;
}
</script>

I found the code to remove elements in this answer.

I have some reservations about using + for concatenation, if you run into any problems use .append() instead.

Now to check your results (since I didn't use an array for the GET request) we do a bit of a hack:

//php
$i=0;
while(isset($_GET["field_".$i])){
    $new_cols[$i]=$_GET["field_".$i];
    $i++;
}
addColumns($new_cols)

where addColumns() simply adds new columns to the database Sometimes I find isset() a bit temperamental, if it doesn't cut it do $_GET["field_".$i]!==false.

The SQL code for creating new columns is pretty easy and it's just one PHP loop so I won't be writing the function here. Hope that helps.

Edit: You can do the add column function in two ways:

Firstly, the MySQL code is the following:

ALTER TABLE Persons
ADD DateOfBirth date

where DateOfBirth is the name of the column and date its data type. Therefore, using the array of column names obtained from the previous code, one way to do it is by executing the query sequentially:

addColumns($names){
    $sql="ALTER TABLE (your table) ADD ";
    for($i=0; $i<count($names); $i++){
        if(sanitize($names[$i])===$names[$i])
            mysqli_query($sql.sanitize($names[$i])." (datatype)");
        else{
            //something fishy is going on, report the error
            die("error");
        }
    }
}

where sanitize() is a proper SQL input sanitation function. Note that I don't just escape the input, I abort in case the escaped string and the original don't match

The second method is to concatenate all columns in a single query. Try both and see what works. In order to do this I'll modify the for loop from above

$sql="ALTER TABLE (your table) ";
    for($i=0; $i<count($names); $i++){
        if(sanitize($names[$i])===$names[$i])
            $sql.="ADD ".$names[$i]." (datatype),"; //notice the comma
        else{
            //something fishy is going on, report the error
        }
    }
//remove the comma from the last concatenation. There might be an off-by-one in this,
//depends if strlen also counts the NULL character at the end
$sql[strlen($sql)]='\0';
//execute the query
mysqli_query($sql);

Be aware that you may need to wrap column names in weird characters such as ` or ' . I haven't used MySQL in a while so I can't remember the exact syntax on that one.