How didn't I notice... IDs are unique, you can't do that. Use a class
instead, .main-photo-next. You can also chain everything so you don't
need to search again for the new element:
$(document).ready(function() {
$('#add-image').click(function() {
$('#image-div-1').clone(true)
.attr('id', function() {
return this.id.replace(/(.+)(\d+$)/, function(s,
p1, p2) {
return p1 + (parseInt(p2, 10) + 1);
})
})
.appendTo('#image-input')
.find('.main-photo-next').attr('name', function() {
return $(this).attr('name').replace(/(.+)(\d+$)/,
function(s, p1, p2) {
return p1 + (parseInt(p2, 10) + 1);
})
});
return false;
});
});
>
> $(document).ready(function() {
>
> $('#add-image').click(function() {
> $('#image-div-1').clone(true)
>
> .attr('id', function() {
> return this.id.replace(/(.+)(\d+$)/, function(s, p1, p2) {
> return p1 + (parseInt(p2, 10) + 1);
> })
> })
>
> .appendTo('#image-input');
>
> $('#main-photo-next:last').attr('name', function() {
> return $(this).attr('name').replace(/(.+)(\d+$)/,
> function(s, p1, p2) {
> return p1 + (parseInt(p2, 10) + 1);
> })
> });
>
> return false;
>
> });
>
> });
>
> And it's still cloning div correctly, but the last part,
> $('#main-photo-next:last') etc.,
> is now renumbering the original name attribute of the first #main-photo-next
> div, instead
> of the second (which would be the last when the first clone is created).
>
> So I end up with <select id="main-photo-next" name="main-photo-2"> followed by
> <select id="main-photo-next" name="main-photo-1"> instead of
>
> <select id="main-photo-next" name="main-photo-1"> followed by
> <select id="main-photo-next" name="main-photo-2">
>
> Is the functioning order of the code wrong somewhere?
>
> Rick
>
>
>
> > -----Original Message-----
> > From: [email protected] [mailto:[email protected]] On
> > Behalf Of Ricardo Tomasi
> > Sent: Monday, December 29, 2008 11:02 AM
> > To: jQuery (English)
> > Subject: [jQuery] Re: Why isn't the name attr in this code incrementing?
>
> > ('#main-photo-next :last').name
>
> > You're missing the $/jQuery and trying to get a property that doesn't
> > exist.
>
> > change that to $(this).attr('name').replace(...) and you're set.
>
> > On Dec 29, 1:36 am, "Rick Faircloth" <[email protected]> wrote:
> > > Hi, all...
>
> > > I'm cloning a section of code to create additional image
> > > inputs in a form, along with a yes/no select field.
>
> > > When the cloning occurs, I also need to increment the field
> > > names of the select statement (main-photo-1, main-photo-2, etc.),
> > > and the file input field (image-upload-1, image-upload-2, etc.)
>
> > > Here's the HTML:
>
> > > <div id="image-input">
>
> > > <div id="image-div-1">
>
> > > <p>Is this photo the main property photo?</p>
>
> > > <select id="main-photo-next" name="main-photo-1"
> > > class="textinput01">
>
> > > <cfif isdefined("form.fieldnames")>
> > > <option
> > > value="<cfoutput>#form.main-photo-1#</cfoutput>" selected></option>
> > > </cfif>
>
> > > <option value="Yes">Yes</option>
> > > <option value="No">No</option>
>
> > > </select>
>
> > > <input id="image-next" name="image-upload-1" type="file"
> > > size="65" value="">
>
> > > </div>
>
> > > </div>
>
> > > <button id="add-image">Add New Image Field</button>
>
> > > Here's the jQuery (a hacked-up version of something simpler that worked
> > > well,
> > > but was missing functionality I now need) that I'm using to clone the
> > > entire div, "image-div-1".
>
> > > <script type="text/javascript">
>
> > > $(document).ready(function() {
>
> > > $('#add-image').click(function() {
> > > $('#image-div-1').clone(true)
>
> > > .attr('id', function() {
> > > return this.id.replace(/(.+)(\d+$)/, function(s,
> > > p1, p2) {
> > > return p1 + (parseInt(p2, 10) + 1);
> > > })
> > > })
>
> > > .appendTo('#image-input');
> > > return false;
>
> > > $('#main-photo-next :last').attr('name', function() {
> > > return ('#main-photo-next
> > > :last').name.replace(/(.+)(\d+$)/, function(s, p1,
> p2)
> > > {
> > > return p1 + (parseInt(p2, 12) + 1);
>
> > > })
> > > });
>
> > > });
>
> > > });
>
> > > </script>
>
> > > As you can tell, the code is not complete, as it doesn't deal with
> > > incrementing
> > > the "image-next" file input field.
>
> > > When I click the button to clone the div, everything appears in the DOM
> > > as it
> > > should, but the name of the select input is not incrementing. Each
> > > select statement
> > > is named "main-photo-1".
>
> > > How do I need to adjust the code to cause the name to increment?
>
> > > Also, what code would I add to increment the "image-next" filefield?
>
> > > One last issue is how to increment the value in the select statement,
> > > "<cfoutput>#form.main-photo-1#</cfoutput>".
>
> > > Any tips or code would be appreciated!
>
> > > Thanks,
>
> > > Rick
