Question

我有一个ajax搜索，返回如下值：

<a id="searchmykad" href="#" onclick="updatemykad(123123);return false;">Person a</a>
<a id="searchmykad" href="#" onclick="updatemykad(1231236);return false;">Person b</a>

javascript函数如下所示：

  <script>
  function updatemykad(mykad) {
    $('#searchmykad').click(function(){
    $('#asd').val(mykad);
                              } 
  )}
  </script>

更新此文本框：

<input type="text" id="asd" name="asd" value="" class="form-control" autocomplete="off" placeholder="Search Name..." class="input-block-level" placeholder="Search Mykad..." maxlength="12" style="width:100%; " />

现在，为了所有广泛的目的，这是有效的。我可以选择第一个结果，值将进入文本框，但是导致所有id都相同。我只能用一个。（至少这就是我的想法）。

任何人都可以帮我解决这个问题，所以所有的值都会在点击时进入文本框。

祝你好运 Johan Fourie

Answer 1

您不应在元素中使用重复的ID。

在Javascript中试试这个：

  <script>
  function updatemykad(mykad) {
    $('#asd').val(mykad);
  )}
  </script>

Answer 2

正如其他人所说，不应重复使用HTML ID，而应使用class。恕我直言，如果你把它们分开，你可以改进整体的HTML和JS代码。有很多方法可以解决这个问题，这样的事情会更容易维护（只是一个建议）：

＆＃13;

// Target all the buttons with class .searchmykad with a click event listener.
// Get the values and target input ID from the HTML data attributes.
$('.searchmykad').click(function() {
  $('#' + this.dataset.target).val(this.dataset.val);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="searchmykad" href="#" data-val="123123" data-target="asd">Person a</a>
<a class="searchmykad" href="#" data-val="1231236" data-target="asd">Person b</a>
<input type="text" id="asd" name="asd" value="" class="form-control" autocomplete="off" placeholder="Search Name..." class="input-block-level" placeholder="Search Mykad..." maxlength="12" style="width:100%; " />

＆＃13;

JS更新了onclick事件的多个值

2 个答案: