Get value of select box on submit and append it with a URL and redirect to that URL after append

Question

I have a select box and have only one option in it (for now). What is want to achieve is that when a user selects that option, its value should be appended to a URL and the redirect to that URL below is the code I am trying.

  function firstbox()
  {
    var f_box_value = document.getElementById('first-box');
    window.location.href = "https://theultimatesleeptherapy.a.wpstage.net/checkout/?add-to-cart="+f_box_value;
  }

      <div class="offer-boxx">
    <h3 class="text-center">1 BOTTLE</h3>
    <div class="text-center">
      <img src="http://159.65.108.187/wp-content/uploads/image1.png" width="100%">
    </div>
    <table class="price-details" width="100%">
      <tr>
        <td><del>$34.99</del></td>
        <td><h1>$28</h1></td>
        <td><span>+ $4.99 S&H</span></td>
      </tr>
    </table>
    <div class="offer-details">
      <h5>Flavor:</h5>
      <select id="first-box" name="first-box">
        <option value="12345">Rainbow Freeze</option>
      </select>
    </div>
    <div class="action-btn">

     <button onclick="firstbox()" type="button">BUY NOW</button>
    </div>
  </div>

It is redirecting but not giving the required result, Instead of showing the value of the variable, it shows something like this at the end of the url [object%20HTMLSelectElement]

`var f_box_value = document.getElementById('first-box');` is not giving you `f_box_value` - it's giving you `f_box` - you then need to get the value from input — freedomn-m, Feb 16 '21 at 08:11
A bit of debugging would show you that it's clearly not text and your own output tells you this `HTMLSelectElement` — freedomn-m, Feb 16 '21 at 08:13

Get value of select box on submit and append it with a URL and redirect to that URL after append

0 Answers0