doujiao7325 2017-04-17 04:27
浏览 108

将表单数据永久保存在表中

I will try to express my question here is code which save the form data in a table but whenever i refresh page the values disappear plzz help. It is a form related to our poultry farm and i want this form should work to have an record an most important i want a delete button too . Thanks in advance ..

    <html>
<head>
    <title>Get Answer</title>
    <script type="text/javascript" src="../tinymce/tinymce.min.js"></script>
    <!--<script type="text/javascript">

    tinymce.init({
                    selector: "#newcom",
                    auto_focus: "newcom",
                    skin: "xenmce",
                    width: 750,
                    height: 250,
                    plugins: [
                        "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                        "save table contextmenu directionality emoticons template paste textcolor "
                ],
                content_css: "css/content.css",
                toolbar: "insertfile undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor", 
                style_formats: [
                        {title: 'Bold text', inline: 'b'},
                        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
                        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
                        {title: 'Example 1', inline: 'span', classes: 'example1'},
                        {title: 'Example 2', inline: 'span', classes: 'example2'},
                        {title: 'Table styles'},
                        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
                    ]
            });
    </script> -->

</head>
<body><center>
        <div>
            <form name="firstform" id="firstform" method="post">
                <p id="p1">
                    <label>Total Hens</label><input type="text" name="hen" id="hen" size="35" value="" />
                </p>

                <p id="p2">
                    <label>Total Eggs</label><input type="text" name="egg" id="egg" size="35" value="" />
                </p><br>
                <p id="p8">
                    <label>Total Cracked Eggs</label><input type="text" name="cegg" id="cegg" size="35" value="" />
                </p><br>
                <p id="p3">
                    <label>Rate</label><input type="text" name="rate" id="rate" size="35" value="" />
                </p>
                <p id="p4">
                    <label>Feed Sacks</label><input type="text" name="fs" id="fs" size="35" value="" />
                </p>
                <p id="p5">
                    <label>Week</label><input type="text" name="week" id="week" size="35" value="" />
                </p>
                <p id="p6">
                    <label>Death</label><input type="text" name="death" size="35" id="death" />
                </p><br />


                <input type="button" value="Save" id="button" onclick="writeToPage();" />
                <input type="reset" value="Reset" id="button" />
            </form>
        </div></center>
    <div id="pdada">
        <table border="1" align="center">
            <tr>
                <th>Date and Time</th>
                <th>Hens</th>
                <th>Eggs</th>
                <th>Cracked Eggs</th>
                <th>Rate</th>
                <th>Feed Sacks</th>
                <th>Week</th>
                <th>Death</th>
                <th>Total Value of Perfect eggs</th>
                <th>Total Value of Cracked eggs</th>
                <th>Total Value including Perfect eggs and Cracked eggs</th>
            </tr>
            <tr>
                <td id="adate"></td>
                <td id="ahen"></td>
                <td id="aegg"></td>
                <td id="acegg"></td>
                <td id="arate"></td>
                <td id="afs"></td>
                <td id="aweek"></td>
                <td id="adeath"></td>
                <td id="pe"></th>
                <td id="ce"></th>
                <td id="atv"></td>
            </tr>
        </table>
        </div>
        <script>
                var dt = new Date();

        function writeToPage(){
                var hen = document.getElementById("hen").value;
                var egg = document.getElementById("egg").value;
                var cegg = document.getElementById("cegg").value;
                var rate = document.getElementById("rate").value;
                var fs  = document.getElementById("fs").value;
                var week = document.getElementById("week").value;
                var death = document.getElementById("death").value;
                var pe = ( egg * rate );
                var ce = ( cegg * ( rate / 2 ) );
                var tv = ( (egg * rate) + ( rate / 2 * cegg ) );

                if(hen === ""){
                    alert("Please fill out the Hens field.");
                    document.getElementById("p1").style.color = "red";
                    document.getElementById("p1").style.fontFamily = "Arial";
                    document.getElementById("p1").style.fontSize = "larger"; 
                }
                else if(egg === ""){
                    alert("Please fill out the Eggs field.");
                    document.getElementById("p2").style.color = "red";
                    document.getElementById("p2").style.fontFamily = "Arial";
                    document.getElementById("p2").style.fontSize = "larger";
                }
                else if(cegg === ""){
                    alert("Please fill out the Cracked Eggs field.");
                    document.getElementById("p8").style.color = "red";
                    document.getElementById("p8").style.fontFamily = "Arial";
                    document.getElementById("p8").style.fontSize = "larger";
                }

                else if(rate === ""){
                    alert("Please fill out the Rate field.");
                    document.getElementById("p3").style.color = "red";
                    document.getElementById("p3").style.fontFamily = "Arial";
                    document.getElementById("p3").style.fontSize = "larger"; 
                }

                else if(fs === ""){
                    alert("Please fill out Feed Sacks field.");
                    document.getElementById("p4").style.color = "red";
                    document.getElementById("p4").style.fontFamily = "Arial";
                    document.getElementById("p4").style.fontSize = "larger";
                }
                else if(week === ""){
                    alert("Please fill out the Week section.");
                    document.getElementById("p5").style.color = "red";
                    document.getElementById("p5").style.fontFamily = "Arial";
                    document.getElementById("p5").style.fontSize = "larger";
                }
                else if(death=== ""){
                    alert("Please fill out the Death section.");
                    document.getElementById("p6").style.color = "red";
                    document.getElementById("p6").style.fontFamily = "Arial";
                    document.getElementById("p6").style.fontSize = "larger";
                }

                else{
                    document.getElementById("adate").innerHTML = dt;
                    document.getElementById("ahen").innerHTML = hen;
                    document.getElementById("arate").innerHTML = rate;
                    document.getElementById("aegg").innerHTML = egg;
                    document.getElementById("acegg").innerHTML = cegg;
                    document.getElementById("afs").innerHTML = fs;
                    document.getElementById("aweek").innerHTML = week;
                    document.getElementById("adeath").innerHTML = death;
                    document.getElementById("pe").innerHTML = pe;
                    document.getElementById("ce").innerHTML = ce;
                    document.getElementById("atv").innerHTML = tv;
                }   
            }


    </script>

</body>

  • 写回答

1条回答 默认 最新

  • duanqian1888 2017-04-17 05:00
    关注

    It will work once because you are not maintaining or storing the data anywhere. You are just displaying it. There are various way to store data for a web-app. You can use browser or a local DB. Though the latter is the most standard way.

    To start with, you have to store those values in a database and access them using service calls to that Database through a server. You cannot maintain the state of the data using javascript alone. Imo you need to grasp these basic concepts first if you have to achieve state-maintanence of your data.

    You can start by reading about Database and Server. In order to achieve this various technology stacks are available and in place. You can use anything that basically fits your needs.

    Mostly a simple web application works in this order. (technology used may vary).

    Database (SQL) <-> Service(Java) <-> Server (Jetty, Tomcat etc.) <-> Client (Javascript, AngularJS, etc.)

    Please note that the above flow is ONE of the Many ways to achieve UI - database relationship. There are better and more efficient ways to achieve the purpose but i am stating the most basic way.

    So you need to have a basic understanding about this flow in order to implement a data-storage/retrieval for your web application.

    If you do not wish to use a DB refer to this link. Just follow the steps given in the page and you will have your own small DB in no time. But it will not help if you plan on expanding your app.

    评论

报告相同问题?

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线,如何释放宽带全部速度