实现innerHTML以使用表单显示输出

Question

我计划通过 innerHTML 显示我的输出，但 javascript 似乎无法像我想要的那样显示我的输入。当用户在表单中输入输入时，我想使用 innerHTML 显示输入。

我的尝试输出只是在一个类似这样的普通列表中：

致学生

1. 输出 1
2. 输出 2
3. 输出 3

致组织者

1. k1
2. k2
3. k5

<html>
<head>
    <title>part b</title>
    <style>
        table, th, td {
           border: 1px solid black;
        }
    </style>
</head>
<body>
    <form onsubmit="printChecked()">
        <table>
        <tr>
            <th colspan="2">
                activities
            </th>
        </tr>   
        <tr>
            <td colspan="2">
                list 3 kind of activities that you interest
            </td>
        </tr>
         <tr>
             <td>
                 1. to students                    
             </td>   
             <td> 
             <textarea name = "pelajar1" rows = "4" cols = "110"></textarea>
             <textarea name = "pelajar2" rows = "4" cols = "110"></textarea>
             <textarea name = "pelajar3" rows = "4" cols = "110"></textarea>             
             </td>
         </tr>
         <tr>
            <td>
                TO ORGANIZER
            </td>
            <td>
                <input type="checkbox"  name="kl" value="communication">K1
                <br>
                <input type="checkbox"  name="kl" value="problems">K2
                <br>
                <input type="checkbox"  name="kl" value="teamwork">K3
                <br>
                <input type="checkbox"  name="kl" value="info">K4
                <br>
                <input type="checkbox"  name="kl" value="business">K5
                <br>
                <input type="checkbox"  name="kl" value="ethics">K6
                <br>
                <input type="checkbox"  name="kl" value="leadership">K7
                <br>
            </td>
        </tr>
        </table>
        <br><br>
    <input type="Submit" value="Submit">
    </form>
    <script>
            function printChecked()
            {
                var pel1 = document.getElementsByName('pelajar1');
                var pel2 = document.getElementsByName('pelajar2');
                var pel3 = document.getElementsByName('pelajar3');
                
                            
                var items=document.getElementsByName('kl');
                var selectedItems="";
                
                for(var i=0; i<items.length; i++){
                    if(items[i].type=='checkbox' && items[i].checked==true)
                        selectedItems+=items[i].value+"\n";
                        
                }
                
            document.getElementsByName("pelajar1").innerHTML = pel1;
            document.getElementsByName("pelajar2").innerHTML = pel2;
            document.getElementsByName("pelajar3").innerHTML = pel3;
            document.getElementsByName("kl").innerHTML = items;

                
            }
    </script>
</body>
</html>

Answer 1

试试这个看看控制台

<html>
    <head>
        <title>part b</title>
        <style>
            table,
            th,
            td {
                border: 1px solid black;
            }
        </style>
    </head>

    <body>
        <form>
            <table>
                <tr>
                    <th colspan="2">activities</th>
                </tr>
                <tr>
                    <html>
                        <head>
                            <title>part b</title>
                            <style>
                                table,
                                th,
                                td {
                                    border: 1px solid black;
                                }
                            </style>
                        </head>
                        <body>
                            <form onsubmit="printChecked">
                                <table>
                                    <tr>
                                        <th colspan="2">activities</th>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            list 3 kind of activities that you
                                            interest
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>1. to students</td>
                                        <td>
                                            <textarea
                                                id="pelajar1"
                                                rows="4"
                                                cols="110"
                                            ></textarea>
                                            <textarea
                                                id="pelajar2"
                                                rows="4"
                                                cols="110"
                                            ></textarea>
                                            <textarea
                                                id="pelajar3"
                                                rows="4"
                                                cols="110"
                                            ></textarea>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>TO ORGANIZER</td>
                                        <td>
                                            <br />
                                            <input
                                                type="checkbox"
                                                id="k1"
                                                value="communication"
                                            />K1
                                            <input
                                                type="checkbox"
                                                id="k2"
                                                value="problems"
                                            />K2
                                            <br />
                                            <input
                                                type="checkbox"
                                                id="k3"
                                                value="teamwork"
                                            />K3
                                            <br />
                                            <input
                                                type="checkbox"
                                                id="k4"
                                                value="info"
                                            />K4
                                            <br />
                                            <input
                                                type="checkbox"
                                                id="k5"
                                                value="business"
                                            />K5
                                            <br />
                                            <input
                                                type="checkbox"
                                                id="k6"
                                                value="ethics"
                                            />K6
                                            <br />
                                            <input
                                                type="checkbox"
                                                id="k7"
                                                value="leadership"
                                            />K7
                                            <br />
                                        </td>
                                    </tr>
                                </table>
                                <br /><br />
                                <input
                                    type="button"
                                    onclick="printChecked()"
                                    value="Submit"
                                />
                            </form>
                            <div id="form"></div>
                            <script>
                                function printChecked() {
                                    var pel1 =
                                        document.getElementById("pelajar1");
                                    var pel2 =
                                        document.getElementById("pelajar2");
                                    var pel3 =
                                        document.getElementById("pelajar3");

                                    var items = [];

                                    for (let i = 0; i < 7; i++) {
                                        var a = document.getElementById(
                                            "k" + (i + 1),
                                        );
                                        a.checked ? items.push(a.value) : null;
                                    }

                                    console.log(
                                        "1 : " +
                                            pel1.value +
                                            "\n2 :" +
                                            pel2.value +
                                            "\n3 :" +
                                            pel3.value,
                                    );
                                    items.forEach((element) => {
                                        console.log(element);
                                    });
                                }
                            </script>
                        </body>
                    </html>
                </tr>
            </table>
        </form>
    </body>
</html>

Answer 2

好的，我不太清楚你想在这里实现什么，我相信你希望表单提交不提交并在函数中获取详细信息以进行某种计算，我将其用作 javascript 方法用于防止默认表单提交

使用返回 false 的返回函数，表示不提交表单，如下例所示

如果这满足您的查询，请参考=>

 function printChecked() {
            var pel1 = document.getElementsByName('pelajar1');
            var pel2 = document.getElementsByName('pelajar2');
            var pel3 = document.getElementsByName('pelajar3');


            var items = document.getElementsByName('kl');
            var selectedItems = "";

            for (var i = 0; i < items.length; i++) {
                if (items[i].type == 'checkbox' && items[i].checked == true)
                    selectedItems += items[i].value + "\n";

            }
            console.log("pel1-data=> "+pel1[0].value);
            console.log("pel2-data=> "+pel2[0].value);
            console.log("pel3-data=> "+pel3[0].value);
            console.log("checkbox-data=> "+selectedItems);
            return false;
        }

 table,
        th,
        td {
            border: 1px solid black;
        }

    <form onsubmit="return printChecked()">
        <table>
            <tr>
                <th colspan="2">
                    activities
                </th>
            </tr>
            <tr>
                <td colspan="2">
                    list 3 kind of activities that you interest
                </td>
            </tr>
            <tr>
                <td>
                    1. to students
                </td>
                <td>
                    <textarea name="pelajar1" rows="4" cols="110"></textarea>
                    <textarea name="pelajar2" rows="4" cols="110"></textarea>
                    <textarea name="pelajar3" rows="4" cols="110"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    TO ORGANIZER
                </td>
                <td>
                    <input type="checkbox" name="kl" value="communication">K1
                    <br>
                    <input type="checkbox" name="kl" value="problems">K2
                    <br>
                    <input type="checkbox" name="kl" value="teamwork">K3
                    <br>
                    <input type="checkbox" name="kl" value="info">K4
                    <br>
                    <input type="checkbox" name="kl" value="business">K5
                    <br>
                    <input type="checkbox" name="kl" value="ethics">K6
                    <br>
                    <input type="checkbox" name="kl" value="leadership">K7
                    <br>
                </td>
            </tr>
        </table>
        <br><br>
        <input type="Submit" value="Submit">
    </form>

您可以看到从函数 printChecked() 获取值的表单的 onsubmit 的返回 -> 查看函数中的最后一个返回语句

附加

对于被调用函数定义中的 jquery，我们可以添加接收到的事件的 preventDefault 函数

$("form").submit(function(event){ 
   event.preventDefault(); 
});

Edit->使用innerHtml在同一页面上打印数据

function printChecked() {
            var pel1 = document.getElementsByName('pelajar1');
            var pel2 = document.getElementsByName('pelajar2');
            var pel3 = document.getElementsByName('pelajar3');


            var items = document.getElementsByName('kl');
            var selectedItems = "";

            for (var i = 0; i < items.length; i++) {
                if (items[i].type == 'checkbox' && items[i].checked == true)
                    //selectedItems += items[i].value + "\n";
                    //add values as li elements                     
                    selectedItems += '<li>'+ items[i].value + '</li>';
            }
            
            //show list on submit
            document.getElementById("toStudents").style.display = "block";
            document.getElementById("toOrganizer").style.display = "block";
            
            //add tostudents text area values in to list
            document.getElementById("pelajar1").innerHTML=pel1[0].value;
            document.getElementById("pelajar2").innerHTML=pel2[0].value;
            document.getElementById("pelajar3").innerHTML=pel3[0].value;
            
            //add toorganizer checkbox values in to list
            document.getElementById("toOrganizer").innerHTML=selectedItems;
            
            //just printing values in console
            //console.log("pel1-data=> "+pel1[0].value);
            //console.log("pel2-data=> "+pel2[0].value);
            //console.log("pel3-data=> "+pel3[0].value);
            //console.log("checkbox-data=> "+selectedItems);
            return false;
        }

table,
        th,
        td {
            border: 1px solid black;
        }
       
 /*list is hidden at first*/      
 #toStudents,#toOrganizer{
     display:none;
     list-style:none;
 }

<form onsubmit="return printChecked()">
        <table>
            <tr>
                <th colspan="2">
                    activities
                </th>
            </tr>
            <tr>
                <td colspan="2">
                    list 3 kind of activities that you interest
                </td>
            </tr>
            <tr>
                <td>
                    1. to students
                </td>
                <td>
                    <textarea name="pelajar1" rows="4" cols="110"></textarea>
                    <textarea name="pelajar2" rows="4" cols="110"></textarea>
                    <textarea name="pelajar3" rows="4" cols="110"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    TO ORGANIZER
                </td>
                <td>
                    <input type="checkbox" name="kl" value="communication">K1
                    <br>
                    <input type="checkbox" name="kl" value="problems">K2
                    <br>
                    <input type="checkbox" name="kl" value="teamwork">K3
                    <br>
                    <input type="checkbox" name="kl" value="info">K4
                    <br>
                    <input type="checkbox" name="kl" value="business">K5
                    <br>
                    <input type="checkbox" name="kl" value="ethics">K6
                    <br>
                    <input type="checkbox" name="kl" value="leadership">K7
                    <br>
                </td>
            </tr>
        </table>
        <br><br>
        <input type="Submit" value="Submit">
       
        <h2>To Students</h2>
        <ul id="toStudents">
           <li id="pelajar1"></li>
           <li id="pelajar2"></li>
           <li id="pelajar3"></li>
        </ul>
         <h2>To Organizer</h2>
        <ul id="toOrganizer">
           
        </ul>
        
    </form>

Answer 3

您似乎遇到的问题是在调用 JS 函数之前在表单提交上重新加载页面。根据您的代码，您在单击按钮时调用 printChecked() onsubmit。 要解决您的问题，请查看 Stop form refreshing page on submit，其中包括将 return false 添加到您的 onsubmit 调用中。同一页面中的其他解决方案提到不使用按钮 type="submit"，而是专注于使用 type="button" 并从那里单独调用 onclick。 希望这会有所帮助！