Как получить разную ссылку динамически для каждого значения тега параметра?

Я создаю форму, с помощью которой клиенты могут приобрести онлайн-сервис.
Форма содержит раскрывающийся список с тегом 'select' & 'option.
Выпадающий список создан для выбора платежного цикла (6 месяцев, 1 год, 2 года, 3 года)
Я хочу отправить пользователя на разные адреса в зависимости от выбора биллингового цикла.Как получить разную ссылку динамически для каждого значения тега параметра?

Например:

Если выбран 6 месяцев и «Заказать сейчас» нажата, то клиент будет отправить ссылку 1.
Если выбран 1 год и «Заказать сейчас» щелкают , клиент будет отправить ссылку 2.
Если выбран 2-х лет и «Заказать сейчас» щелкают, клиент будет отправлен на ссылку 3.

Я хочу, чтобы изменить значение HREF атрибут динамически для ORD ER NOW для каждого биллингового цикла.
Как сделать то же самое?

источник

2013-08-11 Andi

Попробуйте выполнить следующий скрипт.

 

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> 
</head> 
<body> 

<select id="selProduct"> 
    <option value=1>6 mths</option> 
    <option value=2>1 yr</option> 
</select> 

<input type=button value="Order Now" id="btnOrder" /> 

<script type="text/javascript"> 

$(document).ready(function(){ 

    $('#btnOrder').click(function(){ 
     if($('#selProduct').val() == '1') 
      window.location='http://msn.com'; 
     if($('#selProduct').val() == '2') 
      window.location='http://yahoo.com'; 
    }); 
}); 


</script> 

</body>  
    </html>

источник

2013-08-11 21:35:23 DanielZ

Как вы упомянули в своем комментарии ниже у вас есть 3 формы, жаль, что я не был проинформирован об этом, как ваш вопрос не утверждает, что есть больше чем один, так что я обновил свой ответьте, см. ниже.

Javascript

<script type="text/javascript"> 
    var order = function() { 
     //Check which option was selected for product_1 and re-direct 
     if (document.getElementById("product_1").value == "6 months"){ document.getElementById("product_1").value = "Select"; window.location.replace('product1_6months.php','_blank'); } 
     if (document.getElementById("product_1").value == "1 year"){ document.getElementById("product_1").value = "Select"; window.location.replace('product1_1year','_blank'); } 
     if (document.getElementById("product_1").value == "2 year"){ document.getElementById("product_1").value = "Select"; window.location.replace('product1_2year','_blank'); } 
     if (document.getElementById("product_1").value == "3 year"){ document.getElementById("product_1").value = "Select"; window.location.replace('product1_3year','_blank'); } 

     //Check which option was selected for product_2 and re-direct 
     if (document.getElementById("product_2").value == "6 months"){ document.getElementById("product_2").value = "Select"; window.location.replace('product2_6months.php','_blank'); } 
     if (document.getElementById("product_2").value == "1 year"){ document.getElementById("product_2").value = "Select"; window.location.replace('product2_1year.php','_blank'); } 
     if (document.getElementById("product_2").value == "2 year"){ document.getElementById("product_2").value = "Select"; window.location.replace('product2_2year.php','_blank'); } 
     if (document.getElementById("product_2").value == "3 year"){ document.getElementById("product_2").value = "Select"; window.location.replace('product2_3year.php','_blank'); } 

     //Check which option was selected for product_3 and re-direct 
     if (document.getElementById("product_3").value == "6 months"){ document.getElementById("product_3").value = "Select"; window.location.replace('product3_6months.php','_blank'); } 
     if (document.getElementById("product_3").value == "1 year"){ document.getElementById("product_3").value = "Select"; window.location.replace('product3_1year.php','_blank'); } 
     if (document.getElementById("product_3").value == "2 year"){ document.getElementById("product_3").value = "Select"; window.location.replace('product3_2year.php','_blank'); } 
     if (document.getElementById("product_3").value == "3 year"){ document.getElementById("product_3").value = "Select"; window.location.replace('product3_3year.php','_blank'); } 
    } 
</script>

HTML

<form action="" method="post" name="product_1"> 
<select id="product_1"> 
    <option value="Select" selected>Select</option> 
    <option value="6 months">6 months</option> 
    <option value="1 year">1 year</option> 
    <option value="2 year">2 year</option> 
    <option value="3 year">3 year</option> 
</select> 
</form> 

<form action="" method="post" name="producs_2"> 
<select id="product_2"> 
    <option value="Select" selected>Select</option> 
    <option value="6 months">6 months</option> 
    <option value="1 year">1 year</option> 
    <option value="2 year">2 year</option> 
    <option value="3 year">3 year</option> 
</select> 
</form> 

<form action="" method="post" name="product_3"> 
<select id="product_3"> 
    <option value="Select" selected>Select</option> 
    <option value="6 months">6 months</option> 
    <option value="1 year">1 year</option> 
    <option value="2 year">2 year</option> 
    <option value="3 year">3 year</option> 
</select> 
</form> 

<input name="order" type="button" value="Order Now" onClick="order()">

Example

источник

2013-08-11 21:52:08 Malcolm

Благодаря Malcolm, этот код работает нормально, но проблема, у меня есть 3 формы в одной и той же странице для трех разные продукты, поэтому этот код работает только для 1-й формы. Пожалуйста, предложите подходящий ответ. – Andi

@ Andi Я обновил свой ответ, включив 3 формы, надеюсь, что это поможет вам. – Malcolm

Как получить разную ссылку динамически для каждого значения тега параметра?

ответ

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