Question

HTML code

<form novalidate>
  <div class="list">
    <div class="list list-inset">
      <label class="item item-input" id="descriptions">
        <input type="text" height: "90" class="description" placeholder="Description ..." ng-model="describe">
      </label>
      <label input="email" class="item item-input" id="email" ng-model="email">
        <span class="input-label">Email</span>
        <input type="email">
      </label>
      <label class="item item-input" ng-model="date">
        <span class="input-label">Date</span>
        <input type="date">
      </label>
    </div>
    <button class="button button-block button-balanced" ng-click="insertData(describe,email, date); AddItem()">Add Task</button>

    <button class="button button-block button-assertive" ng-click="closeModal()">cancel</button>
  </div>
</form>

我希望有一个函数可以获取这些输入文本字段的值，并在单击添加任务按钮时将它们传递到<div>。

Answer 1

因此，您需要为复制数据的按钮设置单击事件处理程序。请参阅下面的评论：

＆＃13;

// Get references to DOM elements needed to solve problem:
var addTask = document.querySelector(".button-balanced");
var description = document.querySelector(".description");
var email = document.querySelector("[type=email]");
var date = document.querySelector("[type=date]");

// Set up click event handling function for button
addTask.addEventListener("click", function(){
  
  // Create an new "row" for data
  var div = document.createElement("div");
  
  // populate the "row" with the values from the text fields
  div.textContent = description.value + ", " + date.value + ", " + email.value;
  
  // Add the row to the document
  document.body.appendChild(div);
});

＆＃13;

<form novalidate>
  <div class="list">
    <div class="list list-inset">
      <label class="item item-input" id="descriptions">
        <input type="text" height: "90" class="description" placeholder="Description ..." ng-model="describe">
      </label>
      <label input="email" class="item item-input" id="email" ng-model="email">
        <span class="input-label">Email</span>
        <input type="email">
      </label>
      <label class="item item-input" ng-model="date">
        <span class="input-label">Date</span>
        <input type="date">
      </label>
    </div>
    <button class="button button-block button-balanced" ng-click="insertData(describe,email, date); AddItem()">Add Task</button>

    <button class="button button-block button-assertive" ng-click="closeModal()">cancel</button>
  </div>
</form>

＆＃13;

Answer 2

我认为您的问题是ID的重复：

<label id="email">
  <input id="email">
</label>

这是无效代码，因为ID必须在同一文档中是唯一的。如果您访问<input>的内容，如果您使用该ID来访问该元素，则您将获得未定义的内容，因为标签已经使用该ID。

标签使用for属性关联：

<label for="email">
  <input id="email">
</label>

这可能会解决它。

如果没有，您可以使用纯JavaScript和DOM：

<label for="email">Email: <input id="email"></label>
<label for="date">Date: <input id="date" type="date"></label>
<button id="add">Add</button>
<script>
  document.getElementById("add").addEventListener('click', function() {
    var div = document.createElement('div');
    div.textContent = document.getElementById('email').value + ' on the ' + document.getElementById('date').value;
    document.body.appendChild(div);
  });
</script>

从输入文本区域获取值并将它们放在<div>中

HTML code

2 个答案: