Форма - Как подать и перейти к URL?

У меня есть эта форма ниже, которая идеально подходит для моих потребностей с зависимыми полями. То, что я хотел бы сделать, это когда кто-то выбирает одну из подкатегорий (то есть: постельные принадлежности), они затем будут перенесены на 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 для формы; если нет, то вы можете использовать структуру Option для хранения целевых путей, создать функцию для перехода к ссылке, и вызвать из события 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

Вы должны написать функцию Java для OnChange события Выберите бокса ..

В этой функции, использование window.location для перенаправления на страницу ..

Например:

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

источник

2012-04-26 03:56:10

Можете ли вы показать мне пример того, как я буду реализовывать это? Благодарю. – cantaffordretail

HTML <выберите имя = "подкатегория" ID = "подкатегория" OnChange = "перенаправлять()"> <значения параметра = "1"> \t Option1 <параметр значение = "2"> Option2 –

Это кажется многообещающе! но как заменить значения для «www.beddings.com»? – cantaffordretail

Вы можете сделать это следующим образом нам 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; 

} 
}

Создать функцию и сохранить код выше внутри него. On onchange event select box вызывает функцию as -

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

источник

2012-04-26 03:56:23 KutePHP

Спасибо. Вы можете остановиться на этом? Я не очень хорошо знаком с Javascript. Мне просто нужно использовать js для этой зависимой формы! – cantaffordretail

Спасибо за помощь! У меня все еще есть проблемы, но я думаю, что я не помещаю код в нужное место. Где я должен разместить этот код? – cantaffordretail

Вы вложили функции. Возьмите функцию redirect_subCategory() из раскрывающегося списка функций (listindex) и добавьте отдельную функцию. – KutePHP

Форма - Как подать и перейти к URL?

ответ

Смежные вопросы