how to make a function out of img (which is href link ) and radio button (value or id) and goes to the next page

Question

I have this code:

<div id="section">
  <h3 for="horoscope">choose horoscope</h3>
  <table>
    <tr>
      <td>
        <input type="radio" name="period" value="week" id="week" checked/>
        <b>'weekly</b>

        <td>
          <input type="radio" name="period" value="month" id="month" />
          <b>monthly</b>

          <td>
            <input type="radio" name="period" value="year" id="year">
            <b>yearly</b>
          </td>
    </tr>
  </table>

  <table id="horoscope" cellpadding="10">

    <td><a href="Aries.html"><img src="https://cdn.pixabay.com/photo/2012/04/18/01/12/aries-36388_960_720.png" height="50px" width="53px" alt="aries" /></a>
    </td>
    <td>
      <a href="Taurus.html"><img src="https://cdn.pixabay.com/photo/2012/04/18/01/14/taurus-36397_960_720.png" height="50px" width="48px" alt="Taurus" /></a>
    </td>
    <td>
      <a href="Gemini.html"><img src="https://cdn.pixabay.com/photo/2012/04/18/01/13/gemini-36391_960_720.png" height="50px" width="49px" alt="Gemini" /></a>
    </td>
    </tr>
  </table>

so I want to do function that gets the period (monthly for example) and the sign (Taurus for exmaple) and on the next page it will go to the Taurus page and the place of monthly.

Another example: I choose Weekly and Aries-> in the next page-> weekly aries

How to do that?

Answer 1

just do like this

your HTML code

<div id="section">
        <h3 for="horoscope">choose horoscope</h3>
        <table>
            <tr>
                <td>
                    <input type="radio" name="period" value="week" id="week" checked/>
                    <b>'weekly</b>

                <td>
                    <input type="radio" name="period" value="month" id="month"/>
                    <b>monthly</b>

                <td>
                    <input type="radio" name="period" value="year" id="year">
                    <b>yearly</b>
                </td>
            </tr>
        </table>

        <table id="horoscope" cellpadding="10">
            <tr>
                <td><img onclick="redirect('Aries.html')"
                         src="https://cdn.pixabay.com/photo/2012/04/18/01/12/aries-36388_960_720.png" height="50px"
                         width="53px" alt="aries"/></td>
                <td><img onclick="redirect('Taurus.html')"
                         src="https://cdn.pixabay.com/photo/2012/04/18/01/14/taurus-36397_960_720.png" height="50px"
                         width="48px" alt="Taurus"/></td>
                <td><img onclick="redirect('Gemini.html')"
                         src="https://cdn.pixabay.com/photo/2012/04/18/01/13/gemini-36391_960_720.png" height="50px"
                         width="49px" alt="Gemini"/></td>
            </tr>
        </table>
    </div>

your script

<script>
function redirect(link) {
    window.location.href=link+"#"+$("input[name='period']:checked").val();
}
</script>