只需使用选择字段jsfiddle 演示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
function submitForm() {
var myform = document.getElementById('myform');
var mytext = document.getElementById('room');
myroom = mytext.value.toLowerCase();
if (myroom == 'kitchen') {
myform.action = 'kitchen.php';
myform.submit();
} else if (myroom == 'toilet') {
myform.action = 'toilet.php';
myform.submit();
} else if (myroom == 'bedroom') {
myform.action = 'bedroom.php';
myform.submit();
} else return false;
}
window.onload = function(){
document.getElementById('move').onclick = submitForm;
}
</script>
</head>
<body>
<form id="myform" name="myform" method="post">
<input type="text" id="room" name="room" />
<button id="move" name="move" style="height: 23px">Move</button>
</form>
</body>
</html>
在 php 端创建三个文件来测试是否可行,toilet.php、kitchen.php 和卧室.php,在所有三个文件中使用以下代码。确保文件名小写:
<?php
echo $_POST['room'];
?>
基本上,根据选择的选项,JavaScript 会更改表单的操作 url 并提交。如果没有选择,它将返回 false 并且不提交。submitForm 函数通过 onclick 事件附加到移动按钮。