当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - How to Create A jQuery URL Redirect Based On Dropdown Selection Without Using Select ID?

问题描述:

Thanks in advance for your help with this! :)

I need to redirect visitors to different urls when they click the submit button, based on the option they select in a dropdown.

But the difficulty I have is that I'm forced to use a website builder that doesn't let me modify the html. But it does let me add javascript code to the page. So the solution needs to be exclusively javascript/jQuery.

So I need to use javascript or jQuery to create the url redirect, based on the selected option in a dropdown (that doesn't have a selection id). Take a look at the code below.

Here's the HTML for the dropdown:

<div class="de elInputWrapper elSelectFormBox de-editable de-input-block elAlign_center elMargin0" id="tmp_select_input-89382" data-de-type="select-input" data-de-editing="false" data-title="select input form" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" type="custom_type" style="margin-top: 10px; outline: none; cursor: pointer;">

<label class="elInputLabel">

<select name="custom_type" class="elInput elSelectInput elInput100 elAlign_left elInputMid elInputStyl0 elInputBG1 elInputBR5 elInputI0 elInputIBlack elInputIRight required0 elInput-Select1" data-type="extra" data-custom-type="Dropdown">

<option value="I want to...">I want to...</option>

<option value="Refinance">Refinance</option>

<option value="Purchase a home I found">Purchase a home I found</option>

<option value="Get pre-approved for a mortgage">Get pre-approved for a mortgage</option>

</select>

</label>

</div>

Here's the HTML for the button:

I can change the href on the button.

<div class="de elBTN elMargin0 elAlign_left de-editable" id="tmp_button-92288-160" data-de-type="button" data-de-editing="false" data-title="button" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" style="margin-top: 0px; outline: none; cursor: pointer; display: block; font-family: Lato, Helvetica, sans-serif !important;" data-google-font="Lato">

<a href="#" class="elButton elButtonSize1 elButtonColor1 elButtonFluid elButtonPadding2 elButtonRounded elButtonNoShadow" style="color: rgb(255, 255, 255); background-color: rgb(121, 172, 50); font-size: 23px;">

<span class="elButtonMain">Let's Go!</span>

<span class="elButtonSub"></span>

</a>

</div>

And here's the jQuery code I'm currently trying to use:

<script src=' https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js'‌>

console.log('hey-OutsideClickFunction');

/*Redirect based on Dropdown selection*/

$("#tmp_button-92288-160").click(function(){

console.log('hey-InsideClickFunction');

if($('select[name=custom_type]').val() == 'Refinance')

{

window.location ='http://bing.com';

}

if($('select[name=custom_type]').val() == 'Purchase a home I found')

{

window.location ="http://google.com";

}

if($('select[name=custom_type]').val() == 'Get pre-approved for a mortgage')

{

window.location ="http://yahoo.com";

}

document.getElementById("tmp_select_input-89382").click();

})

</script>

Additional jQuery Attempts

I also tried replacing $("#tmp_select_input-89382").attr("action","yahoo.com"); with $(location).attr('href', 'yahoo.com'); and with window.location.href = "http://yahoo.com"; and with window.location = "http://yahoo.com";

With all of these, the page just reloads when I click the button.

Javascript Code I Tried To Use

<script>

document.getElementById("#tmp_button-92288-160").addEventListener("click",‌ function(){

var option = document.getElementsByTagName("select")[0];

if(option.value =="Refinance"){

window.open("http://stackoverflow.com/");}

else if(option.value =="Purchase a home I found"){

window.open("https://youtube.com/");}

else{window.open("http://www.bing.com/");

}}

</script>

But the page just reloads when I click the button.

网友答案:

Use window.location method

 $("#tmp_button-92288-160").click(function() {

  if($('select[name=custom_type]').val() == 'Refinance')
  {
   window.location ='http://bing.com'
  }
  if($('select[name=custom_type]').val() == 'Purchase a home I found')
  {
   window.location ="http://google.com";
  }    
  if($('select[name=custom_type]').val() == 'Get pre-approved for a       mortgage')
  {
   window.location ="http://yahoo.com";
  }      
   document.getElementById("tmp_select_input-89382").click(); 

 }
网友答案:

As you cannot edit the html one of the solution for your answer can be $('.elButtonMain).click(function(){})

网友答案:

A quick example in pure Javascript:

<select id="sex">
<option value="val1">variant one</option>
<option value="val2">variant two</option>
<option value="val3">variant three</option>
</select>

<button  type="submit" onclick="navigate()">
Press me
</button>

function navigate(){

var option = document.getElementById("sex");
if(option.value =="val1"){
window.open("http://stackoverflow.com/");
}else if(option.value =="val2"){
window.open("https://youtube.com/");
}else{
window.open("http://www.bing.com/");
}}

https://jsfiddle.net/mxytL032/

网友答案:

you need to stop propagating the event to child element <a>

$("#tmp_button-92288-160").click(function(e) { e.stopPropagation(); });

分享给朋友:
您可能感兴趣的文章:
随机阅读: