按类名获取输入字段的值，其中类名是可变的

Question

我有许多对文本字段和提交按钮，提交按钮的id和文本字段的class相同，但每对都不同。所以我想把按钮点击后在文本字段中输入的值传递给ajax函数。

null

function update_rate(id) {
  // var price = document.getElementsByClassName(id)[0].innerHTML;

  var price = document.getElementsByClassName(id);
  console.log(price);
  $.ajax({
    type: "POST",
    url: "update_rate.php", // Name of the php files
    data: {
      subcategory: id,
      price: price
    },
    success: function(res) {
      // console.log(html);
      alert(res);
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
first pair:
<div class="form-group">
  <input type="text" class="form-control" name="a" placeholder="Your task rate excl. taxes">
</div>
<button type="submit" id="a" onclick="update_rate(this.id)" class="btn btn-primary">Update</button>

<div class="form-group">
  <input type="text" class="form-control" name="b" placeholder="Your task rate excl. taxes">
</div>
<button type="submit" id="b" onclick="update_rate(this.id)" class="btn btn-primary">Update</button>

null

但是我无法将文本字段的值转换为变量。

Answer 1

几件事

var price=document.GetElementsByClassName(id)；是复数，您需要该值，因此

var price=Document.GetElementsByClassName(id)[0].value；如果必须

但它不是一个类。这是一个名字

var price=document.GetElementsName(id)[0].value；如果必须

但是如果您有jQuery，为什么不使用它呢？

这里，我取按钮ID并按名称查找输入

我还更改为type=“button”-当您使用Ajax时，您不希望提交

null

$(function() { // on page load
  $("[type=button]").on("click", function() { // click on type="button" you can use a Class here too
    const id = $(this).attr("id");
    const price = $("[name="+id+"]").val(); // get the input by name
    console.log(id, price)
    if (price) {

      $.ajax({
        type: "POST",
        url: "update_rate.php", // Name of the php files
        data: {
          subcategory: id,
          price: price
        },
        success: function(res) {
          // console.log(html);
          alert(res);
        }
      });
    }
  })

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


first pair:
<div class="form-group">
  <input type="text" class="form-control" name="a" placeholder="Your task rate excl. taxes">
</div>
<button type="button" id="a" class="btn btn-primary">Update</button>

<div class="form-group">
  <input type="text" class="form-control" name="b" placeholder="Your task rate excl. taxes">
</div>
<button type="button" id="b" class="btn btn-primary">Update</button>

Answer 2

由于您已经在函数中传递了id，因此可以使用jQuery执行如下操作:

var selector = 'input[name="' + id + '"]' // Compose the selector string for jQuery
var value = $(selector).val()             // Get input value

Answer 3

这可以而且应该以一种不同的，更简单的方式来完成。通过id和class将按钮与其文本字段连接起来不是一个可伸缩的解决方案，需要不断更新代码以保持所有命名的同步。只需获取按钮之前的文本字段的值。如果您修改HTML结构，使文本字段和按钮一起位于相同的div中，这将更容易。

• 不要使用内联事件处理程序，而是将事件处理代码分离到JavaScript中。
• 在较高的DOM元素上只设置一个事件处理程序，并在它冒泡到该元素时处理它。这称为事件委派。
• 使用data-*属性在元素中存储自定义数据。
• 另外，在2020年不要使用.getElementsByClassName()。相反，使用.querySelector.

见下文评论。

null

// Do your event handling in JavaScript, not with inline HTML event handling attributes
// Also, set up just one handler at a parent level of the items that might trigger
// the event (event delegation).
document.querySelector(".wrapper").addEventListener("click", update_rate);

function update_rate(event){
  // See if it was a submit button that got clicked
  if(event.target.classList.contains("btn")){
    // A submit button was pressed.
    // Locate the nearest ancestor element that has the form-group class
    // and then, from there, find the first input (which is the one you want).
    var input = event.target.closest(".form-group").querySelector("input");
    console.log(input.value);
    $.ajax({
      type: "POST",
      url: "update_rate.php", // Name of the php files
      // Use the dataset API to extract the custom attribute on the input
      data: {subcategory : input.dataset.category , price: input.value},
      success: function(res){
        alert(res);
      }
    });
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="form-group">
    <input type="text" class="form-control" data-category="a" placeholder="Your task rate excl. taxes">
    <button type="submit" class="btn btn-primary">Update</button>
  </div>

  <div class="form-group">
    <input type="text" class="form-control"  data-category="b" placeholder="Your task rate excl. taxes">
    <button type="submit" class="btn btn-primary">Update</button>
  </div>
</div>