根据无线电选择更改表单目的地

时间:2012-01-10 20:57:10

标签: javascript forms

我正在创建一个表单,并为用户提供三个选项。他们只能选择一个,根据他们的选择我想将它们发送到不同的页面。因此,如果他们选择选项1,他们转到abc.html,选项2他们转到def.html等等

       <form id="account" action="somepage.php">
        <p>Select an Option</p>
          <input type="radio" name="group1" id="basic" checked="checked" />

          <input type="radio" name="group1"  id="trade" />

          <input type="radio" name="group1"  id="pro" />

          <button class="s_button_1 s_main_color_bgr" type="submit"><span class="s_text">Continue</span></button>
        </form>

确定编辑添加新代码,实际上是我们的实际代码。 我们在register.php页面上,为用户提供三个级别的注册(他们只能选择一个) 所以URL是www.somedomain.com/register.php

<form id="account">
      <div class="s_row_3 clearfix">
        <p>Registration Options: choose your account type</p>
        <label class="s_radio" for="basic">
          <input type="radio" name="group1" id="basic" checked="checked" value="basic.php" onclick="setLocation(this)"/>
          <strong>Register a Basic Account</strong>&nbsp;<a rel="prettyPhoto[ajax]" href="/infopops/basic.php?ajax=true&width=100%&height=100%"><span class="info">&nbsp;</span></a>
        </label>
        <label for="trade">
          <input type="radio" name="group1"  id="trade" value="trade.php" onclick="setLocation(this)"/>
          <strong>Register a Trade Account</strong>&nbsp;<a rel="prettyPhoto[ajax]" href="/infopops/trade.php?ajax=true&width=100%&height=100%"><span class="info">&nbsp;</span></a>
        </label></a>
        </label>
         <label for="pro">
          <input type="radio" name="group1"  id="pro" value="pro.php" onclick="setLocation(this)"/>
          <strong>Register a Pro Account</strong>&nbsp;<a rel="prettyPhoto[ajax]" href="/infopops/pro.php?ajax=true&width=100%&height=100%"><span class="info">&nbsp;</span></a>
        </label></a>
        </label>
        <br />
        <p>By creating an account you will be able to shop faster, be up to date on an order's status, and keep track of the orders you have previously made.</p>

      </div>
      <span class="clear border_ddd"></span>
      <br />
      <button class="s_button_1 s_main_color_bgr" type="submit"><span class="s_text">Continue</span></button>
    </form>

Js是:

<!--form script-->
<script type="text/javascript">
            function setLocation(element) {
            document.forms[0].action = element.value
    }
</script>
<!--//form script end-->

1 个答案:

答案 0 :(得分:2)

使用jQuery更容易,但这是一个基本版本:

<input type="radio" name="group1" id="basic" value="a.html" onclick="setLocation(this)" checked="checked" />

function setLocation(element) {
        document.forms[0].action = element.value
}