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エントリを作成することを前提としています。 （jQueryのを使用して）次のように機能createinput()を修正することができる。

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); 
} 

これはHTMLでolの形態の詳細をli Sを追加します。

また、Remove Fieldリンクをクリックしてliを削除するには、次をJavaScriptに追加してください。

$(document).ready(function() { 

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

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

}); 

編集1：

JavaScriptのソリューション：

問題は喫煙とあなたの年齢の値を上書きしたcreateinput()、とrelとありました。次のように修正してください：

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