Well...close, but no cigar at the moment.
I've got this jQuery now:
$(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
