Question

我在下面有以下表格，我试图在没有服务器的情况下处理以用于phonegap。我正在使用javascript，但认为jquery会更好用吗？基本上我想拥有＆＃34;总计＆＃34;显示在新页面，但不知道如何做到尽管阅读。这对我来说有点太混乱了！：$

非常感谢任何帮助！

    <form id="form1" input type="hidden" action="" method="post" onsubmit="return     
    calcTotal(this)">
        <select name=select1>
        <option selected="selected" value="0">Chinese Zodiac</option>
        <option value="3">Rat</option>
        <option value="3">Ox</option>
        <option value="4">Tiger</option>
        <option value="2">Rabbit</option>
        <option value="4">Dragon</option>
        <option value="5">Snake</option>
        <option value="3">Horse</option>
        <option value="3">Sheep</option>
        <option value="4">Monkey</option>
        <option value="5">Rooster</option>
        <option value="3">Dog</option>
        <option value="3">Pig</option>
        </select>
        </select>
        <br />
        <select name=select2>
            <option selected="selected" value="0">Star Sign</option>
        <option value="2">Aries</option>
        <option value="4">Taurus</option>
        <option value="3">Gemini</option>
        <option value="4">Cancer</option>
        <option value="3">Leo</option>
        <option value="2">Virgo</option>
        <option value="2">Libra</option>
        <option value="3">Scorpio</option>
        <option value="2">Sagittarius</option>
        <option value="4">Capricorn</option>
        <option value="2">Aquarius</option>
        <option value="3">Pisces</option>
        </select>
        <br />

        <select name=select3>
            <option selected="selected" value="0">Blood Type</option>
        <option value="3">O</option>
        <option value="2">A</option>
        <option value="1">B</option>
        <option value="3">AB</option>
        </select>
        <br />

        <select name=select4>
            <option selected="selected" value="0">Favourite Colour</option>
        <option value="3">Black</option>
        <option value="3">Blue</option>
        <option value="2">Brown</option>
        <option value="2">Green</option>
        <option value="3">Orange</option>
        <option value="3">Pink</option>
        <option value="2">Purple</option>
        <option value="4">Red</option>
        <option value="2">Yellow</option>
        <option value="2">White</option>
        <option value="5">Other</option>
        </select>
        <br />

        Age<input id="age" name="" type="number" value="" /> 

        <br />

        <input name="" type="submit" value="Go" />
        <span>Total: </span><span id="result"></span>
    </form>


    <script type="text/javascript">
   function calcTotal(oForm){
    var sum = 0;
    for(i=0; i < oSels.length; i++){
        sum += new Number(oSels[i].value);
    }
    var age = document.getElementById('age').value;
    sum = parseInt(age) + parseInt(getRandomInt(sum-(age / 8),sum+(age / 11))); //Add some           
    random. The more you are older, the more random it is.
    document.getElementById('result').innerHTML = sum;
    return false;
    }
    window.onload=function(){
    oSels = document.getElementById('form1').getElementsByTagName('select');
    for(i=0; i < oSels.length; i++){
        oSels[i].onchange=function(){
            document.getElementById('result').innerHTML = '';
        }
    }
    }
    {document.getElementById("fieldId").value = calculatedValue; }

    function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    </script>

Answer 1

以this tutorial

为例

<!DOCTYPE html>
<html>
<head>
  <meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

  <script>
    function getRandomInt (min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    function calcTotal(oForm){
      var sum = 0;
      oForm.find("select").each(function() {
        sum += new Number($(this).val());
      });
      var age = $('#age').val();
      sum = parseInt(age) + parseInt(getRandomInt(sum-(age / 8),sum+(age / 11))); //Add some random. The older you are, the more random it is.
      $('#result').html(sum);
    }

    $(function() {
      $("#form1").find("select").on("change",function() {
        $('#result').empty();
      });
      $("#calcLink").on("click",function(e) {
        calcTotal($("#form1"));
      });
    });
  </script>
</head>

<body>

<div data-role=page id=home>
  <div data-role=header>
    <h1>Home</h1>
  </div>

  <div data-role=content>
    <p> Window content 1

    <form id="form1" input type="hidden" action="" method="post" onsubmit="return
        calcTotal(this)">
            <select name=select1>
            <option selected="selected" value="0">Chinese Zodiac</option>
            <option value="3">Rat</option>
            <option value="3">Ox</option>
            <option value="4">Tiger</option>
            <option value="2">Rabbit</option>
            <option value="4">Dragon</option>
            <option value="5">Snake</option>
            <option value="3">Horse</option>
            <option value="3">Sheep</option>
            <option value="4">Monkey</option>
            <option value="5">Rooster</option>
            <option value="3">Dog</option>
            <option value="3">Pig</option>
            </select>
            </select>
            <br />
            <select name=select2>
                <option selected="selected" value="0">Star Sign</option>
            <option value="2">Aries</option>
            <option value="4">Taurus</option>
            <option value="3">Gemini</option>
            <option value="4">Cancer</option>
            <option value="3">Leo</option>
            <option value="2">Virgo</option>
            <option value="2">Libra</option>
            <option value="3">Scorpio</option>
            <option value="2">Sagittarius</option>
            <option value="4">Capricorn</option>
            <option value="2">Aquarius</option>
            <option value="3">Pisces</option>
            </select>
            <br />

            <select name=select3>
                <option selected="selected" value="0">Blood Type</option>
            <option value="3">O</option>
            <option value="2">A</option>
            <option value="1">B</option>
            <option value="3">AB</option>
            </select>
            <br />

            <select name=select4>
                <option selected="selected" value="0">Favourite Colour</option>
            <option value="3">Black</option>
            <option value="3">Blue</option>
            <option value="2">Brown</option>
            <option value="2">Green</option>
            <option value="3">Orange</option>
            <option value="3">Pink</option>
            <option value="2">Purple</option>
            <option value="4">Red</option>
            <option value="2">Yellow</option>
            <option value="2">White</option>
            <option value="5">Other</option>
            </select>
            <br />

            Age<input id="age" name="" type="number" value="" />

            <br />

    </form>

    <a href="#win2" id="calcLink"> calculate and show window 2 located in the same page </a>
  </div>
</div>

<div data-role=page id=win2 data-add-back-btn=true>
  <div data-role=header>
    <h1>Window 2</h1>
  </div>

  <div data-role=content>
    <p> Window content 2 </p>
    <span>Total: </span><span id="result"></span>
  </div>
</div>

</body>
</html>

Jquery移动表单提交

1 个答案: