0

The first input field is for a person's name and then three fields come up where a user is to enter the ingredient name, price and percentage.

But if you click inside one of the three input fields and navigate away without entering anything, another row of three fields come up.

How do I change so that it so that it only adds more fields when something is entered in any of the three previous fields?

And if I were to add the information that's been submitted on the fields to the ul ingredients, how would I go as to doing so?

            $(document).ready(function () {

                $(document).on("focusout", ".ration, .percentage", function () {

                    var count = $('.newtextbox').length;
                    var percent = 0;

                    $(".percentage").each(function (i) {

                        var pc = parseInt($(this).val().replace(/%/g, ""));

                        if (!isNaN(pc)) {
                            percent += pc;
                        } 
                    });

                    if (percent == 100) {
                        alert('You Have Reached 100%');
                    } else if (percent > 100)  {
                        alert('You Are Over 100%');
                    }  else if (count < 10) {
                        $(content).append("<p><input type='text' class='newtextbox' id='ingredient" + count + "' placeholder='ingredient name'/> <input type='text' class='costPerTon' placeholder='cost per ton'/> <input type='text' class='percentage' placeholder='percent applied'/> <input type='button' value='Remove' id='removeButton" + count + "'/></p>");
                    } else {
                        alert('You have maximum elements allowed.')
                    }

                    $("input[type = 'button']").click(function () {
                        $(this).parent().remove();
                    });
                });
            });

http://jsfiddle.net/edwinakatosh/6YqL8/

4

2 回答 2

0

因为：

else if (count < 10) {

将其更改为：

else if (count < 1) {

例子

于 2013-07-20T17:47:11.763 回答
0

You could check if the value of the field is empty or not, I have updated your fiddle: http://jsfiddle.net/6YqL8/14/.

$(this) is a jQuery shortcut to the element that triggered the event and .val() returns the value of an input field

if ($(this).val() !== '') {
    $(content).append("<p><input type='text' class='newtextbox' id='ingredient" + count + "' placeholder='ingredient name'/> <input type='text' class='costPerTon' placeholder='cost per ton'/> <input type='text' class='percentage' placeholder='percent applied'/> <input type='button' value='Remove' id='removeButton" + count + "'/></p>");
}
于 2013-07-20T17:50:24.013 回答