I've got this jQuery:
$(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 cloning the div (image-div-1) 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: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] 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" <r...@whitestonemedia.com> 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
