implementing innerHTML to display output by using form

Question

im planning to display my output thru innerHTML but the javascript cant seem to display my input just like i wanted. when user enter input into the form, i want to display the input by using innerHTML.

my attempt output is just in a normal list similar to something like this:

to students

output 1
output 2
output 3

to organizer

k1
k2
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>

Does this answer your question? [Stop form refreshing page on submit](https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit) — Heretic Monkey, Jun 08 '21 at 15:42

stannars jose · Answer 1 · 2021-06-09T08:57:04.267

Okay i am not so clear about what you want to achieve in here, i believe you want the form submit not to do submission and get the details in the function for some kind of computation , i use this as for a javascript approach for preventing default form submit

make use of a return function that returns false stating not to submit the form as in below example

if this satisfies your query, please refer=>

 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>

you can see return for onsubmit of form which gets value from the function printChecked() -> see last return statement in function

Additional

for jquery inside the called function definition we can just add the received event's preventDefault function

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

Edit-> prints data on the same page using 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>

what i want is actually for the user to input the data into the form, after that i want to display the data in the same page by using innerHTML — harraz syah, Jun 08 '21 at 16:07
I have added an edit section below to the above post please run the code and check if it's what you want, prints data on the same page — stannars jose, Jun 09 '21 at 08:57
thank you so much. youre a live saver. i tried it and it works like miracle — harraz syah, Jun 09 '21 at 15:59
if you find it useful please upvote and set right so that others can get it too — stannars jose, Jun 10 '21 at 05:22

Milan Patel · Accepted Answer · 2021-06-08T16:28:59.197

try this and see console

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

score 0 · Answer 3 · answered Jun 08 '21 at 15:35

the issue you seem to be experiencing is from the page reloading on the form submit BEFORE the JS function is called. Based on your code, you are calling printChecked() onsubmit when the button is clicked. To fix your issue, look into Stop form refreshing page on submit, which, among other things, would involve adding return false to your onsubmit call. Other solutions from the same page mention not using button type="submit", and instead focusing on using the type="button" with a separate call from there onclick. Hopefully this helps!

what i want is actually for the user to input the data into the form, after click "submit" i want to display the data in the same page by using innerHTML — harraz syah, Jun 08 '21 at 16:08

implementing innerHTML to display output by using form

3 Answers3