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] d[i].checked
2. 움직임의 도트 누락 document.getElementsByName("cities")[0].value
3. 같은 폼 태그에 onSubmit="validateform(myForm);" 및 onSubmit="return validateForm(this);"을 수행하고 false를 반환합니다.
4. validateForm는
5. ANS 누락
6. Y 그것이 'getElementsByName`이어야한다

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>