CODEWITHSUNDEEP
javascripthtmlcss
macano
macano

Reputation: 27

Change option value into href?

Hi I downloaded some html template which I am trying to readjust and I have some code form like this, is it possible that I can change the option "value" into "href" so when client select lets say "Standard Access" and click on the button Buy Now to redirect to the paypal lets say? Here is the code :

 <div class="modal-body">
          <form method="POST" action="#">
            <div class="form-group">
              <input type="text" class="form-control" name="your-name" placeholder="Your Name">
            </div>
            <div class="form-group">
              <input type="text" class="form-control" name="your-email" placeholder="Your Email">
            </div>
            <div class="form-group">
              <select id="ticket-type" name="ticket-type" class="form-control" >
                <option value="">-- Select Your Ticket Type --</option>
                <option value="standard-access">Standard Access</option>
                <option value="pro-access">Pro Access</option>
                <option value="premium-access">Premium Access</option>
              </select>
            </div>
            <div class="text-center">
              <button type="submit" class="btn">Buy Now</button>
            </div>
          </form>
        </div>

Upvotes: 1

Views: 61

Answers (2)

Bur&#231;in G&#252;len
Bur&#231;in G&#252;len

Reputation: 21

You can add onsubmit listener to your form.

<form method="POST" action="#" onsubmit="myFunction()">...
</form>

<script>
myFunction(){
    var x = document.getElementById("ticket-type").value;
    if (x== 'standard-access') {window.location.href = "http://www.URL1.html";}
    else if (x== 'pro-access') {window.location.href = "http://www.URL2.html";}
    return false; // to prevent default submit
}
</script>

Upvotes: 0

quez
quez

Reputation: 58

Here you have some example. Probably it's possible to make it better, but I don't know the context.

$('#confirmButton').on('click', function() {
  const href = $('#redirect').val();
  window.location.href = href;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="redirect">
  <option value="" disabled selected>-- Select Your Ticket Type --</option>
  <option value="https://www.google.com">Google</option>
  <option value="https://stackoverflow.com">Stackoverflow</option>
</select>
<button type="button" id="confirmButton">Confirm</button>

Upvotes: 3

Related Questions