1. 首頁
  2. 問答
  3. 我們如何從jquerymobile頁面獲取值並使用提示框顯示它？

我們如何從jquerymobile頁面獲取值並使用提示框顯示它？

2012-10-16 48 views
0

我需要從jquerymobile頁面的文本框中提取值並點擊提交按鈕輸入的數據應顯示在提示框中。我們如何從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>

來源

2012-10-16 Ishmeet Kalsi

+1

您應該粘貼一些你先試過的代碼... – ramsinb

回答

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>

來源

2012-10-16 09:50:53

+0

謝謝非常適合我 –

相關問題

 相關問題