Adding section in form depending on user

Peuplarchie · 12-17-2008, 04:29 AM

Good day to you all,
here i come again with a probably easy question for you but I can't find what i'm looking for.

What I have:
Simple form....

PHP Code:


			
<input name="artist" value="Artist" />
<input name="country" value="Country" />

<input name="cd" value="Album" />
<input name="year" value="year" />
<input name="price" value="price" />

MY GOAL:

Have a link that would add a section into the form dynamicly with out reloading of the page. (add an album from this artist)

PHP Code:


			
<input name="cd" value="Album" />
<input name="year" value="year" />
<input name="recorded" value="Recorded" />

BUT:
Here is the twist, I need to be able if to add another section for DVD.
Different field is required for this...

PHP Code:


			
<input name="DVD" value="DVD" />
<input name="year" value="year" />
<input name="where" value="where" />

I know there will be some JS and CSS but I think the core could be PHP.

Thanks for any help, I still searching, directions would be nice...

Tanax · 12-17-2008, 10:16 AM

No php in there, if I understood what you wanted correctly.
It's all JS and CSS.

Wildhoney · 01-07-2009, 12:03 AM

I don't understand the conditional aspect of your question, but I have created the following JavaScript file to give us a base to work from. I hope this at least starts us off on the right track!

Salathe · 01-07-2009, 12:09 AM

Just embedding Wildhoney's attachment into a post to save unnecessary downloading.

PHP Code:


			
<head>

    <title>TalkPHP - Dynamically Add Fields</title>

</head>

<body>



    <input type="button" value="Add Necessary Fields" onclick="TalkPHP_Dynamic.addCd();">

    

    <div id="pDynamicFormCd"></div>



    <script type="text/javascript">

    

        var TalkPHP_Dynamic = 

        {

            addCd: function()

            {

                var pBase = document.getElementById('pDynamicFormCd');

                

                var pCd = document.createElement('input');

                var pYear = document.createElement('input');

                var pRecorded = document.createElement('input');

                

                pCd.setAttribute('name', 'cd');

                pCd.setAttribute('value', 'Album');

                pBase.appendChild(pCd);

                

                pYear.setAttribute('name', 'year');

                pYear.setAttribute('value', 'year');

                pBase.appendChild(pYear);

                

                pRecorded.setAttribute('name', 'recorded');

                pRecorded.setAttribute('value', 'Recorded');

                pBase.appendChild(pRecorded);

            }

        }

    

    </script>

    

</body>