how to set a name for each fieldset added dynamicaly

Question

I wanna set a name for each fildset added dynamicaly, the name is taken from a select tag. for example, I chose a product from the select list, the name is captured as the legend of the fieldset .. then I press the add button to add another fieldset, and when I chose a new name from the select list, the same name remain for all of the fieldsets.

here's my code

HTML :

 $("select[name='brand']").change(function () {
       
            var selectedText = $(this).find("option:selected").text();
            $(".test").text(selectedText);

    });
 $(function()
    {
        $(document).on('click', '.btn-add', function(e)
        {
            e.preventDefault();

            var controlForm = $('.controls:first'),
                currentEntry = $(this).parents('.entry:first'),
                newEntry = $(currentEntry.clone()).appendTo(controlForm);

            newEntry.find('input').val('');
            controlForm.find('.entry:not(:last) .btn-add')
                .removeClass('btn-add').addClass('btn-remove')
                .removeClass('btn-success').addClass('btn-danger')
                .html('');
        }).on('click', '.btn-remove', function(e)
        {
            $(this).parents('.entry:first').remove();

            e.preventDefault();
            return false;
        });
    });

@import url('http://getbootstrap.com/3.3.7/assets/css/bootstrap.css')
.container {
    margin-top: 10px;
}

.nav-tabs > li {
    position: relative;
}

.nav-tabs > li > a {
    display: inline-block;
}

.nav-tabs > li > span {
    display: none;
    cursor: pointer;
    position: absolute;
    right: 6px;
    top: 8px;
    color: red;
}

.nav-tabs > li:hover > span {
    display: inline-block;
}

fieldset {
    border: 1px solid #ddd !important;
    margin: 0;
    xmin-width: 0;
    padding: 10px;
    position: relative;
    border-radius: 4px;
    background-color: #f5f5f5;
    padding-left: 10px!important;
}

legend {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0px;
    width: 35%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px 5px 5px 10px;
    background-color: #ffffff;
}






	
		
			
			
				
			
		
		
			
				
				
					Samsung A3x
					
					Samsung A4   x 
					
					+ Add product
					
				
				
					Contact Form: Joe Smith
					Contact Form: Molly Lewis

https://jsfiddle.net/aymanP/s5bud321/

Omi · Accepted Answer

As you are adding dynamically element. Your event handler for select is not going to work.because it is "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on().

As you used .test class $(".test").text(selectedText); this statement will change text to all .test class. So need to find that class in current fieldset. Using parents() we can do that.

$('.controls').on('change', "select[name='brand']", function() {
  var selectedText = $(this).find("option:selected").text();
  $(this).parents('.entry').find(".test").text(selectedText);

});

$(function() {
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();

    var controlForm = $('.controls:first'),
      currentEntry = $(this).parents('.entry:first'),
      newEntry = $(currentEntry.clone()).appendTo(controlForm);

    newEntry.find('input').val('');
    controlForm.find('.entry:not(:last) .btn-add')
      .removeClass('btn-add').addClass('btn-remove')
      .removeClass('btn-success').addClass('btn-danger')
      .html('');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });
});

@import url('http://getbootstrap.com/3.3.7/assets/css/bootstrap.css') .container {
  margin-top: 10px;
}

.nav-tabs>li {
  position: relative;
}

.nav-tabs>li>a {
  display: inline-block;
}

.nav-tabs>li>span {
  display: none;
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: 8px;
  color: red;
}

.nav-tabs>li:hover>span {
  display: inline-block;
}

fieldset {
  border: 1px solid #ddd !important;
  margin: 0;
  xmin-width: 0;
  padding: 10px;
  position: relative;
  border-radius: 4px;
  background-color: #f5f5f5;
  padding-left: 10px!important;
}

legend {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0px;
  width: 35%;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 5px 5px 10px;
  background-color: #ffffff;
}






  
    
      
      
				
      
    
    
      
        
        
          Samsung A3x
          
          Samsung A4  x 
          
          + Add product
          
        
        
          Contact Form: Joe Smith
          Contact Form: Molly Lewis

how to set a name for each fieldset added dynamicaly

Answers (1)

Related Questions