javascript - HTML/Javascript 表单显示的值不正确

Question

非常简单的问题。

我正在尝试在用户点击“添加”按钮时创建新的列表项条目。

当用户单击“添加”按钮时，我的表单中显示的值不正确。当前显示的是“打开”。

我希望列表项显示“age”、“rel”和“smoker”的值。此外，我需要在用户单击“删除链接”时删除列表项值。

我们很乐意提供任何帮助。

旁注:我无法编辑任何 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 附加到 HTML 中的 ol。

此外，要在单击 Remove Field 链接时删除 li，请将以下内容添加到您的 javascript。

$(document).ready(function() {

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

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

});

编辑 1:

JavaScript 解决方案:

问题出在您的 createinput() 上，它覆盖了 age 的值，并且与 smoker 相关。更正如下:

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++
}