javascript - jquerymobile ページから値を取得し、プロンプトボックスを使用して表示するにはどうすればよいですか?

Question

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>

score 1 · Accepted Answer

<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>

javascript - jquerymobile ページから値を取得し、プロンプト ボックスを使用して表示するにはどうすればよいですか?

1 に答える 1

Related

Reference

javascript - jquerymobile ページから値を取得し、プロンプトボックスを使用して表示するにはどうすればよいですか?