CODEWITHSUNDEEP
phpjavascriptmysql
Ashish Agarwal
Ashish Agarwal

Reputation: 14925

dynamically add fields to form and access the values from php script

I am adding text fields to the form dynamically, but now I need to be able to store these values into a mysql database. I am able to do this if there are no dynamically created fields. Here is the code -

<!DOCTYPE HTML>
<html>
    <head>  
        <title> Company Value form </title>
        <script language = "javascript">
            function addTextField(){
                var element = document.createElement("input");
                element.setAttribute("name", "i");
                element.setAttribute("value", "sample value");
                element.setAttribute("size", 30);

                var twitter = document.getElementById("twitterusernames");
                twitter.appendChild(element);

            }

        </script>
    </head>

    <body>
        <h1> Enter the values </h1>
        <form method = "post" name = "config_form" action = "message.php">
            <table border = "1px" >
                <tr> <td>
                    <b> Twitter </b> <br/> <br/>
                    FeatureId: <input type = "text" name = "FeatureId"> <br/>
                    Image: <input type = "text" name = "Image"> <br/>
                    LabelEn: <input type = "text" name = "LabelEn"> <br/>
                    LabelFr: <input type = "text" name = "LabelFr"> <br/>
                    URL: <input type = "text" name = "URL"> <br/>
                    TwitterUserNames: <input type = "text" name = "TwitterUserName" size = "50">  
                    <input type = "button" value = "Add" onclick = "addTextField()"/>
                    <span id="twitterusernames">&nbsp;</span>
                    <br/>
                    Minimum Count: <input type = "text" name = "MinimumCount"> <br/>
                    Refresh Count: <input type = "text" name = "RefreshCount"> <br/>
                    EmptyMessage English: <input type = "text" name = "EmptyMessageEnglish"> <br/>
                    EmptyMessage French: <input type = "text" name = "EmptyMessageFrench"> <br/>
                    Widget: <input type = "text" name = "Widget"> <br/>
                    Email Share Text: <input type = "text" name = "EmailShareText"> <br/>
                </td> </tr>
            </table>

            <input type="submit" value="Submit">
        </form>
    </body>


</html>

and the PHP code:

<?php   
    include 'database.php';

    $Twitter = array(
        'FeatureId' => $_POST["FeatureId"],
        'Image' => $_POST["Image"],
        'LabelEn' => $_POST["LabelEn"],
        'LabelFr' => $_POST["LabelFr"],
        'URL' => $_POST["URL"],
        'TwitterUserName' => $_POST["TwitterUserName"],
        'MinimumCount' => $_POST["MinimumCount"],
        'RefreshCount' => $_POST["RefreshCount"],
        'EmptyMessageEnglish' => $_POST["EmptyMessageEnglish"],
        'Widget' => $_POST["Widget"],
        'EmailShareText' => $_POST["EmailShareText"]
        );

    $crud = new database();
    $insert = $crud -> insert($Twitter);

    if ($insert) {
        echo "Success";
    }
    else {
        echo "Values were not inserted into the database";
    }

?>

Upvotes: 2

Views: 5793

Answers (4)

Pank
Pank

Reputation: 14258

According to your script I got idea like you are adding text box after clicking button. So when you are adding multiple textbox you need to make your textbox field name as a array i.e 

<input type="text" name="i[]" value="sample data" />
<input type="text" name="i[]" value="sample data" />
<input type="text" name="i[]" value="sample data" />

Modify your addTextField() function

function addTextField(){
            var element = document.createElement("input");
            element.setAttribute("name", "i[]");
            element.setAttribute("value", "sample value");
            element.setAttribute("size", 30);

            var twitter = document.getElementById("twitterusernames");
            twitter.appendChild(element);

        }

And in message.php file you can get value through $_POST[i] in array format.

Upvotes: 2

ROMMEL
ROMMEL

Reputation: 524

add this element.setAttribute("name", "i[]");

Then in your php handler 

        $Twitter = array(
        'FeatureId' => $_POST["FeatureId"],
        'Image' => $_POST["Image"],
        'LabelEn' => $_POST["LabelEn"],
        'LabelFr' => $_POST["LabelFr"],
        'URL' => $_POST["URL"],
        'TwitterUserName' => $_POST["TwitterUserName"],
        'MinimumCount' => $_POST["MinimumCount"],
        'RefreshCount' => $_POST["RefreshCount"],
        'EmptyMessageEnglish' => $_POST["EmptyMessageEnglish"],
        'Widget' => $_POST["Widget"],
        'EmailShareText' => $_POST["EmailShareText"],
        'extraFields' => serialize( $_POST["i"] ) // Extra fields
        );

        $crud = new database();
        $insert = $crud -> insert($Twitter);

        if ($insert) {
        echo "Success";
        }
        else {
        echo "Values were not inserted into the database";
        }

        ?>

to display the data. let's assume that you already have the $extraFields

<?php
$extraFields = unserialize( $extraFields );

 foreach($extraFields as $extra ):
?>
<input type="text" name="i[]" value="<?php echo $extra; ?> ">
<?php
endforeach;
?>

Upvotes: 3

Barmar
Barmar

Reputation: 780688

Give the dynamic elements names ending in []:

element.setAttribute("name", "i[]");

Then PHP will fill $_POST['i'] with an array of all the values.

Upvotes: 2

Maxim Khan-Magomedov
Maxim Khan-Magomedov

Reputation: 1336

If added fields contain only secondary data, I'd just add another column with text type and just dump there JSON-encoded values of these fields in one chunk.

Upvotes: 0

Related Questions