How to adjust so the moderator can't add more then 4 inputs for each targetted container

62
June 21, 2018, at 10:10 PM

So I have input fields which the moderator can create, but I don't want the moderator to be able to add more then 4 input fields for each targetted element. The reason is because I have a grid where there cannot be more then 4 input fields for each targetted container or the next input field will be append underneath it and this will ruin the structure.

The code that appends input fields, but shouldn't append more then 4 for each targetted container:

function getAddBtn(target, i) {
    var addBtn = $('<a/>', {
        'class': 'btn btn-primary',
        'id': 'addBtn'
    }).on('click', function() {
        $(target).append(getWordPartInput(i));
    }).html('<i class="fa fa-plus"></i>');
    console.log(target);
    return addBtn;
}

just to be sure I added getWordPartInput(i), this is how the input field is created.

function getWordPartInput(id, cValue) {
    cValue = cValue || '';
    var wpInput = $('<input/>', {
        'class': 'form-group form-control syllable',
        'type': 'text',
        'value': cValue,
        'placeholder': 'Syllables',
        'name': 'Syllablescounter[' + SyllablesID++ + ']'
    });
    return wpInput;
}

if you need any other code (this was the code I thought was needed) please tell me.

Answer 1

You can check the appended syllable class count in the target, in the click event and limit that. Code is:

.on('click', function(){
     if($('.syllable',target).length>4)
          return false;
     $(target).append(getWordPartInput(i));
 })
READ ALSO
Run function just before jQuery animation ends

Run function just before jQuery animation ends

I have a scroller that animates scrolling using prev/next buttonsThe duration of the animation is calculated based on the distance moved, so the duration is variable

43
Add single attribute without value using jquery [duplicate]

Add single attribute without value using jquery [duplicate]

This question already has an answer here:

47
How to observe the width change of element with jquery or javascript?

How to observe the width change of element with jquery or javascript?

While researching about above mention questions, I came up with solution which did not work in my case

84
Turn a JSON array of arrays into &lt;ul&gt; and &lt;li&gt; elements

Turn a JSON array of arrays into <ul> and <li> elements

I'm creating a custom visual in Microsoft Power BIThe creation api uses typescript and the d3 library

76