检索每个输入框jquery的值。有没有更好的方法然后使用get()?

时间:2018-01-26 23:36:35

标签: jquery

我只是不熟悉get()方法,并且想知道是否有更简单的方法来检索位于某个部分中的表单输入框的所有值。这就是我所拥有的并且有效:

表格逻辑:

function submitForm(e) {
    e.preventDefault();
    var addresses = $('.add_address_section .add_address_field').map(function() { return $(this).val() }).get();
    ...

上述工作,但我想知道为什么我需要get()。不应该在val()下注给我输入框的值吗?

没有get,这就是返回:

$('.add_address_section .add_address_field').map(function() { return $(this).val() })
w.fn.init(2) ["12323", "515", prevObject: w.fn.init(2)]

上述对象是什么?

仅供参考,这是我的HTML:

<html>
  <head>
    <title>Greeting Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="add_coins.js"></script>
    <link rel="stylesheet" href="css/add_coins.css">
  </head>
  <body>
    <div class="logo">
      <img src="grumpy_cat.jpg">
    </div>
    <div class="coin-form-wrapper">
    </div>
  </body>
</html>

这是我的jquery:

$(function(){
  var coinFormWrapper = $(".coin-form-wrapper");
  var submitAddressButton = $('.add_address_button');
  var inputHTML = `
    <div class='address_field'>
      <input type='text' class='add_address_field' name='field_name[]' value=""/>
      <input type='button' class='remove_address_button' value='Remove Address'/>
    </div>
  `;
  var addAddressButton = `
    <div class='add_address'>
      <input type='button' class='add_address_button' value='Add Another Address'/>
    </div>
  `
  var submitButton = `
    <div class='submit_address'>
      <input type='button' class='submit_button' value='Mix Addresses'/>
    </div>
  `
  var addAddressHTML = `
    <div class='add_address_section'>
    </div>
  `

  addAddAddressButton()
  // there should be 1 field at intiial page load
  addAddAddressHTML()
  addInputField()
  addSubmitButton()

  // =========listeners============
  $(coinFormWrapper).on('click', '.remove_address_button', function(e) {
    removeInputRow.call(this)
  });

  $(coinFormWrapper).on('click', '.add_address_button', function(e) {
    addInputField()
  });

  $(coinFormWrapper).on('click', '.submit_button', function(e) {
    submitForm(e)
  });


  // reuseable functions
  function addInputField() {
    $('.add_address_section').append(inputHTML);
  }

  function addAddAddressButton() {
    $(coinFormWrapper).append(addAddressButton);
  }

  function addAddAddressHTML() {
    $(coinFormWrapper).append(addAddressHTML)
  }

  function removeInputRow(e) {
    $(this).parent('div').remove();
  }

  function addSubmitButton() {
    $(coinFormWrapper).append(submitButton);
  }

  function submitForm(e) {
    e.preventDefault();
    var addresses = $('.add_address_section .add_address_field').map(function() { return $(this).val() }).get();

    $.ajax({
      type: 'POST',
      url: '/mix_addresses',
      //grab the inputs from address_section
      data: { 'addresses': addresses },
      dataType: "json",
      success: function(data) {
        debugger;
        //if our ajax request is successful, replace the content of our viz div with the response data
        $('#viz').html(data);
      }
    });
  }
});

0 个答案:

没有答案