Question

相当直接的问题。

当用户点击＆＃34;添加＆＃34;时，我尝试创建新的列表项条目按钮。

当用户点击＆＃34;添加＆＃34;按钮，从我的表单显示的值是不正确的。当前显示的是＆＃34; on＆＃34;。

我希望列表项显示＆＃34; age＆＃34;，＆＃34; rel＆＃34;和＃34;吸烟者＆＃34;。此外，当用户点击＆＃34;删除链接＆＃34;时，我需要删除列表项值。

任何帮助都很高兴。

备注：我无法编辑任何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

您的问题不太明确，但我认为您想要点击li按钮创建新的add条目。函数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。

另外，要点击li链接时移除Remove Field，请将以下内容添加到您的JavaScript中。

$(document).ready(function() {

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

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

});

修改1 ：

JavaScript解决方案：

问题在于你的createinput()，它覆盖了年龄的值，而且与吸烟者相关。纠正如下：

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

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

1 个答案: