我们如何从jquerymobile页面获取值并使用提示框显示它?

时间:2012-10-16 09:40:41

标签: javascript jquery html5

我需要从jquerymobile页面的文本框中获取值并单击提交按钮,输入的数据应显示在提示框中。

需要Jquery或javasript的帮助。

以下是我为最佳示例准备的登录页面的示例我需要在提示bos中显示他输入的名称和信息,以便显示

<!DOCTYPE html>
<html>
<head>
<title>Registration Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> </script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://docs/_assets/js/jqm-docs.js"></script>
    <script src="http://js/jquery.mobile-1.2.0.js"></script>

<script Language="JavaScript">
function Data(){
win2 = window.open("", "", "width=320, height=200,resizable=0,scrollbars=1,status=0,toolbar=0,top=50,left=50");
win2.document.write("User ID: " + document.forms[0].username.value);
win2.document.close();
}
</script>
</head>


<body>

    <div data-role="page" class="type-interior">

        <div data-role="header" data-position="inline">
        <h1>Registration Page</h1>

    </div>

<div class="ui-body ui-body-a">
<table>
<tr><td>Enter username</td><td><div data-role="fieldcontain" class="ui-hide-label">
        <label for="username"></label>
        <input type="text" style="height: 25px; width: 150px" name="username" id="username" value="" placeholder="Username" />
    </div></td></tr>

<tr><td>Enter password</td><td><div data-role="fieldcontain" class="ui-hide-label">
        <label for="password1">Password:</label>
        <input type="password" style="height: 25px; width: 150px" name="password1" id="password1" value="" placeholder="Enter Password" />
    </div></td></tr>

<tr><td>Re-type Password</td><td><div data-role="fieldcontain" class="ui-hide-label">
        <label for="password2">Password:</label>
        <input type="password" style="height: 25px; width: 150px" name="password2" id="password2" value="" placeholder="Retype Password" />
    </div></td></tr>
</table>
<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Gender:</legend>
            <input type="radio" data-theme="b" name="gender" id="radio-female" value="f" />
            <label for="radio-female">Female</label>

            <input type="radio" data-theme="b" name="gender" id="radio-male" value="m"   />
            <label for="radio-male">Male</label>
    </fieldset>
    </div>

<div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <legend>Date of Birth:</legend>

            <label for="select-choice-month">Month</label>
            <select name="select-choice-month" id="select-choice-month">
                <option>Month</option>
                <option value="jan">January</option>
                <option value="feb">February</option>
                <option value="mar">March</option>
                <option value="apr">April</option>
                <option value="may">May</option>
                <option value="jun">June</option>
                <option value="jul">July</option>
                <option value="aug">August</option>
                <option value="sep">September</option>
                <option value="oct">October</option>
                <option value="nov">November</option>
                <option value="dec">December</option>
            </select>

            <label for="select-choice-day">Day</label>
            <select name="select-choice-day" id="select-choice-day">
                <option>Day</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
<option value="8>8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
            </select>

            <label for="select-choice-year">Year</label>
            <select name="select-choice-year" id="select-choice-year">
                <option>Year</option>
                <option value="2011">2011</option>
                <option value="2010">2010</option>
                <option value="2009">2009</option>
                <option value="2008">2008</option>
                <option value="2007">2007</option>
                <option value="2006">2006</option>
                <option value="2005">2005</option>
                <option value="2004">2004</option>
            </select>
        </fieldset>
    </div>

<div data-role="fieldcontain">
    <label for="flip-s">Get Updates:</label>
    <select name="flip-s" id="flip-s" data-role="slider" >
        <option value="off">Off</option>
        <option value="on">On</option>
    </select>
    </div>

<div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>Get Updates on:</legend>
                <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
                <label for="checkbox-1a">Sports</label>

                <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" />
                <label for="checkbox-2a">Movies</label>

                <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
                <label for="checkbox-3a">Songs</label>

                <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
                <label for="checkbox-4a">World</label>
            </fieldset>
            </div>



<div data-role="fieldcontain">
                <label for="select-choice-a" class="select">Choose shipping method:</label>
                <select name="select-choice-a" id="select-choice-a" data-native-menu="false">
                    <option>Shipping Methods</option>
                    <option value="standard">Standard: 7 day</option>
                    <option value="rush">Rush: 3 days</option>
                    <option value="express">Express: next day</option>
                    <option value="overnight">Overnight</option>
                </select>
            </div>

<div data-role="fieldcontain">
                <label for="select-choice-3" class="select">Your state:</label>
                <select name="select-choice-3" id="select-choice-3">
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>
                    <option value="CA">California</option>
                    <option value="CO">Colorado</option>
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="HI">Hawaii</option>
                    <option value="ID">Idaho</option>
                    <option value="IL">Illinois</option>
                    <option value="IN">Indiana</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NV">Nevada</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NM">New Mexico</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="ND">North Dakota</option>
                    <option value="OH">Ohio</option>
                    <option value="OK">Oklahoma</option>
                    <option value="OR">Oregon</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="SD">South Dakota</option>
                    <option value="TN">Tennessee</option>
                    <option value="TX">Texas</option>
                    <option value="UT">Utah</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WA">Washington</option>
                    <option value="WV">West Virginia</option>
                    <option value="WI">Wisconsin</option>
                    <option value="WY">Wyoming</option>
                </select>
            </div>

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
       <legend>Agree to the terms:</legend>
       <input type="checkbox" data-theme="a" name="checkbox-2" id="checkbox-2" class="custom" />
       <label for="checkbox-2">I agree</label>
    </fieldset>
</div>
<center>
<button type="button" style="height: 25px; width: 50px" data-theme="b" name="submit" onClick="Data()">Submit</button>
<button type="reset" style="height: 25px; width: 50px" data-theme="b" name="submit" >Reset</button>

</center>
</div><!-- /content -->

<div data-role="footer" data-id="foo1" data-position="fixed">
<h1>Copyright @Ishmeet</h1>
</div><!-- /footer -->

</div><!-- /page -->

</body>
</html>

1 个答案:

答案 0 :(得分:1)

<input type='text' id="t">
<input type='button' id='b' value='click me' >
<div id='d' title='dialog'></d>​​​​​​​​​​​​​​​
<script>
$("#b").click(function()
{
     $("#d").html($("#t").val());
     $("#d").dialog();
});
</script>