根据按钮元素层次结构位置收集输入值

时间：2018-07-28 10:15:28

标签： javascript jquery arrays

我的实际html代码：

<div class="panel panel-primary">
   <div class="panel-heading">
        Informação Pessoal
   </div>
   <div class="panel-body">
     <div class="row">
        <div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
            <div class="input-group">
                <span class="input-group-addon">Nome</span>
                <input type="text" name="adminName" class="form-control" value="<?php echo $adminData->name; ?>">
            </div>
        </div>
        <div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
            <div class="input-group">
                <span class="input-group-addon">Email</span>
                <input type="text" name="adminEmail" class="form-control" value="<?php echo $adminData->email; ?>">
            </div>
        </div>
        <div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
            <button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
        </div>
    </div>
</div>

我有多个这样的面板，每个面板都有一个带有特定ID的按钮。我的目标是收集面板上所有已按下按钮的输入。尽管这听起来很简单，但我的主要目标是在具有多个面板的多个页面上重复使用相同的功能（因为结构是相似的），然后使用ajax更新信息。我唯一需要提供的功能是按钮的ID，以便它可以自动找到相对输入。 我正在尝试在香草js中完成此操作，尽管我对jquery没问题。

我的实际js代码：

document.getElementById('savePersInfo').onclick = function(){
var inputArray = ['adminName', 'adminEmail'];
console.log(collectInfo(inputArray));
};

function collectInfo(inputArray){
    $inputValueArray = []
    for(var c = 0; c < inputArray.length; c++){
        $inputValueArray[c] = document.querySelectorAll('[name="' + inputArray[c] + '"]')[0].value;
    }
    return $inputValueArray;
}

正如您在此处看到的，我需要指定输入的名称才能检索它，我想要的是不这样做，而是单击JS根据面板自动找到它。

有关如何实现此目标的任何建议/想法？

ps：在开发的早期阶段，请忽略内联样式和其他布局内容。

2 个答案:

答案 0 :(得分：1)

您可以使用Javasscript的closest()或jQuery的closest()，并使用最接近的元素作为button和input的祖先，例如panel-body。

然后您就可以从那里简单地将该元素用作起点，例如使用JavaScript element.querySelectorAll），然后选择所有inputs并获取其值。

请注意，如果要使用javascript版本并支持IE（closest()不知道），则可以使用我最后添加的“ polyfill”。

已更新是基于评论的，我在我的“ javascript”代码示例中添加了checkbox和select，以表明它们也适用于它们如何获取按钮ID。

堆栈代码段-javascript 

document.querySelectorAll('button').forEach( function(btn) {
  btn.addEventListener('click', findInputs);
})

function findInputs() {  

  console.clear();
  
  var button_id = this.id;
  
  this.closest('.panel-body').querySelectorAll('input, select').forEach( function(inp) {
    var test_checked = ((inp.type == 'checkbox' && inp.checked) ? ' checked' : '');
    console.log(button_id, inp.value + test_checked)
  })
}
<div class="panel panel-primary">
   <div class="panel-heading">
        Informação Pessoal
   </div>
   <div class="panel-body">
     <div class="row">
        <div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
            <div class="input-group">
                <span class="input-group-addon">Nome</span>
                <input type="text" name="adminName" class="form-control" value="name 1">
            </div>
        </div>
        <div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
            <div class="input-group">
                <span class="input-group-addon">Email</span>
                <input type="text" name="adminEmail" class="form-control" value="email 1">
            </div>
        </div>
        <div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
            <div class="input-group">
                <span class="input-group-addon">Test</span>
                <input type="checkbox" name="adminTest" class="form-control" value="test 1">
            </div>
        </div>
        <div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
            <div class="input-group">
                <span class="input-group-addon">Test 2</span>
                <select name="adminTest2" class="form-control">
                  <option value="Test2-a">Test2-a</option>
                  <option selected value="Test2-b">Test2-b</option>
                  <option value="Test2-c">Test2-c</option>
                </select>
            </div>
        </div>
        <div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
            <button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
        </div>
    </div>
</div>

堆栈片段-jQuery 

$('button').each( function() {
  $(this).click(findInputs);
})


function findInputs() {
  $(this).closest('.panel-body').find('input').each( function() {
    console.log( $(this).val() );
  })
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="panel panel-primary">
   <div class="panel-heading">
        Informação Pessoal
   </div>
   <div class="panel-body">
     <div class="row">
        <div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
            <div class="input-group">
                <span class="input-group-addon">Nome</span>
                <input type="text" name="adminName" class="form-control" value="name 1">
            </div>
        </div>
        <div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
            <div class="input-group">
                <span class="input-group-addon">Email</span>
                <input type="text" name="adminEmail" class="form-control" value="email 1">
            </div>
        </div>
        <div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
            <button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
        </div>
    </div>
</div>

<hr>

<div class="panel panel-primary">
   <div class="panel-heading">
        Informação Pessoal 2
   </div>
   <div class="panel-body">
     <div class="row">
        <div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
            <div class="input-group">
                <span class="input-group-addon">Nome</span>
                <input type="text" name="adminName" class="form-control" value="name 2">
            </div>
        </div>
        <div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
            <div class="input-group">
                <span class="input-group-addon">Email</span>
                <input type="text" name="adminEmail" class="form-control" value="email 2">
            </div>
        </div>
        <div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
            <button type="button" class="btn btn-success pull-right" id="savePersInfo2">Guardar Alteração 2</button>
        </div>
    </div>
</div>

添加对IE9 +的JavaScript closest()支持

if (!Element.prototype.matches)
    Element.prototype.matches = Element.prototype.msMatchesSelector || 
                                Element.prototype.webkitMatchesSelector;

if (!Element.prototype.closest)
    Element.prototype.closest = function(s) {
        var el = this;
        if (!document.documentElement.contains(el)) return null;
        do {
            if (el.matches(s)) return el;
            el = el.parentElement || el.parentNode;
        } while (el !== null && el.nodeType === 1); 
        return null;
    };

Src：https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

答案 1 :(得分：1)

您可以在元素上使用Element.closest()，并将其传递给id来定位要查找的面板。然后使用Array.prototype.map()从选定面板返回所有输入的值。

尝试以下方式：

document.getElementById('savePersInfo').onclick = function(){
  console.log(collectInfo(this.id));
};

function collectInfo(id){
  var panel = document.getElementById(id).closest(".panel.panel-primary")
  var $inputValueArray = [...panel.querySelectorAll('input[type=text]')].map(i => i.value);
  return $inputValueArray;
}
<div class="panel panel-primary">
   <div class="panel-heading">
        Informação Pessoal
   </div>
   <div class="panel-body">
     <div class="row">
        <div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
            <div class="input-group">
                <span class="input-group-addon">Nome</span>
                <input type="text" name="adminName" class="form-control" value="John Michale Kane">
            </div>
        </div>
        <div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
            <div class="input-group">
                <span class="input-group-addon">Email</span>
                <input type="text" name="adminEmail" class="form-control" value="john@gmail.com">
            </div>
        </div>
        <div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
            <button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
        </div>
    </div>
</div>

相关问题
最新问题