堆栈内存溢出
  繁体   English   中英

如何使用JavaScript在表格中显示HTML5表单数据

[英]How to show HTML5 form data in table using javascript

 原文  2016-02-14 08:26:59  3   1    javascript/ html5

问题描述

**我有一个带有html5表单控件的表单。
在我的代码中，我能够创建数据并插入行，但是在单击“保存”按钮后，表数据消失了。 请为您提供输入** 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
                form {
                    /* Just to center the form on the page */
                    margin: 0 auto;
                    width: 80%;
                    /* To see the outline of the form */
                    padding: 1em;
                    border: 1px solid #CCC;
                    border-radius: 1em;
                }

                    form div + div {
                        margin-top: 1em;
                    }

                label {
                    /* To make sure that all labels have the same size and are properly aligned */
                    display: inline-block;
                    /*width: 90px;*/
                    /*text-align: right;*/
                }

                .label-name {
                    width: 20%;
                    text-align: left;
                }

                input, textarea {
                    /* To make sure that all text fields have the same font settings
        By default, textareas have a monospace font */
                    font: 1em sans-serif;
                    /* To give the same size to all text field */
                    width: 300px;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    /* To harmonize the look & feel of text field border */
                    border: 1px solid #999;
                }

                    input:focus, textarea:focus {
                        /* To give a little highlight on active elements */
                        border-color: #000;
                    }

                textarea {
                    /* To properly align multiline text fields with their labels */
                    vertical-align: top;
                    /* To give enough room to type some text */
                    height: 5em;
                    /* To allow users to resize any textarea vertically
        It does not work on every browsers */
                    resize: vertical;
                }

                .button {
                    /* To position the buttons to the same position of the text fields */
                    padding-left: 90px; /* same size as the label elements */
                }

                button {
                    /* This extra margin represent roughly the same space as the space
        between the labels and their text fields */
                    margin-left: .5em;
                }

                input[type=radio], input[type=checkbox] {
                    width: 20px;
                    cursor: pointer;
                }

                #result_grid {
                    margin: 0 auto;
                    width: 80%;
                    padding: 1em;
                    border: 1px solid #CCC;
                    border-radius: 1em;
                }

                table {
                    border-spacing: 5px;
                }

                button {
                    width: 100px;
                }
    </style>

</head>
<body>
    <form method="post" enctype="multipart/form-data">
        <div>
            <label class="label-name" for="name">Name:</label>
            <input type="text" id="nametxt" placeholder="Enter your name" required />
        </div>
        <div>
            <label class="label-name">Gender:</label>
            <input type="radio" id="female" name="gender" value="female" checked><label for="female" class="abc">Female</label>
            <input type="radio" id="male" name="gender" value="male"><label for="male" class="abc">Male</label>
        </div>
        <div>
            <label class="label-name">Date Of Birth:</label>
            <input type="date" name="dob" id="dob">
        </div>
        <div>
            <label for="nationlity" class="label-name">Nationality</label>
            <select id="nationlitydd">
                <option value="indian">Indian</option>
                <option value="pakistan">Pakistani</option>
            </select>
        </div>
        <div>
            <label for="language" class="label-name">Language:</label>
            <input type="checkbox" value="english" name="lang" id="englishchk" checked class="chk" /><label for="english">English</label>
            <input type="checkbox" value="hindi" name="lang" id="hindichk" class="chk" /><label for="hindi">Hindi</label>
            <input type="checkbox" value="kanada" name="lang" id="kanadachk" class="chk" /><label for="kanada">Kanada</label>
            <input type="checkbox" value="punjabi" name="lang" id="punjabichk" class="chk" /><label for="punjabi">Punjabi</label>
        </div>
        <!--<div>
            <label class="label-name">Phone No:</label>
            <input type="number" name="phone_no" required>
        </div>-->
        <div>
            <label for="mail" class="label-name">E-mail:</label>
            <input type="email" id="mailtxt" required placeholder="abc@efg.com" />
        </div>
        <div>
            <label for="photo" class="label-name">Photo:</label>
            <input type="file" name="File1" id="File1" accept="image/*" placeholder="Upload your photo" />
        </div>
        <div>
            <label for="msg" class="label-name">Message:</label>
            <textarea id="msgtxt" placeholder="Add your message"></textarea>
        </div>

        <div class="button">
            <button type="submit" onclick="savedata();">Save</button>
        </div>
    </form>
    <div id="result_grid">
        <div id="edit_view_panel">
            <!--<input type="button" value="View" />
            <input type="button" value="Edit" />-->
            <button type="submit" value="View"> View </button>
            <button type="submit" value="Edit"> Edit </button>
        </div>
        <div>
            <table id="form_result">
                <tr>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>DOB</th>
                    <th>Nationality</th>
                    <th>Language</th>
                    <th>Email</th>
                    <th>Photo</th>
                    <th>Message</th>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

<script type="text/javascript">

    var checkedValue = [];
    var row;
    var data;

    function getRadioValue(theRadioGroup) {
        var elements = document.getElementsByName(theRadioGroup);
        for (var i = 0, l = elements.length; i < l; i++) {
            if (elements[i].checked) {
                return elements[i].value;
            }
        }
    }

    function getCheckBox(thisCheckBoxGroup) {
       // var checkedValue = [];
        var inputElements = document.getElementsByName(thisCheckBoxGroup);
        for (var i = 0; inputElements[i]; ++i) {
            if (inputElements[i].checked) {
                 checkedValue.push(inputElements[i].value);              
            }

        } return checkedValue;
    }

    function savedata() {

        var nationaldd = document.getElementById("nationlitydd");
         data = {
            "name": document.getElementById('nametxt').value,
            "gender": getRadioValue('gender'),
            "dob": document.getElementById('dob').value,
            "nationality": nationaldd.options[nationaldd.selectedIndex].text,
            "lang": getCheckBox("lang"),
            "email": document.getElementById('mailtxt').value,
            "filename" : document.getElementById('File1').value,
            "message": document.getElementById('msgtxt').value
        }
        console.log(data);      
        createtablerow();


    }

    function createtablerow() {

        table = document.getElementById('form_result');    
        var columnCount = table.rows[0].cells.length;

         //Add the data rows.
            row = table.insertRow(-1);

            var cell1 = row.insertCell(-1);
            var cell2 = row.insertCell(-1);
            var cell3 = row.insertCell(-1);
            var cell4 = row.insertCell(-1);
            var cell5 = row.insertCell(-1);
            var cell6 = row.insertCell(-1);
            var cell7 = row.insertCell(-1);
            var cell8 = row.insertCell(-1);

            cell1.innerHTML = data.name;;
            cell2.innerHTML = data.gender
            cell3.innerHTML = data.dob;
            cell4.innerHTML = data.nationality;
            cell5.innerHTML = data.lang;
            cell6.innerHTML = data.email;
            cell7.innerHTML = data.filename;
            cell8.innerHTML = data.message;
             //here i am adding the row
            table.appendChild(row);


    }
</script>

//单击保存按钮后如何在表中获取数据

1 个解决方案

解决方案1
 0  2016-02-14 09:05:35

从提交按钮中删除type ='submit'，因为它会提交表单并刷新页面。 我将删除所有提交，只保留按钮类型，并在准备好将数据发送到服务器时使用提交。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用Javascript的HTML5表单 如何使用jquery或javascript以HTML形式显示本地存储数据？ 如果没有数据，如何隐藏表格并使用jquery或javascript显示表单 如何显示特定的行？ 使用SQLite + HTML5 + Javascript 如何使用JavaScript和HTML5用户表单创建图形？ HTML5 Pop使用Javascript表单验证 使用Javascript表单提交所需的HTML5 如何使用HTML5中的sessionStorage概念在Javascript中打印对象数据 如何使用HTML5和Javascript读取firebase数据？ 通过HTML5验证使用Javascript检查表单是否有效，并将表单数据存储在本地存储中
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM