我需要从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>
答案 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>