Question

基本上我正在考虑根据用户输入创建一些选择选项，我一直在尝试修改我在其他地方找到的表单，并且可以生成我想要的行为但不是一些非常具体的格式我需要使这个工作完全正常根据需要。

网页代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>untitled document</title>

<style>
body {
    background-color:#f0f0f0;
 }
form {
width:140px;
padding:20px;
margin:10px auto 20px;
border:1px solid #999; 
background-color:#fff; 
box-shadow:4px 4px 8px #666;
 } 
form div {
    margin:5px 0;
 }  
#address {
width:630px;
line-height:30px;
margin:auto;
border:1px solid #999;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
text-align:center;
background-color:#fff; 
box-shadow:4px 4px 8px #666;   
 }
.hide {
    display:none;
 }
</style>

<script>

function init(){

   df=document.forms[0];

df.onsubmit=function(){


   document.getElementById('address').firstChild.nodeValue=
   '?N=411&Ntk=gensearch&    Ntt='+df[0].value+'select2='+df[1].value+'select3='+df[2].value;
   document.getElementById('address').className='';
   return false;
   }
  }
df[4].onclick=function(){
    document.getElementById('address').className='hide';
  }

   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);
</script>

</head>
<body>

<form action="exampleresult.html" method="GET">

<div>
<select name="Val1">
 <option value="" selected="selected">Select a square...</option>
<option value="X">X</option>
 <option value="A">A</option>
 <option value="H">H</option>
</select>
</div>
<div>
<select name="Val2">
 <option value="" selected="selected">Select a square...</option>
 <option value="Y">Y</option>
<option value="B">B</option>
 <option value="I">I</option>
</select>
</div><div>
<select name="Val3">
 <option value="" selected="selected">Select a square...</option>
 <option value="Z">Z</option>
<option value="C">C</option>
 <option value="J">J</option>
</select>
</div><div>
 <input name="submit" type="submit" value="OK">
 <input type="reset" value="clear">
</div>
</form>

<div id="address" class="hide">&nbsp;</div>

</body>
</html>'

示例结果页

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<p>Hi, I want the URL to be :
</p>
<p> ***Thispage***?N=411&Ntk=gensearch&Ntt=XYZ</p>
<p>With the variables selected in the form XYZ with nothing else included (that means no VAL = etc) </p>
</body>
</html>

HTML表单根据表单中的用户选择重定向到URL

0 个答案: