HTML頁面內的輸出表格

Question

我想在HTML表單下方的同一頁面中打印提交的輸入元素。選中的複選框元素應全部打印。圖像元素可以避免。

該功能似乎沒有工作。

function validateForm(myForm) { 
 
    var a = document.getElementById("fname").value; 
 
    document.getElementById("display").innerHTML = y; 
 
    var b = document.getElementByName("passwords").value; 
 
    document.getElementById("display1").innerHTML = y; 
 
    var c = document.getElementByName("gender"); 
 
    var i; 
 
    for (i = 0; i < c.length; ++i) { 
 
    if (c[i].checked) 
 
     document.getElementById("display1").innerHTML = c[i].value; //looping through radio buttons 
 

 
    } 
 
    var d = document.getElementByName("hobbies"); 
 
    for (i = 0; i < d.length; ++i) { 
 
    if (d[i] checked) 
 
     ans = ans + d[i].value; //looping through checkboxes and adding to display in display 2 id. 
 

 
    } 
 
    document.getElementById("display2").innerHTML = ans; 
 
    var e = document.getElementByName("cities").value; 
 
    document.getElementById("display3").innerHTML = e; 
 

 
}

<form name="myForm"> 
 
    <fieldset> 
 
    <legend>Personal Details</legend> 
 
    Name: 
 
    <input type="text" id="fname" <br>Password: 
 
    <input type="password" name="password" id="passwords" /> 
 
    <br>Gender: 
 
    <input type="radio" name="gender" />Male 
 
    <input type="radio" name="gender" />Female</input> 
 
    <br>Hobbies: 
 
    <input type="radio" name="hobbies" value="Reading" />Reading 
 
    <input type="radio" name="hobbies" value="Writing" />Writing</input> 
 
    <br>City: 
 
    <select name="cities" /> 
 
    <option>Surat</option> 
 
    <option>Ahmedabad</option> 
 
    <option>Rajkot</option> 
 
    <option>Vadodra</option> 
 
    </select> 
 
    <br>Image: 
 
    <input type="file" accept="image/*" value="image" style="margin:0px 10px 10px 100px; margin:absolute;" /> 
 
</form> 
 
<br> 
 
<input type="Submit" value="Submit" onSubmit="validateform(myForm);"> 
 

 
</fieldset> 
 

 
<p id="display"></p>//display the values submitted within the html page 
 
<p id="display1"></p> 
 
<p id="display2"></p> 
 
<p id="display3"></p>

Answer 1

1. getElementsByName - 複數和訪問第一時，用[0]等 document.getElementsByName("cities")[0].value
2. 缺少d[i].checked
3. 移動的點的onSubmit="validateform(myForm);"到窗體標籤和做onSubmit="return validateForm(this);"並添加返回false;
4. validateForm在事件處理程序（小寫F）拼錯
5. ý缺少
6. ANS未定義

function validateForm(myForm) { 
 
    var a = document.getElementById("fname").value; 
 
    document.getElementById("display").innerHTML = a; 
 
    var b = document.getElementsByName("passwords").value; 
 
    document.getElementById("display1").innerHTML = a; 
 
    var c = document.getElementsByName("gender"); 
 
    var i, ans; 
 
    for (i = 0; i < c.length; ++i) { 
 
    if (c[i].checked) 
 
     document.getElementById("display1").innerHTML = c[i].value; //looping through radio buttons 
 

 
    } 
 
    var d = document.getElementsByName("hobbies"); 
 
    for (i = 0; i < d.length; ++i) { 
 
    if (d[i].checked) 
 
     ans = ans + d[i].value; //looping through checkboxes and adding to display in display 2 id. 
 

 
    } 
 
    document.getElementById("display2").innerHTML = ans; 
 
    var e = document.getElementsByName("cities")[0].value; 
 
    document.getElementById("display3").innerHTML = e; 
 
    return false; // normally when error but here to stay on page 
 

 
}

<form name="myForm" onSubmit="return validateForm(this);"> 
 
    <fieldset> 
 
    <legend>Personal Details</legend> 
 
    Name: 
 
    <input type="text" id="fname" <br>Password: 
 
    <input type="password" name="password" id="passwords" /> 
 
    <br>Gender: 
 
    <input type="radio" name="gender" />Male 
 
    <input type="radio" name="gender" />Female</input> 
 
    <br>Hobbies: 
 
    <input type="radio" name="hobbies" value="Reading" />Reading 
 
    <input type="radio" name="hobbies" value="Writing" />Writing</input> 
 
    <br>City: 
 
    <select name="cities" /> 
 
    <option>Surat</option> 
 
    <option>Ahmedabad</option> 
 
    <option>Rajkot</option> 
 
    <option>Vadodra</option> 
 
    </select> 
 
    <br>Image: 
 
    <input type="file" accept="image/*" value="image" style="margin:0px 10px 10px 100px; margin:absolute;" /> 
 
</form> 
 
<br> 
 
<input type="Submit" value="Submit"> 
 

 
</fieldset> 
 

 
<p id="display"></p><!-- display the values submitted within the html page --> 
 
<p id="display1"></p> 
 
<p id="display2"></p> 
 
<p id="display3"></p>