我有一个这样的表单:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<script>
$(function(){
$('#week1').change(function(){
//alert('week1');
//$("#week2").val("");
$('#week2 option').each(function(){
if($(this).prop('defaultSelected'))
$('#week2').val($(this).val()).selectmenu("refresh");
});
});
$('#week2').change(function(){
//alert('week1');
//$("#week1").val("");
$('#week1 option').each(function(){
if($(this).prop('defaultSelected'))
$('#week1').val($(this).val()).selectmenu("refresh");
});
});
});
</script>
<div data-role="page">
<div data-role="header">
<h1>Search database</h1>
</div>
<div data-role="main" class="ui-content">
<form id="search" method="get" action="result.html">
<fieldset class="ui-field-contain">
<label for="week1">Select Week1</label>
<select name="week1" id="week1">
<option value="" selected>Select week1</option>
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
<option value="thu">Thursday</option>
<option value="fri">Friday</option>
<option value="sat">Saturday</option>
<option value="sun">Sunday</option>
</select>
<br >
<label for="week2">Select Week2</label>
<select name="week2" id="week2">
<option value=""selected>Select week2</option>
<option value="mon">Monday 2</option>
<option value="tue">Tuesday 2</option>
<option value="wed">Wednesday 2</option>
<option value="thu">Thursday 2</option>
<option value="fri">Friday 2</option>
<option value="sat">Saturday 2</option>
<option value="sun">Sunday 2</option>
</select>
</fieldset>
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
将表单提交到results.html,我正试图在页面加载时显示查询字符串中的值,但它不起作用。当我手动刷新页面时,我会看到值,但在提交表单和加载results.html页面时不会看到。有人能帮我吗?
提前感谢您的时间和建议。
Joe Green
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
alert('Query Variable ' + variable + ' not found');
}
document.write("<br />Week1 = " + getQueryVariable("week1"));
document.write("<br />Week2 = " + getQueryVariable("week2"));
</script>
<script>
var week1 = getQueryVariable("week1");
var week2 = getQueryVariable("week2");
document.getElementById("week1").innerHTML = week1;
document.getElementById("week2").innerHTML = week2;
alert(week1);
alert(week2);
</script>
<div data-role="page">
<div data-role="header">
<h1>Search database</h1>
</div>
<div data-role="main" class="ui-content">
<div id="week1"></div>
<div id="week2"></div>
</div>
</div>
</body>
</html>
使用
function getParameterByName(name) {
name = name.replace(/[[]/, "\[").replace(/[]]/, "\]");
var regex = new RegExp("[\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/+/g, " "));
}
然后通过获取URL参数
window.onload = function(){
var week1 = getParameterByName("week1");
var week2 = getParameterByName("week2");
alert(week1+" "+week2);
};