Question

我试图遍历表单字段并获取值。我期待的是"key=primary_account_id&value=123&key=primary_account_first_name&value=rose&key=primary_account_last_name&value=kent"，而我从代码下面得到的是"key=primary_account_id&value=123"三次。请让我知道我错过了什么。谢谢。

 <div class="search-field-form">
    <div class="custom-dd">
      <select class="searchField" name="search-field">
        <option value="primary_account_id" data-type="text">ID</option>
      </select>
    </div>
    <div class="answer search-text hide">
      <input type="text" name="search-value" value="123">
    </div>
  </div>
  <div class="search-field-form">
    <div class="custom-dd">
      <select class="searchField" name="search-field">
        <option value="primary_account_first_name" data-type="text">Primary First Name</option>
      </select>
    </div>
    <div class="answer search-text hide">
      <input type="text" name="search-value" value="rose">
    </div>
  </div>
  <div class="search-field-form">
    <div class="custom-dd">
      <select class="searchField" name="search-field">
        <option value="primary_account_last_name" data-type="text">Last Name</option>
      </select>
    </div>
    <div class="answer search-text hide">
      <input type="text" name="search-value" value="kent">
    </div>
  </div>
<script>
$('.search-field-form').each(function(){
console.log("key=" + $('.searchField').val() + "&value=" + $('.searchField').closest('.search-field-form').find('.search-text').find('input[name="search-value"]').val());
</script>

Answer 1

将$('.searchField')更改为$(this).find('.searchField')

Answer 2

如果您有表格，请执行以下操作 -

<强> HTML

<form id="search-form">
    <div class="search-field-form">
        <div class="custom-dd">
            <select class="searchField" name="search-field">
                <option value="primary_account_id" data-type="text">ID</option>
            </select>
        </div>
        <div class="answer search-text hide">
            <input type="text" name="search-value" value="123">
        </div>
    </div>
    <div class="search-field-form">
        <div class="custom-dd">
            <select class="searchField" name="search-field">
                <option value="primary_account_first_name" data-type="text">Primary First Name</option>
            </select>
        </div>
        <div class="answer search-text hide">
            <input type="text" name="search-value" value="rose">
        </div>
    </div>
    <div class="search-field-form">
        <div class="custom-dd">
            <select class="searchField" name="search-field">
                <option value="primary_account_last_name" data-type="text">Last Name</option>
            </select>
        </div>
            <div class="answer search-text hide">
                <input type="text" name="search-value" value="kent">
            </div>
        </div>
    <button type="button" id="submit-btn">Submit</button>
</form>

<强> JS

<script>
$(function() {
    $('#submit-btn').click(function() { 
        data = $('#search-form').serialize();
        data = data.replace(/search-field/g, 'key');
        data = data.replace(/search-value/g, 'value');
        console.log(data);
    });
});
</script>

如果您没有表格，请按照Hairmot的回答。

jQuery循环输入和选项

2 个答案: