current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have a javascript function which is designed to add and remove additional input field to a div.

In a specific case, I could specify the div to which I would like the fields to be added when the function is called.

However, I want to have multiple buttons associated with multiple corresponding divs on one page which could call the function to add a field to that div.

The function:

$(function() {
        var scntDiv = $('#DIV');
        var i = $('#DIV p').size() + 1;

        $('.addField').on('click', function() {
                $('<p><input type="text" id="field_' + i +'" size="20" name="field_' + i +'" value="" /> <a href="#" id="remField">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('.remField').on('click', function() { 
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});

As you can see the add field button listens for a button with the class "addField" to be clicked.

I would like that click to pass the parameter for #DIV to be equal to the # of the parent div of that button, is that possible?

EDIT: Per request here is my markup (example of) with function (note ??? placeholders) JsFiddle

share|improve this question
2  
FYI live method is deprecated. You should use on instead. –  VisioN Nov 14 '13 at 15:53
1  
Post your HTML markup and yes, it's possible –  tymeJV Nov 14 '13 at 15:54
    
Not only is it possible, this is almost the exact question I use to phone screen candidates when I ask them to explain event delegation. –  Mathletics Nov 14 '13 at 15:55
    
@VisioN thanks - have edited –  Gideon Nov 14 '13 at 16:06
    
@tymeJV have edited post to include link to js fiddle with my markup –  Gideon Nov 14 '13 at 16:17

3 Answers 3

up vote 1 down vote accepted

Does this jsfiddle do the trick?

Html:

<div id="div">
    <div>
        <button type="button">
            <span>Add Field</span>
        </button>
    </div>
    <div>
        <button type="button">
            <span>Add Field</span>
        </button>
    </div>
    <div>
        <button type="button">
            <span>Add Field</span>
        </button>
    </div>
</div>

JavaScript:

(function ($, undefined) {
    'use strict';
    var i;
    i = 0;
    function fieldMaker () {
        i += 1;
        return $('<p><input type="text" id="field_' + i +'" size="20" name="field_' + i +'" value="" /> <a href="#">Remove</a></p>');
    }
    $(function () {
        $('#div').on({
            click : function () {
                $(this).closest('div').append(fieldMaker());
            }
        }, 'button');
        $('#div').on({
            click : function () {
                $(this).closest('p').remove();
            }
        }, 'a');
    });
}(jQuery));
share|improve this answer
up vote 0 down vote

You could store the information – where to add the input – at the button, for example using the HTML5 data-* attributes:

<p><button data-add-field-to=".fieldset-1">add field to .fieldset-1</button></p>
<fieldset class="fieldset-1"></fieldset>

JS:

jQuery( function() {
    var i = 1; // your counter logic here
    jQuery( '[data-add-field-to]').each( function() {
        var $button = $( this );
        $button.on( 'click', function( event ) {
            var newFieldId = 'field_' + i,
                target = jQuery( $button.attr( 'data-add-field-to' ) );
            jQuery( '<input type="text" id="' + newFieldId +'" size="20" name="' + newFieldId +'" value="" />').appendTo( target );
            i++;
            return false;
        } );
    } );
} );
share|improve this answer
    
I'm just getting used to HTML 5, but am I right in my understanding that this wouldn't work in a browser that doesn't support it? –  Gideon Nov 14 '13 at 16:12
    
As you are using jQuery, which supported the data-attributes long before they where introduced in any browser: yes, that should work anywhere. You are not relying on some fancy browser capabilities here. –  feeela Nov 14 '13 at 16:12
up vote 0 down vote

I will assume you have a mapping between the buttons (let's say button id) and the elements to add to:

var mapping = {
  '#button1' : $('#receiver1'),
  '#button2' : $('#receiver2'),
  '#button3' : $('#receiver3')
}

One solution is to check which button the click event was triggered on:

$('.addField').on('click', function() {
  $('<mycontent>').appendTo(mapping(this.id));
  i++;
  return false;
});

A more elegant solution is to create a function for each button:

Object.keys(mapping).forEach(function(key){
  $(key).on('click', function() {
      $('<mycontent>').appendTo(this);
      i++;
      return false;
  }.bind(mapping[key])); // force this to be the receiver
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.