jQuery的移动JavaScript计算器

Question

I am very new to javascript, and I am trying to build a mobile app with Jquery Mobile. 我对javascript非常陌生，我正在尝试使用Jquery Mobile构建一个移动应用程序。 I would like the user to input one value on each page and then on the last page they will click submit and it will display the value on the last page. 我希望用户在每页上输入一个值，然后在最后一页上，他们将单击“提交”，它将在最后一页上显示该值。 I have been working on this for like 4 hours and I can get the calculation to work on the same page as the submit button but not on the next page. 我已经进行了大约4个小时的工作，我可以将计算结果与“提交”按钮放在同一页面上，但不能在下一页上使用。

    <script>

        function sum()
{


    var item1num = document.getElementById('item1num').value;
    var item2num = document.getElementById('item2num').value;

        {result = parseInt(item1num)*parseInt(item2num);

        document.getElementById("showResult").innerHTML = (result);}}

    </script>

</head>
<body>
    <!-- Home -->
    <div data-role="page" id="page1">
        <div data-role="content">
            <div data-role="fieldcontain" id="item1">
                <fieldset data-role="controlgroup">
                    <label for="item1">
                        item1
                    </label>
                    <input name="item1num" id="item1num" placeholder="" value="" type="number" />
                </fieldset>
            </div>
            <a data-role="button" data-transition="slidefade" href="#page2" data-theme="b">
                Next
            </a>
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-role="content">
            <div data-role="fieldcontain" id="item1">
                <fieldset data-role="controlgroup">
                    <label for="item2">
                        item2
                    </label>
                    <input name="item2num" id="item2num" placeholder="" value="" type="number" />
                </fieldset>
            </div>
            <input id="btnAdd" type="submit" value="Submit" onclick="sum();" data-theme="b" />
            <span id="showResult"></span>
        </div>
    </div>
    <div data-role="page" id="page3">
        <div data-role="content">
            <span id="showResult"></span>
        </div>
    </div>

Answer 1

You need to pass the value to the pages submitting a form 您需要将该值传递给提交表单的页面

// page1

<form action="page2" method="post">
    <input type="text" name="value1"/>
    <input type="text" name="value2"/>
    <input type="submit" />
</form>

so in the other page you can get both and work with 因此，在另一页中，您可以同时使用它们和

// page2

<input type="hidden" name="value1" value="value from page 1"/>
<input type="hidden" name="value2" value="other value from page 1"/>

to get this with jQuery you can do 要用jQuery做到这一点，你可以做

var val1 = jQuery('input[name=value1]');
var val2 = jQuery('input[name=value2]');

Answer 2

Please try below code.It's displaying the result in the final page. 请尝试以下代码，它将在最后一页显示结果。

<!DOCTYPE html>
    <html>
    <head>
        <title>Page Title</title> 

        <meta name="viewport" content="width=device-width, initial-scale=1"> 

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script>
        function sum()
    {

        var item1num = document.getElementById('item1num').value;
        var item2num = document.getElementById('item2num').value;


            {result = parseInt(item1num)*parseInt(item2num);
            document.getElementById("showResult").innerHTML = "Result is: "+(result);}
    }

        </script>
    </head>
    <body>
        <!-- Home -->
        <div data-role="page" id="page1">
            <div data-role="content">
                <div data-role="fieldcontain" id="item1">
                    <fieldset data-role="controlgroup">
                        <label for="item1">
                            item1
                        </label>
                        <input name="item1num" id="item1num" placeholder="" value="" type="number" />
                    </fieldset>
                </div>
                <a data-role="button" data-transition="slidefade" href="#page2" data-theme="b">
                    Next
                </a>
            </div>
        </div>
        <div data-role="page" id="page2">
            <div data-role="content">
                <div data-role="fieldcontain" id="item1">
                    <fieldset data-role="controlgroup">
                        <label for="item2">
                            item2
                        </label>
                        <input name="item2num" id="item2num" placeholder="" value="" type="number" />
                    </fieldset>
                </div>
                <a href="#page3" data-role="button" data-theme="b" data-transirion="slidefade" onclick="sum();">B</a>
            </div>
        </div>
        <div data-role="page" id="page3">
            <div data-role="content">
                <span id="showResult"></span>
            </div>
        </div>
    </body>
    </html>

jQuery的移动JavaScript计算器

问题描述

2 个解决方案

解决方案1
0 2013-02-26 02:02:58

解决方案2
0 已采纳 2013-02-26 05:08:45

jQuery的移动JavaScript计算器

问题描述

2 个解决方案

解决方案1 0 2013-02-26 02:02:58

解决方案2 0 已采纳 2013-02-26 05:08:45

解决方案1
0 2013-02-26 02:02:58

解决方案2
0 已采纳 2013-02-26 05:08:45