0

我正在创建一个表单，客户可以通过该表单购买在线服务。
该表单包含一个带有“选择”和“选项”标签的下拉列表。
创建下拉列表以选择计费周期（6 个月、1 年、2 年、3 年）
我想根据选择的计费周期将用户发送到不同的地址。

例如：

  • 如果选择 6 个月并单击“立即订购”，客户将被发送到链接 1。
  • 如果选择 1 年并点击“立即订购”，客户将被发送到链接 2。
  • 如果选择 2 年并单击“立即订购”，客户将被发送到链接 3。

我想为每个计费周期的“立即订购”按钮动态更改 href 属性的值。
如何做同样的事情？

4

2 回答 2

0

正如您在下面的评论中提到的那样，您有 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()">

例子

于 2013-08-11T21:52:08.053 回答
0

尝试以下脚本。




<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-11T21:35:23.950 回答