表單 - 如何提交併轉到url？

我有以下這種形式，這是我的需要與相關領域的完美。我想要做的是當有人選擇其中一個子類別（即：Beddings）時，他們會被轉移到一個網址（例如：www.beddings.com）。但這遠遠超出我的理解！表單 - 如何提交併轉到url？

任何幫助，將不勝感激！

下面是這種形式的演示：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>

來源

2012-04-26 cantaffordretail

爲什麼用PHP標記？ – 2012-04-26 03:54:25

您是否一起使用PHP和HTML？我在代碼中找不到任何PHP標籤！ – Sara 2012-04-26 03:57:11

不確定您是否希望實際發佈到表單;如果沒有，你可以用你的選項結構來存儲你的目標路徑，創建一個功能導航到的網址，並從第二個下拉即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>

來源

2012-04-26 04:20:41

我想要的是，當選擇子類別項目時，它會轉到設置的URL。但我不能完全弄清楚這一點 – cantaffordretail 2012-04-26 05:02:46

這是一個！非常感謝你，這項技術很有效！ – cantaffordretail 2012-04-26 05:19:33

你應該寫爲選擇框的onChange事件..

在這種功能的Java的功能，使用了window.location重定向到一個頁面..

如：

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

來源

2012-04-26 03:56:10

你能告訴我一個如何實現這個的例子嗎？謝謝。 – cantaffordretail 2012-04-26 04:07:21

HTML <選擇name = 「子類別」 ID = 「子類別」平變化= 「重定向（）」> \t <選項值= 「1」>選項1 <選項值= 「2」>選項2 – 2012-04-26 04:12:58

這似乎有希望！但我該如何替換'www.beddings.com'的值？ – cantaffordretail 2012-04-26 05:10:23

可以按如下方式我們行動起來吧ing 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()'>

來源

2012-04-26 03:56:23 KutePHP

謝謝。你能詳細解釋一下嗎？我對Javascript不是很熟悉。我只需要使用這個依賴表單的js！ – cantaffordretail 2012-04-26 04:03:01

感謝您的幫助！儘管如此，我仍然遇到了一些問題，我想我並沒有把代碼放在正確的位置。我應該在哪裏放置這些代碼？ – cantaffordretail 2012-04-26 04:20:15

您嵌套了功能。從函數dropdownlist（listindex）中取出函數redirect_subCategory（）並添加一個單獨的函數。 – KutePHP 2012-04-26 06:12:18

表單 - 如何提交併轉到url？

回答

相關問題