⚠ In case you've missed it we are migrating to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. Very soon this forum will be read-only and archived. ⚠


Add new input field dynamically

input field dynamically

  • Please log in to reply
4 replies to this topic

#1 clustersblue

clustersblue

    Advanced Member

  • Members
  • PipPipPip
  • 40 posts

Posted 19 November 2012 - 10:42 AM

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.

dynamic.JPG


Thanks and BR,
clustersblue

#2 clustersblue

clustersblue

    Advanced Member

  • Members
  • PipPipPip
  • 40 posts

Posted 23 November 2012 - 05:07 AM

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.

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;
	 });


#3 clustersblue

clustersblue

    Advanced Member

  • Members
  • PipPipPip
  • 40 posts

Posted 23 January 2013 - 10:08 AM

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;
	    });


#4 deib97

deib97

    Member

  • Members
  • PipPip
  • 18 posts

Posted 09 April 2013 - 03:28 AM

hi clustersblue,

 

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

thanks



#5 holmesii

holmesii

    Newbie

  • Members
  • Pip
  • 7 posts

Posted 13 June 2018 - 08:05 PM

Mark!






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users