[clustersblue]

Hi,

I would like to have next to my input field a button that when a user click, it will create a new input field on each click. User can supply information on each field and will be saved to DB when the user click the save button. I saw several example of add/remove textbox dynamically using jQuery but I would like to know if there is a native way in GC in doing this? If possible without tweaking core GC codes.

Here's how my current field looks like. If I click "Add new ITR" button I'd like to see new input field/s to be created below it.

[attachment=363:dynamic.JPG]


Thanks and BR,
clustersblue

[clustersblue]

I was able to implement this functionality by the help of: http://jsfiddle.net/...ctionality-wise. Add and Remove button works fine on the first input box, but the successiding remove buttons didn't. I don't know why, but the example from the site works flowlessly and that puzzles me.

[attachment=372:addremove.JPG]

I'm currently tracing my code right now and it's been awhile that I'm doing this. I'll update this post as soon as I got this right, for now here is my code in case someone is interested to see:

var i = $('#issues_list_input_box p').size() + 1;

	

	 $(document).on('click','#add_itr',function() {

			 $('<p><label for="issues_list_input_box"><input type="text" id="p_scnt" size="10" maxlength="10" name="dynamic[]" placeholder="Input ITR" value=""/></label><img src="../../../assets/resources/img/icon/close.png" id="rem_itr" alt="remove"></img></p>').appendTo('#issues_list_input_box');

			 i++;

			 return false;

	 });

	

	 $(document).on('click','#rem_itr',function() {

			 if( i > 2 ) {

					 $(this).parents('p').remove();

					 i--;

			 }

			 return false;

	 });

[clustersblue]

Just in case someone bump into this issue here is the solution I found.

$('#add_itr').on('click',function() {

			    $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="10" maxlength="10" name="dynamic[]" placeholder="Input ITR" value=""/></label><img src="../../../assets/resources/img/icon/close.png" id="rem_itr" alt="remove"></img></p>').appendTo('#issues_list_input_box');

			    i++;

			    return false;

	    });

$('#issues_list_input_box').delegate("img","click",function(event) {

			    event.preventDefault();

			    if( i > 1 ) {

					    $(this).parents('p').remove();

					    i--;

			    }

			    return false;

	    });

[deib97]

hi clustersblue,

 

same with the ts problem, how i change my code with your code???

thanks

[holmesii]

Mark!