/    Sign up×
Community /Pin to ProfileBookmark

creating div with form elements dynamically

Copy linkTweet thisAlerts:
May 10.2007

Hi,

I need help!! I am trying to create divs dynamically based on what5 a user selects in the form above. Basically I am asking the user for the amount of kids they would like registered for each session. Once this is entered, i would like to get the total from all the textboxes, and create divs based on the total. In each div, I would be asking them for the kids age and shirt size.

Any help is greatly appreciated.

Thanks

Tim

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@aaronbassettMay 10.2007 — Why divs? The user will not be able to enter the age/size in a div. You will need to create inputs for each not a div.

You could use something like:

var input;
var wrap = document.getElementById('inputHolder');
var n = document.getElementById('amountInput').value;
for(var i=0; i < n; i++) {
/* Create input for size and add to DOM */
input = document.createElement('input');
input.type = 'text';
input.name = 'size['+i']';
wrap.appendChild(input);

<i> </i>/* Create input for age and add to DOM */
<i> </i>input = document.createElement('input');
<i> </i>input.type = 'text';
<i> </i>input.name = 'age['+i']';
<i> </i>wrap.appendChild(input);
}

now thats just a quick example you really should read up a bit on Javascript and the DOM

http://www.w3schools.com/js/js_examples_3.asp

http://www.byteclub.net/wiki/index.php?title=Javascript_createElement
Copy linkTweet thisAlerts:
@takinduroauthorMay 10.2007 — The div is actually going to be holding all the form elements I need so I figured cre4ating a div and repeating that several timea is the solution..let me know anyone's thought..
Copy linkTweet thisAlerts:
@aaronbassettMay 10.2007 — I dont think that method will work. If you simply duplicate the same div contents including all form fields the form fields will each have the same name therefore when you do the post the last form element value will be the only one you receive.

As you are dealing with n (an unknown value) of possible size and age fields you need to post them as an array hence the size[0], size[1] and so on.

That way when it comes to writing your server side form processing script you can do:

foreach($_POST['size'] as $size) {
$dbObj-&gt;populate($size); // or whatever you want to do with it
}
Copy linkTweet thisAlerts:
@vinays84May 10.2007 — Try using DOM. I've recently realized its usefulness:

[CODE]<script type="text/javascript">
function createDiv(n) {

// create the Div
newDiv=document.createElement("div");
newDiv.setAttribute("id","div"+n);

//create whatever inputs you need
input1=document.createElement("input");
input1.setAttribute("type","text")
input1.setAttribute("name","someInput_"+n)
//etc..

// add the inputs
newDiv.appendChild(input1);

return newDiv;
}

function createAllDivs(howMany) {

masterDiv=document.getElementById("masterDiv")
for (i=0;i<howMany;i++) {
masterDiv.appendChild(creatDiv(i))
}

}
</script>[/CODE]

Make sure you define a div somewhere in your code with the id "masterDiv". It will hold all your dynamically created divs. Call createAllDivs when you know how many you want to create.
Copy linkTweet thisAlerts:
@takinduroauthorMay 10.2007 — thank you so much that was very helpful!!
×

Success!

Help @takinduro spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...