Thanks, Richard...I'll give it a go! Rick
> -----Original Message----- > From: [email protected] [mailto:[email protected]] On > Behalf Of Ricardo Tomasi > Sent: Monday, December 29, 2008 2:35 PM > To: jQuery (English) > Subject: [jQuery] Re: Why isn't the name attr in this code incrementing? > > > 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
