SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Select only form elements in a cloned div and not in the original

    I have a form builder in my application that I'm attempting to use jquery to improve. I've created a series of button that will clone a hidden div and places it in the form. So if you want a text field you click the text field button and it is added to the form. The problem is I would end up with multiple id and name fields that are identical so I need to also change them to something unique at the same time that the field is added. Here is what I have so far:

    Code JavaScript:
    var i = 0;
    	$('button#text-field').click(function() {
    	i++;			
    		$('div#textField').clone()
    			.insertAfter('div.fields:last').attr('id', 'text_field'+i)
    		$('input#field_name').attr('name', 'fieldname'+i);
    		$('input#field_name').attr('id', 'fieldname'+i);
    		$('input#field_db_alias').attr('name', 'fielddbalias'+i);
    		$('input#field_db_alias').attr('id', 'fielddbalias'+i);
    		$('.var').attr('value', +i);
     
    	});

    All I'm trying to do is change the name and id fields and add a number that is incremented each time a field is added. This works but for the input fields (field_name and field_db_alias) it doesn't just change the fields in the added div, it also changes the hidden div that is used for cloning. I can't figure out how to only select the input fields that have just been added. Any suggestions how I can select only the items in the new div? Seems I should be able to create a var with the id of the div ('text_field'+i) and then use that in my selector but I haven't been able to get it to work.

  2. #2
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I figured it out. I was on the right track with creating the var, I just wasn't doing it right. Here is what I did:


    Code JavaScript:
    var i = 0;
    	$('button#text-field').click(function() {
    	i++;			
    		$('div#textField').clone()
    			.insertAfter('div.fields:last').attr('id', 'text_field'+i)
    			var textField = 'text_field'+i;
    		$('#'+textField+' #field_name').attr('name', 'fieldname'+i)
    		$('#'+textField+' #field_name').attr('id', 'fieldname'+i);
    		$('#'+textField+' #field_db_alias').attr('name', 'fielddbalias'+i);
    		$('#'+textField+' #field_db_alias').attr('id', 'fielddbalias'+i);
    		$('.var').attr('value', +i);
    	});


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •