JQuery Mobile - 如何处理第二页中的表单数据？

我的一位朋友给了我一些基本的jquery移动代码，希望我能帮他处理这个表单，除了我在Uni的第一年，并且只真正了解Java，尽管我已经花了几天的时间尝试学习Jquery Mobile。我的问题是，我有两个html页面，一旦有人点击提交按钮，我不知道数据会发生什么。JQuery Mobile - 如何处理第二页中的表单数据？

的index.html

<!doctype html> 
 
<html> 
 
    <head> 
 
     <title>Rivoli Cinema Hostel Maps</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"> 
 
     <link rel="shortcut icon" href="http://static.wixstatic.com/ficons/51b590_0ba7af1a8081cb84ffe6b34fbcf2bb73_fi.ico" type="image/x-icon"> 
 
     <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script> 
 
     <script src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
 
     <script language="javascript" type="text/javascript"> 
 
      $(document).on("click", "#where", function() { 
 
       $("#input").val("w_a"); 
 
       $(":submit").click(); 
 
      }); 
 
      $(document).on("click", "#museum", function() { 
 
       $("#input").val("Museum"); 
 
       $(":submit").click(); 
 
      }); 
 
      $(document).on("click", "#night", function() { 
 
       $("#input").val("Nightclub"); 
 
       $(":submit").click(); 
 
      }); 
 
      $(document).on("click", "#res", function() { 
 
       $("#input").val("Restaurant"); 
 
       $(":submit").click(); 
 
      }); 
 
      $(document).on("click", "#shop", function() { 
 
       $("#input").val("Shopping"); 
 
       $(":submit").click(); 
 
      }); 
 
      $(document).ready(function() { 
 
       $(":submit").click(function (e) { 
 
        var txt = $.trim($("#input").val()); 
 
        txt = txt.split(" ").join(""); 
 
        $("#input").val(txt); 
 
        if ($("#input").val() === "") { 
 
         e.preventDefault(); 
 
        } 
 
       }); 
 
      }); 
 
     </script> 
 
     <style> 
 
      .ui-header .ui-title{ 
 
       margin-right: 0px; 
 
       margin-left: 0px; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div data-role="page"> 
 

 
      <div data-role="header" > 
 
       <h1>Rivoli Cinema Hostel Maps</h1> 
 
      </div><!-- /header --> 
 

 
      <div data-role="content"> 
 
       <form method="post" action="pagetwo.html" data-ajax="false"> 
 
        <input name="search" type="search" id="input" placeholder="Where do you want to go?"/> 
 
        <ul data-role="listview" data-inset="true"> 
 
         <li><a id="museum" href="#">Museum</a></li> 
 
         <li><a id="night" href="#">Nightclub</a></li> 
 
         <li><a id="res" href="#">Restaurant</a></li> 
 
         <li><a id="shop" href="#">Shopping</a></li> 
 
        </ul> 
 
        <p>Radius (km):</p> 
 
        <input name="distance" type="range" data-highlight="true" id="slider" value="25" min="1" max="25" /> 
 
        <input data-icon="star" type="submit" value="Search"> 
 
        <a href="#" data-role="button" data-icon="star" id="where">Where am I?</a> 
 
       </form> 
 
      </div><!-- /content --> 
 

 
      <div data-role="footer"> 
 
       <h4>Rivoli Cinema Hostel</h4> 
 
      </div><!-- /footer --> 
 

 
     </div><!-- /page --> 
 
    </body> 
 
</html>

pagetwo.html

<!doctype html> 
 
<html> 
 
    <head> 
 
     <title>Rivoli Cinema Hostel Maps</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"> 
 
     <link rel="shortcut icon" href="http://static.wixstatic.com/ficons/51b590_0ba7af1a8081cb84ffe6b34fbcf2bb73_fi.ico" type="image/x-icon"> 
 
     <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script> 
 
     <script src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
 
     <script language="javascript" type="text/javascript"> 
 
      
 
     </script> 
 
     <style> 
 
      .ui-header .ui-title{ 
 
       margin-right: 0px; 
 
       margin-left: 0px; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div data-role="page"> 
 

 
      <div data-role="header" > 
 
       <h1>Rivoli Cinema Hostel Maps</h1> 
 
      </div><!-- /header --> 
 

 
      <div data-role="content" id="custom"> 
 
       
 
      </div><!-- /content --> 
 

 
      <div data-role="footer"> 
 
       <h4>Rivoli Cinema Hostel</h4> 
 
      </div><!-- /footer --> 
 

 
     </div><!-- /page --> 
 
     
 
    </body> 
 
</html>

如何获得的值在搜索框和日e滑块到第二页中的变量？

来源

2015-06-07 João Coelho

为了实现你一个简单的方法需要什么，我建议你使用多个页面在一个HTML（以避免服务器端的编码 - 除非你真的很需要那）

http://demos.jquerymobile.com/1.2.1/docs/pages/multipage-template.html

工作演示与您的代码在一个HTML：http://jsbin.com/nudoje/7/edit?output

$(function(){ 
 
    var doc = $(document), 
 
     one = $('#one'), 
 
     two = $('#two'), 
 
     inp = $('#inp'), 
 
     ran = $('#ran'), 
 
     sub = $("#sub"), 
 
     out = $("#out"); 
 

 
    doc.on("click", "#where", function() { 
 
    inp.val("w_a"); 
 
    sub.click(); 
 
    }); 
 
    doc.on("click", "#museum", function() { 
 
    inp.val("Museum"); 
 
    sub.click(); 
 
    }); 
 
    doc.on("click", "#night", function() { 
 
    inp.val("Nightclub"); 
 
    sub.click(); 
 
    }); 
 
    doc.on("click", "#res", function() { 
 
    inp.val("Restaurant"); 
 
    sub.click(); 
 
    }); 
 
    doc.on("click", "#shop", function() { 
 
    inp.val("Shopping"); 
 
    sub.click(); 
 
    }); 
 
    doc.on("click", "#sub", function() { 
 
    var txt = $("#inp").val(); 
 
    out.text(txt + ' ' + ran.val() + 'km'); 
 
    }); 
 
});

.ui-header .ui-title { 
 
    margin-right: 0px; 
 
    margin-left: 0px; 
 
}

<html> 
 
    
 
    <head> 
 
    <title>Rivoli Cinema Hostel Maps</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"> 
 
    <link rel="shortcut icon" href="http://static.wixstatic.com/ficons/51b590_0ba7af1a8081cb84ffe6b34fbcf2bb73_fi.ico" type="image/x-icon"> 
 
    <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div data-role="page" id="one"><!-- /page1 --> 
 

 
     <div data-role="header" > 
 
     <h1>Rivoli Cinema Hostel Maps</h1> 
 
     </div><!-- /header --> 
 

 
     <div data-role="content"> 
 
     <input name="search" type="search" id="inp" placeholder="Where do you want to go?"/> 
 
     <ul data-role="listview" data-inset="true"> 
 
      <li><a href="#" id="museum">Museum</a></li> 
 
      <li><a href="#" id="night">Nightclub</a></li> 
 
      <li><a href="#" id="res">Restaurant</a></li> 
 
      <li><a href="#" id="shop">Shopping</a></li> 
 
     </ul> 
 
     <p>Radius (km):</p> 
 
     <input name="distance" type="range" data-highlight="true" id="ran" value="25" min="1" max="25" /> 
 
     <a href="#two" data-role="button" data-icon="star" id="sub">Search</a> 
 
     <a href="#" data-role="button" data-icon="star" id="where">Where am I?</a> 
 
     </div><!-- /content --> 
 

 
     <div data-role="footer"> 
 
     <h4>Rivoli Cinema Hostel</h4> 
 
     </div><!-- /footer --> 
 

 
    </div><!-- /page1 --> 
 

 
    <div data-role="page" id="two"><!-- /page2 --> 
 

 
     <div data-role="header" > 
 
     <h1>Rivoli Cinema Hostel Maps</h1> 
 
     </div><!-- /header --> 
 

 
     <div data-role="content" id="custom"> 
 
     <p id="out"></p><!-- /output --> 
 
     <a href="#one" data-role="button" data-icon="star" id="back">Back</a> 
 
     </div><!-- /content --> 
 

 
     <div data-role="footer"> 
 
     <h4>Rivoli Cinema Hostel</h4> 
 
     </div><!-- /footer --> 
 

 
     
 
    </div><!-- /page2 --> 
 
    </body> 
 
</html>

来源

2015-06-07 15:15:08 rafaelcastrocouto

非常感谢，男子，那算出完美 –

JQuery Mobile - 如何处理第二页中的表单数据？

回答

相关问题