jQuery僅在輸入字段中輸入內容時才添加新字段

第一個輸入字段用於輸入個人姓名，然後出現三個字段，用戶輸入配料名稱，價格和百分比。jQuery僅在輸入字段中輸入內容時才添加新字段

但是，如果您單擊三個輸入字段中的一個並在沒有輸入任何內容的情況下導航，另一行將出現三個字段。

我該如何改變它，以便在前面三個字段中的任何一個字段中輸入內容時只添加更多字段？

如果我要將字段中提交的信息添加到UL成分中，我該如何去做？

  $(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/

來源

2013-07-20 jquerynoob

你可以檢查該字段的值是否爲空，我已更新您的小提琴：http://jsfiddle.net/6YqL8/14/。

$(this)是一個jQuery快捷方式觸發事件和.val()返回的輸入字段的值的元件

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-20 17:50:24 chrisweb

因爲：

else if (count < 10) {

修改成：

else if (count < 1) {

EXAMPLE

來源

2013-07-20 17:47:11 Shawn31313

jQuery僅在輸入字段中輸入內容時才添加新字段

回答

相關問題