CODEWITHSUNDEEP
javascriptjqueryhtmlinputfield
Spudster
Spudster

Reputation: 69

Setting A Limit On Input Field Creation?

I haven't found nothing on this topic so I though I quickly ask here.

Anyway I am creating a feature which allow users to add new admins to there clan and to make it easier the user can add a new input field that is all working fine ;)

But what I want is to only allow the user to add a maxim of 5 admins at one time to save server resources as at the moment they can have as many as they want.

How could I archive this?

(The code is below) 

<form>
    <input type="text" />
</form>
<button id="addFields">Add another field
    </button>

   //JQUERY SIDE BELOW

$(function ($) {

    $('body').on("click", '#addFields', function () {
        $('form').append('<input type="text" />')
    })

})(jQuery)

Upvotes: 0

Views: 87

Answers (3)

faby
faby

Reputation: 7556

client side you can do in this way

$(function ($) {
       $('body').on("click", '#addFields', function () {
        if ($("form > input:text").length < 5) {
            $('form').append('<input type="text" />');
        }
        else{
         alert('can't add more admins');
        }
    });

})(jQuery);

but in this way you are blocking only to add maximum 5 admins at the same time.

in your server side you should do something like this (a more robust solution) (SQL)

    SET @admins= (SELECT COUNT(IdUSerAdmin) FROM Users where IdAdmin= @YouAdminUser)

    IF(@admins < 5)
    BEGIN
       INSERT INTO USERS ....
    END

Upvotes: 2

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

$(function ($) {
    var totalFieldsAdded = 0;
    var totalFieldsAllowed = 5;
    $('body').on("click", '#addFields', function () {
        if(totalFieldsAdded < totalFieldsAllowed){
            $('form').append('<input type="text" />');
            totalFieldsAdded++;
        }
    })

})(jQuery)

Upvotes: 1

John C
John C

Reputation: 666

What @Vote to Close said is right, you'll need to stop this on both the server and client side. On the client side, you could do this:

$(function ($) {
    var MAX_LIMIT = 5;
    $('body').on("click", '#addFields', function () {
        if ($("form > input[type='text']").length < MAX_LIMIT) {
            $('form').append('<input type="text" />');
        }
    });

})(jQuery);

Upvotes: 1

Related Questions