如何将<input />“names”存储为对象的属性，然后将匹配的<input />“value”存储为该对象属性的值？

Question

我希望基本上构建一个动态对象，其中属性是输入名称，该属性的值将是输入值。

这是HTML

<form>
                <fieldset>
                    <legend>form</legend>
                    <label>First<input type="text" value="null" name="first"/></label>
                    <label>Last<input type="text" value="null" name="last"/></label>
                    <label>Email<input type="text" value="null" name="email"/></label>

                    <input type="submit" value="submit"/>
                </fieldset>
            </form>

这是我到目前为止使用的jQuery 我已将值存储在单独的数组中并命名。有没有办法创建某种关联数组或创建一个对象，其中属性名称取自一个数组而值取自另一个数组？

        var values = new Array();
    var names = new Array();

    $("form").submit(function(event){
        event.preventDefault();

            values = [];
            names = [];

            $('form input').not('[type="submit"]').each(function(){
            values.push($(this).val());

            });


            $('form input').not('[type="submit"]').each(function(){
            names.push($(this).attr("name"));

            });

    });

我也尝试过.serializeArray（）并返回一个Objects数组。但后来我不知道如何从该对象中拉出所有键/值对并进入一个新对象。

最终目标是不通过ajax发送此数据，而是发送给聚合数据以进行分析的第三方。请帮忙。我是自学成才，完全迷失了。哈哈。感谢

PS

我试过这个

$( "form" ).on( "submit", function( event ) {
            event.preventDefault();
            var input = $("form").serializeArray();
            $.each(input, function(i, field){
                console.log(JSON.stringify(input[i]));
            });
        });

但它会返回此

{"name":"first","value":"null"}
{"name":"last","value":"null"}
{"name":"email","value":"null"}

这似乎同样无益。哈哈。

我希望能够得到这样的结果

{
  "first" : "null",
  "last" : "null",
  "email" : "null"
}

Answer 1

我能想到的最简单的方法是使用serializeArray然后将reduce用于对象或map。例如

$('form').on('submit', e => {
    e.preventDefault();

    let values = $(this).serializeArray().reduce((map, input) => {
        let value;
        if (map.hasOwnProperty(input.name)) {
            value = Array.isArray(map[input.name]) ?
                map[input.name] : [map[input.name]];
            value.push(input.value);
        } else {
            value = input.value;
        }
        map[input.name] = value;
        return map;
    }, {});
})

通过将命名值设置为数组来处理<select multiple>和<input type="checkbox">元素。

这里的JSFiddle演示〜https://jsfiddle.net/wmjeh5Lv/1/

旧版本

$('form').on('submit', function(e) {
    e.preventDefault();

    var values = $(this).serializeArray().reduce(function(map, input) {
        var value;
        if (map.hasOwnProperty(input.name)) {
            value = Array.isArray(map[input.name]) ?
                map[input.name] : [map[input.name]];
            value.push(input.value);
        } else {
            value = input.value;
        }
        map[input.name] = value;
        return map;
    }, {});
})

Answer 2

这应该有效，但实际上我并不了解它的必要性。检查浏览器的控制台。它给了我： {first: "null", last: "null", email: "null"}

＆＃13;

＆＃13;

$(document).ready(function() {
  $('form').on('submit', function(e) {
    e.preventDefault();
    var arrObj = {};
    $(this).find('input:not(:submit)').each(function(i, el) {
      el = $(el);
      arrObj[el.attr('name')] = el.val();
    });
    console.log(arrObj);
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset>
    <legend>form</legend>
    <label>First
      <input type="text" value="null" name="first" />
    </label>
    <label>Last
      <input type="text" value="null" name="last" />
    </label>
    <label>Email
      <input type="text" value="null" name="email" />
    </label>

    <input type="submit" value="submit" />
  </fieldset>
</form>
<div id="results">
</div>

＆＃13;

＆＃13;

＆＃13;

关于范围和功能的快速位

注意：我不是javascript专家，我没有正式的教育，这些只是我在使用javascript时学到的东西。

1. 如果您在函数中定义外部变量，则可以在*
中使用它

使用我给你的相同代码，你可以这样做：

＆＃13;
＆＃13;
$(document).ready(function() {
  var arrObj = {};
  //Notice, arrObj is now defined OUTSIDE of our form.onsubmit function
  $('form').on('submit', function(e) {
    e.preventDefault();

    $(this).find('input:not(:submit)').each(function(i, el) {
      el = $(el);
      arrObj[el.attr('name')] = el.val();
    });
    console.log(arrObj);
  });

  $('button').on('click', function() {
    console.log(arrObj);
  });
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset>
    <legend>form</legend>
    <label>First
      <input type="text" value="null" name="first" />
    </label>
    <label>Last
      <input type="text" value="null" name="last" />
    </label>
    <label>Email
      <input type="text" value="null" name="email" />
    </label>

    <input type="submit" value="submit" />
  </fieldset>
</form>

<button>Click me and Check Console<small>*Must click submit button first</small></button>
＆＃13;
＆＃13;
＆＃13;
1. 根据您的需要，这会上升。

您在$(document).ready(...)之外定义了一个变量，并且想要使用它吗？前进。 Javascript不在乎。

1. 如有疑问，请创建另一个可以从其他地方返回的函数，如此（这涉及使用$.fn.extend()向每个jquery对象添加新方法）
＆＃13;
＆＃13;
$.fn.extend({
  formObject: function() {
    var arrObj = {};
    
    $(this).find('input:not(:submit)').each(function(i, el) {
      el = $(el);
      arrObj[el.attr('name')] = el.val();
    });
    return arrObj;
  }
});

$(document).ready(function() {

  $('button').on('click', function() {
    alert('check console');
    console.log($('form').formObject());
  });
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <fieldset>
    <legend>form</legend>
    <label>First
      <input type="text" value="null" name="first" />
    </label>
    <label>Last
      <input type="text" value="null" name="last" />
    </label>
    <label>Email
      <input type="text" value="null" name="email" />
    </label>
  </fieldset>
</form>

<button>Click Me</button>
＆＃13;
＆＃13;
＆＃13;

这些不是唯一的方式，如果我说实话，我甚至不认为他们是最好的方式，但他们＆＃39使用我们已有的最快方式。

Answer 3

我不明白为什么提交按钮如果只需要它去生成一个对象？

所以这是我的尝试只生成没有数组的输出......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form>
  <fieldset>
    <legend>form</legend>
    <label>First<input type="text" value="null" name="first"/></label>
    <label>Last<input type="text" value="null" name="last"/></label>
    <label>Email<input type="text" value="null" name="email"/></label>

    <button onclick="generate()">Generate</button>
  </fieldset>
</form>

<br>
<div id="result"></div>

json