HTML / JavaScript表单显示的值不正确

Question

非常直接的问题。

当用户点击“添加”按钮时，我试图创建新的列表项。

当用户单击“添加”按钮时，从我的表单显示的值不正确。当前显示的内容为“开”。

我希望列表项显示“年龄”，“相对”和“吸烟者”的值。 另外，我需要在用户单击“删除链接”时删除列表项值。

任何帮助都将不胜感激。

旁注：我无法编辑任何HTML。 没有JQuery。 为此仅JS。

谢谢！

的HTML

 <ol class="household"></ol>
    <form>
        <div>
            <label>Age
                <input type="text" name="age">
            </label>
        </div>
        <div>
            <label>Relationship
                <select name="rel">
                    <option value="">---</option>
                    <option value="self">Self</option>
                    <option value="spouse">Spouse</option>
                    <option value="child">Child</option>
                    <option value="parent">Parent</option>
                    <option value="grandparent">Grandparent</option>
                    <option value="other">Other</option>
                </select>
            </label>
        </div>
        <div>
            <label>Smoker?
                <input type="checkbox" name="smoker">
            </label>
        </div>
        <div>
            <button class="add">add</button>
        </div>
        <div>
            <button type="submit">submit</button>
        </div>
    </form>

JS

function validate(form) {
  fail = validateAge(form.age.value)
  fail += validateRel(form.rel.value)
  if (fail == "") return true
  else {
    alert(fail);
    return false
  }
}

function validateAge(field) {
  if (isNaN(field)) return "No age was entered. \n"
  else if (field < 1 || field > 200)
    return "Age must be greater than 0. \n"
  return ""
}

function validateRel(field) {
  if (field == "") return "Please select a relationship \n"
  return ""
}
document.querySelector("form").onsubmit = function() {
  return validate(this)
}
document.querySelector(".add").onclick = function(event) {
  event.preventDefault();
  createinput()
};
count = 0;

function createinput() {
  field_area = document.querySelector('.household')
  var li = document.createElement("li");
  var p = document.createElement("P");
  var x = document.getElementsByName("age")[0].value;
  document.querySelector(".household").innerHTML = x;
  var y = document.getElementsByName("rel")[0].value;
  document.querySelector(".household").innerHTML = y;
  var z = document.getElementsByName("smoker")[0].value;
  document.querySelector(".household").innerHTML = z;
  //var x = document.getElementsByName("age")()[0].value;
  //document.querySelector('.household').innerHTML = x;
  //var list = document.querySelector(".household")()[0].value;
  //list.getElementsByName("age")[0].innerHTML = "Milk";
  /*input.id = 'field' + count;
  input.name = 'field' + count;
  input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.*/
  li.appendChild(p);
  field_area.appendChild(li);
  //removal link
  var removalLink = document.createElement('a');
  removalLink.onclick = function() {
    this.parentNode.parentNode.removeChild(this.parentNode)
  }
  var removalText = document.createTextNode('Remove Field');
  removalLink.appendChild(removalText);
  li.appendChild(removalLink);
  count++
}

Answer 1

您的问题不太清楚，但是我认为您想在单击add按钮时创建新的li条目。 函数createinput()可以如下修改（使用jQuery）：

function createinput() {
  var age = $("[name=age]").val(),
      rel = $("[name=rel]").val(),
      smoker = $("[name=smoker]").prop("checked"),
      count = $(".household li").length;

  var elemt = "<li>" +
                "<p>Age: "+ age +"</p>" + 
                "<p>Relationship: "+ rel +"</p>" + 
                "<p>Smoker: "+ smoker +"</p>" + 
                "<p><a class='remove' href>Remove Field</a></p>" +
              "</li>";

  $(".household").append(elemt);
}

这将追加li s的形式到细节ol的HTML。

此外，除去li上的点击Remove Field链接，请添加以下到您的JavaScript。

$(document).ready(function() {

  $(".household").on("li a.remove", "click" function(e) {
    e.preventDefault();

    $(this).parent("li").remove();
  });

});

编辑1 ：

JavaScript解决方案：

问题出在您的createinput() ，它覆盖了age的值，并且与烟民有关。 更正如下：

function createinput() {
  field_area = document.querySelector('.household')
  var li = document.createElement("li");
  var p1 = document.createElement("p");
  var p2 = document.createElement("p");
  var p3 = document.createElement("p");
  var x = document.getElementsByName("age")[0].value;
  var y = document.getElementsByName("rel")[0].value;
  var z = document.getElementsByName("smoker")[0].value;
  p1.innerHTML = x;
  p2.innerHTML = y;
  p3.innerHTML = z;
  li.appendChild(p1);
  li.appendChild(p2);
  li.appendChild(p3);
  field_area.appendChild(li);
  //removal link
  var removalLink = document.createElement('a');
  removalLink.onclick = function() {
    this.parentNode.parentNode.removeChild(this.parentNode)
  }
  var removalText = document.createTextNode('Remove Field');
  removalLink.appendChild(removalText);
  li.appendChild(removalLink);
  count++
}