我的一个朋友给了我一些基本的jquery移动代码，希望我可以帮他处理这个表格，除了我在Uni的第一年并且只知道Java，尽管我已经花了这几天试图学习Jquery Mobile。我的问题是我有两个html页面，一旦有人点击提交按钮，我就不知道数据会发生什么。
的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>
如何将搜索框中的值和滑块添加到第二页中的变量？
答案 0 :(得分：0)
为了以简单的方式实现您的需求，我建议您在一个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>