i want to create a form for my client. My client require to create a dynamic for him.
suppose, i want to insert 1 record in main table of mysql, and record multiple records in secondary table which has reference key of main table. I dont know how many records against the main table, it maybe one at time or multiple records at time. I want to do it with single form. If client click add more button it show another text field to insert more data.
how i can do it ?????

4 Years
Discussion Span
Last Post by diafol

javascript will be used to add a set of form controls. jQuery could be used if you're a bit new to js.

Edited by diafol


I have the same requirement so I wrote a few lines that would demonstrate the answer to your question and give me a base to work from.

if (isset($_POST['submitted'])){
    <script type="text/javascript">
        function addTextArea(){
            var div = document.getElementById('div_quotes');
            div.innerHTML += "<textarea name='new_quote[]' />";
            div.innerHTML += "\n<br />";
<form method="post">
<input type="text" name="text_new_author" /><br />
<div id="div_quotes"></div>
<input type="button" value="Add Text Area" onClick="addTextArea();">
<input type="submit" name="submitted">

I thought I would need to keep a total of how many text areas had been added to allow them to have an individual name; area_1, area_2, area_3 etc. However adding [] to the textarea name and using the same name creates an array of values, so no values are lost and a unique name is not needed, print_r($_POST) produces:
Array ( [text_new_author] => New Author [new_quote] => Array ( [0] => New quote 1 [1] => New quote 2 [2] => New quote 3 ) [submitted] => Submit Query )
But this solution causes another problem; if the user adds a new quote and then clicks the 'add text area' button the text entered into the first textarea disappears. I presume this is because a new textarea with the same name is added to the DOM, so maybe I will need a unique name for each added textarea after all :)

Edited by adam.adamski.96155


@dafodil It's high time I learnt jQuery!
I sussed the issue was not the duplicate name, but rather the use of:
div.innerHTML += "<textarea name='new_quote[]' />";
as when it grabbed the existing html it was collecting the textarea but not the user-added input. This was solved by adding a new textarea to the DOM rather than the above method, and I googled some jQuery assistance:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
                var textArea = "<textarea name='new_quote[]' />";
                $("#div_quotes").append("\n<br />");

And the button to add a text area needed an id: <input type="button" value="Add Text Area" id="button_add_input">
I looked for a way to add the textarea without specifying the html as in something like $("#div_quotes").append(html.textarea), but could not find how to reference a textarea directly, so just added the HTML instead.



dafodil? dafodil! Do I look like a freaking flower to you?! I am the Prince of Darkness! Well, when I turn off the light. :)

Laerning jQuery just for this may be overkill, but vanilla js cooks my brain owing to the way that different browsers tend to mess up your carefully crafted code, I bit the bullet and joined the rest.


@diafol Haha! Looking at your funny man links, I guess it could be 'David Hill' with a Welsh accent. I had not heard of Vanilla JS and was impressed with the performance stats, but as you mentioned, cross browser compatibility is a real pain with Javascript and jQuery separates the developer from this concern. Also, the jQuery UI looks like it will speed development of User Interfaces like the one I need to administer my quotes database.


Thanks for your Help. I get all the information what i needed.
Thanks again for helping me.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.