How to redirect page when select option HTML, Laravel

Question

I need to redirect page when one of the option is selected.

<select required name="subject"  id="konu" class="form-control">
  <option value="" disabled>Choose Subject</option>
  <option value="Ask a question">Ask a question</option>
  <option value="Leave a comment">Leave a comment</option>
  <option value="Where to buy">Where to buy</option>
  <option value="Product Complaint">Product Complaint</option>
  <option value="Other">Other</option>
  <option {{ request('subject') == 'Request SDS' ? 'selected' : '' }}  value="Request SDS">Request SDS</option>
  <option value="Distributor">Request Distributorship</option>
</select>

Impaex · Answer 1 · 2022-06-15T12:29:09.987

I once needed this too and found that your question has already been answered.

If you're fine with using inline JavaScript, check out this answer: https://stackoverflow.com/a/7562129/10440010

If you prefer staying off of inline, check out this answer under the same question: https://stackoverflow.com/a/7562201/10440010

I hope this helps!

Update:

An easy way of making it work for specific options, is to make the onChange event check whether the value of the clicked option equal to something. In the snippet below, I make it work for all links starting with HTTPS.

HTML:

<select id="redirectSelect">
    <option value="NoLink" disabled>Please select</option>
    <option value="NoLinkEither">Option 1</option>
    <option value="https://www.google.com/">External Link</option>
</select>

JavaScript:

function redirect(goto) {
  var conf = confirm("Are you sure you want to go elswhere?");
  if (conf && goto != '') {
    window.location = goto;
  }
}

var selectEl = document.getElementById('redirectSelect');

selectEl.onchange = function() {
  if (this.value.startsWith('https')) {
    var goto = this.value;
    redirect(goto);
  }
};

Hopefully this helps you enough to solve your problem. If not, leave a comment and I am glad to help!

This code affect all options. Can I refer it for one specific option? — Farid Alishov, Jun 15 '22 at 11:26
I have added a few snippets to allow the behavior you asked for @FaridAlishov — Impaex, Jun 15 '22 at 12:29
Thank you, you are awesome codder, but I have something wrong, I posted my code previously used. It is not working also — Farid Alishov, Jun 15 '22 at 13:19

score 0 · Answer 2 · answered Jun 15 '22 at 13:17

I have a code previously woked.Here is select

<select required name="subject" id="konu" class="form-control">
                                <option value="" disabled>Choose Subject</option>
                                <option value="Ask a question">Ask a question</option>
                                <option value="Leave a comment">Leave a comment</option>
                                <option value="Where to buy">Where to buy</option>
                                <option value="Product Complaint">Product Complaint</option>
                                <option value="Other">Other</option>
                                <option {{ request('subject') == 'Request SDS' ? 'selected' : '' }}  value="Request SDS">Request SDS</option>
                                <option value="Distributor">Request Distributorship</option>
                            </select>

Here it is script.

$( document ).ready(function() {
        $("#konu").change(function(){
                var value = $("#konu").val();
                if(value=="distributor"){
                    window.location = 'be-our-distributor';
                }
            })
        });

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jun 16 '22 at 12:47
~window.location = 'be-our-distributor'; ~ change this to orignal URL as it doesn't exists — Kapil, Jun 16 '22 at 12:49

score 0 · Answer 3 · answered Jun 15 '22 at 13:39

0

For the second answer, the value used in your HTML differs from the value you're checking against in the JavaScript code.

In your HTML, it's Distributor and in your JavaScript code it's distributor. Mind the capital D.

answered Jun 15 '22 at 13:39

Impaex

106
8

score 0 · Answer 4 · answered Jun 15 '22 at 18:59

the problem is on your condition. Your value is Distributor and u using distributor. Js is case sensetive so you not getting any redirection. the code should look like

$( document ).ready(function() {
    $("#konu").change(function(){
            var value = $("#konu").val();
            if(value=="Distributor"){
                window.location = 'be-our-distributor';
            }
        })
    });

How to redirect page when select option HTML, Laravel

4 Answers4