4 replies to this topic

[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.




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.



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!