/    Sign up×
Community /Pin to ProfileBookmark

Copy parts of a form

Copy linkTweet thisAlerts:
Nov 18.2011

I’m creating the backend part of a slideshow of pictures. It initially has no slide, and the form has to display just the group of fields for one slide.

There is a select field for “number of slides” with an onchange handler, which depending on its value, will display more groups of fields, for other slides, or remove the remaining ones. So I want to copy an original group and append it to the container.

The problem is that all the fields have an index, in order to identify which slide they belong to.

What’s the proper way to implement this?

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@cbVisionNov 18.2011 — I'm lost on what you're trying to do. Can you illustrate an example somehow?
Copy linkTweet thisAlerts:
@JazztronikauthorNov 18.2011 — well, this is the php+html code cut short (there are more form fields):

[code=php]
<div id="slides_wrapper">
<?php
for ($i = 0; $i < $num_slides; $i++):
?>
<div class="slide_wrapper">
<p><span class="close openclose-<?php echo $i+1; ?>" onclick="openclose('openclose-<?php echo $i+1; ?>')">-</span>&nbsp;Slide <?php echo $i+1; ?></p>
<p class="slide">
<label>Name</label>
<input type="file" name="image_<?php echo $i+1; ?>" id="slide_<?php echo $i+1; ?>" value="" /><br />
<?php
if ($images[$i]) :
?>
<input type="hidden" name="slide_<?php echo $i+1; ?>_old" value="<?php echo $images[$i]->type ; ?>" />
<?php
endif;
?>
<label>Type of slide</label>
<select name="type-<?php echo $i+1; ?>" id="type">
<option value="image" <?php if (isset($images[$i])) echo $images[$i]->type == 'image' ? 'selected="selected"' : ''; ?>>Image</option>
<option value="video" <?php if (isset($images[$i])) echo $images[$i]->type == 'video' ? 'selected="selected"' : ''; ?>>Video</option>
</select>
<br />
<label>Text in slide</label><br />
<input type="text" name="text_<?php echo $i+1; ?>" value="<?php if (isset($images[$i])) echo $images[$i]->text; ?>" /><br />
</p>
</div>
<?php
endfor;
?>
</div>[/code]
[B]

div#slides_wrapper[/B] contains all the groups of fields for every slide

[B][COLOR="Red"]div.slide_wrapper[/COLOR][/B] is what I want to copy. It contains each group of fields belonging to one slide + an element to show/hide this group (this is another jQuery code I already have implemented)

[B]p.slide[/B] contains the group fields.
Copy linkTweet thisAlerts:
@cbVisionNov 18.2011 — So you want to copy all the div.slide_wrapper and append them to the div#slides_wrapper?

[CODE]$('.slide_wrapper').clone().appendTo('#slides_wrapper');[/CODE]
Copy linkTweet thisAlerts:
@JazztronikauthorNov 19.2011 — No, it's not that easy. Notice that I need to difference each copy. There's an index used in a php loop.

When the page is requested, php finds out how many slides are currently stored, e.g. 3 slides, and iterates 3 times to build each field group representing a slide. Notice the field names of their id's.

There is a select field, which is not present in the code I posted, with an onchange handler, so that when I select another number of slides, a Javascript code must update to the specified number of slides, following the name convention with that index.

To make it simpler. Imagine there is an "Add new slide" button, which creates just a new copy and appends it to the rest. However it will need the subsequent index in its name and id.

I could create any element on-the-fly and append it on the DOM with its corresponding name, but there are many fields I didn't post. It would be tedious, and I wonder if there is something simpler.

P.S.: congratulations for your wedding btw ?
Copy linkTweet thisAlerts:
@JazztronikauthorNov 20.2011 — Any help about this?? ?
×

Success!

Help @Jazztronik 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

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