javascript - Form - How to submit and go to url?

Question

I have this form below which is perfect for my needs with dependent fields. What I would like to do is when someone selects one of the subcategories (ie: Beddings), they would then be transferred to a url (ex: www.beddings.com). But this is far beyond my understanding!

Any help would be appreciated!

Here is a demo of this form: http://www.tamilcodes.com/demopages/jsdropdownlist.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" />
    <script language="javascript" type="text/javascript">
function dropdownlist(listindex)
{

document.formname.subcategory.options.length = 0;
switch (listindex)
{

case "Home Ware" :
document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
document.formname.subcategory.options[1]=new Option("Air-Conditioners/Coolers","Air-                               Conditioners/Coolers");
document.formname.subcategory.options[2]=new Option("Audio/Video","Audio/Video");
document.formname.subcategory.options[3]=new Option("Beddings","Beddings");
document.formname.subcategory.options[4]=new Option("Camera","Camera");
document.formname.subcategory.options[5]=new Option("Cell Phones","Cell Phones");

break;

case "Education" :
document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
document.formname.subcategory.options[1]=new Option("Colleges","Colleges");
document.formname.subcategory.options[2]=new Option("Institutes","Institutes");
document.formname.subcategory.options[3]=new Option("Schools","Schools");
document.formname.subcategory.options[4]=new Option("Tuitions","Tuitions");
document.formname.subcategory.options[5]=new Option("Universities","Universities");

break;

case "Books" :
document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
document.formname.subcategory.options[1]=new Option("College Books","College Books");
document.formname.subcategory.options[2]=new Option("Engineering","Engineering");
document.formname.subcategory.options[3]=new Option("Magazines","Magazines");
document.formname.subcategory.options[4]=new Option("Medicine","Medicine");
document.formname.subcategory.options[5]=new Option("References","References");

break;

}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>

<form id="formname" name="formname" method="post" action="submitform.asp" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category :</td>
<td width="59%" align="left" valign="middle"><select name="category" id="category"         onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Category</option>
<option value="Home Ware">Home Ware</option>
<option value="Education">Education</option>
<option value="Books">Books</option>
</select></td>
</tr>
<tr>
<td align="right" valign="middle">Sub Category :
</td>
<td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory"><option value="">Select Sub-    Category</option>        </select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Sub-Category</option>
</select>
</noscript></td>
</tr>
</table>

</form> 


</body>
</html>

score 3 · Accepted Answer

您可以使用 javascript 执行以下操作

window.location = url

您需要检查子类别并相应地设置 url。

干得好

function redirect_subCategory() 
{
var e = document.getElementById("subcategory"); //set subcategory as id of select box
var subcategory = e.options[e.selectedIndex].value;

switch (subcategory)
{

case "Colleges" :
windows.location = "www.colleges.com";

break;

case "Institutes" :
windows.location = "www.insitutes.com";

break;

case "Schools" :
windows.location = "www.schools.com";

break;

case "Tuitions" :
windows.location = "www.tuitions.com";

break;

case "Universities" :
windows.location = "www.universities.com";

break;

}
}

创建一个函数并将上面的代码保留在其中。在选择框的 onchange 事件中调用该函数为 -

<select id="subcategory" onchange='redirect_subCategory()'>

score 0 · Accepted Answer

不确定您是否要实际发布到表单；如果没有，您可以使用您的 Option 结构来存储您的目标路径，创建一个导航到 url 的函数，并从第二个下拉列表的 onChange 事件中调用，即：

<script language="javascript" type="text/javascript">
  function dropdownlist(listindex)
  {
    document.formname.subcategory.options.length = 0;
    switch (listindex)
    {
      case "Home Ware" :
        document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
        document.formname.subcategory.options[1]=new Option("Air-Conditioners/Coolers", "www.google.com");
        document.formname.subcategory.options[2]=new Option("Audio/Video", "www.yahoo.com");
        document.formname.subcategory.options[3]=new Option("Beddings", "www.ikea.com");
        document.formname.subcategory.options[4]=new Option("Camera", "www.apple.com");
        document.formname.subcategory.options[5]=new Option("Cell Phones", "www.sprint.com");
        break;
      case "Education" :
        document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
        document.formname.subcategory.options[1]=new Option("Colleges", "www.aol.com");
        document.formname.subcategory.options[2]=new Option("Institutes", "www.facebook.com");
        document.formname.subcategory.options[3]=new Option("Schools", "www.pintrest.com");
        document.formname.subcategory.options[4]=new Option("Tuitions", "www.lottopick.in");
        document.formname.subcategory.options[5]=new Option("Universities", "www.cnn.com");
        break;
      case "Books" :
        document.formname.subcategory.options[0]=new Option("Select Sub-Category","");
        document.formname.subcategory.options[1]=new Option("College Books","www.oracle.com");
        document.formname.subcategory.options[2]=new Option("Engineering","stackoverflow.com");
        document.formname.subcategory.options[3]=new Option("Magazines","monster.com");
        document.formname.subcategory.options[4]=new Option("Medicine","www.twitter.com");
        document.formname.subcategory.options[5]=new Option("References","www.yelp.com");
        break;
    }
    return true;
  }

  function navigate(target){
    window.location.href = 'http://' + target;
  }
</script>

还：

    <tr>
      <td align="right" valign="middle">Sub Category : </td>
      <td align="left" valign="middle">
        <select name="subcategory" onchange="javascript:navigate(this.options[this.selectedIndex].value);">
          <option value="">Select Sub-Category</option>
        </select>
      </td>
    </tr>

score 0 · Accepted Answer

您应该为 Select 框的 onChange 事件编写一个 java 函数。

在该函数中，使用 window.location 重定向到页面..

例如：

function redirect() {
      window.location = 'www.beddings.com';
}

javascript - Form - How to submit and go to url?

3 回答 3

Related

Reference