获取不为空的文本字段

Question

假设我有一个这样的 HTML 结构：

<div class="container">
    <input type="text" class="userInfo" name="first_name1" value="First name 1" />
    <input type="text" class="userInfo" name="first_name2" value="First name 2" />
</div>

<div class="container">
    <input type="text" class="userInfo" name="first_name3" value="First name 3" />
    <input type="text" class="userInfo" name="first_name4" value="First name 4" />
</div>

当用户点击带有 jQuery 的按钮时，如何获取所有不为空的文本字段？

一旦我得到它们，我想构建一个键值对字符串（用 & 连接）作为参数发送给 URL 例如：

"first_name1='First name 1&first_name2=First name 2'....

Answer 1

您可以使用 .filter() method 查找包含以下值的所有 input 元素：

Example Here

var $fieldsWithValues = $('input').filter(function () {
    return this.value;
});

根据您的编辑，您可以使用 $.param() function:

构造查询字符串

Example Here

var params = {};
var $fieldsWithValues = $('input').filter(function () {
    return this.value.trim();
}).each(function () {
    params[this.name] = this.value;
});

console.log($.param(params));

以上将记录：

"first_name1=First+name+1&first_name2=First+name+2&first_name3=First+name+3&first_name4=First+name+4"

Answer 2

$(function(){

  $("#yourButtonId").click(function(e){
    e.preventDefault();

      var emptyItems=[];
      var items = $("input.userInfo");

      $.each(items,function(i,k){
         var item =$(this);
         if(item.val()!="")
         {
           emptyItems.push(item.attr("name"));
         }
     })
     console.log(emptyItems);        
   })

})

现在emptyItems将具有非空文本框的名称

工作样本here

Answer 3

我认为 jQuery 隐藏所有工作的地方没有快速选择器。您将需要找到输入，然后遍历它们并检查它们的值。

var inputsWithValue = $('input').filter(
    function() {
        return $(this).val();
    }
);

获取不为空的文本字段

get text fields that are not empty

html

javascript

jquery

query-string