フォーム - 提出する方法とURLに行く？

私はこのフォームを持っています。これは従属フィールドの私のニーズに最適です。私がしたいのは、誰かがサブカテゴリー（すなわち：寝具）の1つを選択すると、それらはURLに転送されます（例：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でタグ付けされていますか？ –

PHPとHTMLを一緒に使用していますか？私はあなたのコードでPHPのタグを見つけることができない！ – Sara

実際にフォームにPOSTすることを望んでいるかどうかわかりません。ない場合は、URLへナビゲートする機能を作成し、あなたのターゲットパスを保存するためにあなたのオプションの構造を使用して、あなたの2番目のドロップダウンすなわちの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

これは一つです！本当にありがとう、このテクニックは動作します！ – cantaffordretail

あなたがページにリダイレクトするためにwindow.locationのを使用して、その関数で..

を選択ボックスのonChangeイベント用のJava関数を記述する必要があります..

例：

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

出典

2012-04-26 03:56:10

これを実装する方法の例を教えてもらえますか？ありがとう。 – cantaffordretail

HTMLの \t <オプション値= "1">オプション1 <オプション値= "2">オプション2 –

これはと思われます有望！「www.beddings.com」の値をどのように置き換えるのですか？ – cantaffordretail

たちを次のようにあなたはそれを行うことができます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

助けてくれてありがとう！私はまだいくつかの問題を抱えている、私は正しい場所にコードを配置していないと思う。このコードはどこに置く必要がありますか？ – cantaffordretail

関数をネストしました。 function dropdownlist（listindex）から関数redirect_subCategory（）を取り出し、別の関数を追加します。 – KutePHP

フォーム - 提出する方法とURLに行く？

答えて

関連する問題