Question

我在百里香叶中有一个“ foreach”，可以生成引导程序的卡片，为每张卡片我添加了一个文本区域和一个可以用来评论的按钮；之后，我使用AJAX帖子进行评论，但是我无法以单击的按钮的形式识别特定的textarea，因此我的js代码仅适用于第一个元素（因此第一个textarea）

！即使使用由id选择器插入的类选择器，我也会遇到相同的错误：（

$(document).ready(function() {

  // SUBMIT FORM
  $('.form-inline').submit(function(event) {
    // Prevent the form from submitting via the browser.
    event.preventDefault();
    ajaxPost();
  });

  function ajaxPost() {
    // PREPARE FORM DATA
    var formData = {
      description: $('.description-class').val(),
      id: $('.id-class').val()
    }

    // DO POST
    $.ajax({
      type: "POST",
      contentType: "application/json",
      url: "/api/customer/save/" + formData.id,
      data: JSON.stringify(formData),
      dataType: 'json',
      success: function(result) {
        if (result.status == "Done") {
          $("#postResultDiv").html("<p style='background-color:#888E90; color:white; padding:20px 20px 20px 20px'>" +
            "Il commento è stato aggiunto correttamente! <br>" +
            "Commento aggiunto = " +
            result.data.description + "<br>" + "Id: " + result.data.id + "</p>");
        } else {
          $("#postResultDiv").html("<strong>Error</strong>");
        }
        console.log(result);
      },
      error: function(e) {
        alert("Error!")
        console.log("ERROR: ", e);
      }
    });

    // Reset FormData after Posting
    resetData();

  }

  function resetData() {
    $("#description").val("");
  }
})

<table class="table table-bordered">
  <tr th:each="report : ${reports}">

    <form class="form-inline" id="customerForm" method="post">
      <div class="form-group">
        <textarea class="description-class" id="description" name="description" rows="3" cols="70">Write...</textarea>
      </div>
      <div class="form-group">
        <textarea class="id-class" id="id" name="id" rows="3" cols="70" th:text="${report.id}" style="display:none">id</textarea>
      </div>
      <div>
        <input type="submit" value="Comment" style="height: 25px;">
      </div>
    </form>
    </div>
    <div class="postResultDiv" id="postResultDiv">
    </div>

Answer 1

您不能使用ID，因为ID不能重复，因为ID必须是唯一的，您必须使用类，并且由于类包含多个项目，因此您应该使用document.getElementsByClassName('class_name')[textBoxNumber]

textBoxNumber可以是1,2,3任何您不想访问的文本框

并确保在此js代码之前包含了jcdn或local

如何引用特定形式的特定对象

1 个答案: