0

I don't have much experience with JavaScript. Just PHP. I've been trying to create a JavaScript form that doesn't capture any information. It just redirects the user to a URL based on the State they select in a dropdown.

So if the user enters Alabama in the State dropdown list they get redirected to a set URL. So the code would have 50 URL possible redirects - one for each State.

I've been searching high and low and every attempt I make is horrific - if anyone has any advice on how to this it would be much appreciated.

Daniel
  • 1
  • 1
    Possible duplicate of [How can I redirect to specific URL on select change?](https://stackoverflow.com/questions/31525520/how-can-i-redirect-to-specific-url-on-select-change) – Garfield Oct 24 '17 at 05:25

3 Answers3

0
<select class="form-control" name="stateId" id="stateId">
<option value="" selected="" disabled="">Select Country</option>
<option value="1">ABC</option>
<option value="2">DEF</option>
<option value="3">GHI</option>


$('#stateId').change(function(){

    // get dropdown value to variable
    var ID = $(this).val();

    // redirect user with following dynamic url
    window.location.href = "localhost/view/steteID/" + ID;

    // or
    window.location.href = "../view/steteID/" + ID;

    // this is optional, if you required ajax call in future
    $.ajax({
        type: "get",
        dataType: "json",
        url: 'path/'+ID,

        success:function(response){
            $('#districtId').empty();
            response[0].subProducts.forEach(function(elem,index){
                $('#districtId').append('<option value="'+ elem.code +'"></option>');
            });
        },
        error:function(xhr){
            console.log(xhr);
        }
    });
});
mangeshbhuskute
  • 140
  • 7
0

You can write a method which will be fired upon the change of the select drop down and according to the value you can redirect the user.

Here is a PURE JAVASCRIPT implementation. 

document.addEventListener('DOMContentLoaded',function() {
    document.querySelector('select[name="states_select"]').onchange=changeEventHandler;
},false);


function changeEventHandler(event) {
    if(!event.target.value) alert('Please Select state');
    else{
      alert('You like ' + event.target.value);
      //handle the redirect here
      // window.location = "YOUR_REDIRECT_URL";
    }
}
<select name="states_select">
  <option> Select a State </option>
  <option value="State 1"> State 1 </option>
  <option value="State 2"> State 2 </option>
  <option value="State 3"> State 3 </option>
</select>

Read more about the change event here

Partha Roy
  • 1,575
  • 15
  • 16
0

$(function() {
    $('#websites').change(function() {
      this.action = document.getElementById('urls').value;
       this.submit();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="websites" >
<select  id="urls">
                <option value="https://google.com">Google</option>
                <option value="https://stackoverflow.com">Stack overflow</option>
                 <option value="https://example.net">Example net</option>
</select>
</form>

Here you can achieve this

Optional
  • 4,387
  • 4
  • 27
  • 45