Redirect thank you messages based on conditional form field selects using javascript

Question

I am very new to javascript so this may be easy to some. I am trying to generate a thank you message based on if a visitor selects option "0 to 120,000" AND "option 0 to 6 months". Any help with this is greatly appreciated.

function redirect() {
  var businessrev = document.getElementById("annual_business_revenue");
  var time = document.getElementById("Time")
  for (var i = 0; i < selections.options.length; i++) {
    if ((businessrev.options[i].selected == 1) && (time.options[i].selected == 1)) {
      location.href = "http://www.bing.com";
    } else {
      location.href = "http://www.google.com";
    }
  }
}

<form action="javascript:redirect();">
  <select name="annual_business_revenue">
    <option value="revenue1">0 to 120,000</option>
    <option value="revenue2">NOT 0 to 120,000</option>
  </select>
  <select name="Time">
    <option value="time1">0 to 6months</option>
    <option value="time2">NOT 0 to 6months</option>
  </select>
  <input type="submit" value="Submit" />
</form>

This is a live version of the form through Pardot: http://go.pardot.com/l/33192/2016-07-07/6k5tx7 — Katy H., Jul 13 '16 at 11:24

score 0 · Answer 1 · edited Jul 13 '16 at 11:04

Use this. Hope it will help.

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function abc() {
  var businessrev = document.getElementById("annual_business_revenue");
  var time = document.getElementById("Time");

  if((businessrev.selectedIndex=="0") && (time.selectedIndex =="0"))
         location.href = "http://www.bing.com";
 else
  location.href = "http://www.w3schools.com/";

return false;
}
</script>

<form onsubmit="return abc()">
  <select id="annual_business_revenue">
    <option value="revenue1">0 to 120,000</option>
    <option value="revenue2">NOT 0 to 120,000</option>
  </select>
  <select id="Time">
    <option value="time1">0 to 6months</option>
    <option value="time2">NOT 0 to 6months</option>
  </select>
  <input type="submit" value="Submit" />
</form>
</body>
</html>

Why change the name of the function.? Anyway your code is now exactly what I suggested in a comment before I decided to create a better version :) — mplungjan, Jul 13 '16 at 11:05

mplungjan · Answer 2 · 2016-07-13T11:56:04.633

I suggest this version instead

you should not use getElementById on a name - instead use it on an ID
no need to submit a form if you are not going to the form action
no need to loop to get a value from a select
test the values instead of the index of the values

window.onload=function() {
  document.getElementById("goBut").onclick=function() {
    var businessrev = document.getElementById("annual_business_revenue").value;
    var time = document.getElementById("Time").value;
    if (businessrev=="revenue1" && time=="time1") {
        alert("Great choice");
        location.href = "http://www.bing.com";
    } else {
        location.href = "http://www.google.com";
    }
  }
}

<select id="annual_business_revenue">
    <option value="revenue1">0 to 120,000</option>
    <option value="revenue2">NOT 0 to 120,000</option>
  </select>
  <select id="Time">
    <option value="time1">0 to 6months</option>
    <option value="time2">NOT 0 to 6months</option>
  </select>
  <input id="goBut" type="button" value="Submit" />

To fix your POSTED version you need to do what I suggested in the first comment I made before I wrote a better version:

use onsubmit and return false
still use ID instead of name when you use document.getElementById
note that collections and arrays start at 0 in JavaScript - I think you are missing a "please select" option

function redirect() {
  var businessrev = document.getElementById("annual_business_revenue"),
      time = document.getElementById("Time");

  if (businessrev.selectedIndex == 0 && time.selectedIndex == 0) {
      alert("Good choice");
      location.href = "http://www.bing.com";
  } else {
      location.href = "http://www.google.com";
  }
  return false; // cancel submit
}

<form onsubmit="return redirect();">
  <select id="annual_business_revenue">
    <option value="revenue1">0 to 120,000</option>
    <option value="revenue2">NOT 0 to 120,000</option>
  </select>
  <select id="Time">
    <option value="time1">0 to 6months</option>
    <option value="time2">NOT 0 to 6months</option>
  </select>
  <input type="submit" value="Submit" />
</form>

Using your form:

window.onload=function() {
  document.getElementById("pardot-form").onsubmit=function() {
    var businessrev = this.elements[1], // second form element
        time = this.elements[2]; // third
    if (businessrev.selectedIndex == 1 && time.selectedIndex == 1) { // first choice
      alert("Good choice");
    }
  }
}

<form id="pardot-form">
  <input type="text" name="emial"/>
  <select>
    <option value="">Please select</option>
    <option value="revenue1">0 to 120,000</option>
    <option value="revenue2">NOT 0 to 120,000</option>
  </select>
  <select>
    <option value="">Please select</option>
    <option value="time1">0 to 6months</option>
    <option value="time2">NOT 0 to 6months</option>
  </select>
  <input type="submit" value="Submit" />
</form>

This so close. I am scripting a Pardot form that I cannot manipulate. I will create a live link and resubmit so you can see. — Katy H., Jul 13 '16 at 11:20
What is missing and what can't you do? If you can insert a script, then you might need to addEventListener instead of window.onload — mplungjan, Jul 13 '16 at 11:28
Please see third version which will work on your form without knowing the ID or name of the fields. I just grab the second and third elements (the two selects) — mplungjan, Jul 13 '16 at 11:37
Sorry, what are you posting? With that code my code is `window.onload=function() { document.getElementsByTagName("form")[0].onsubmit=function() { var businessrev = this.elements[0], time = this.elements[1]; if (businessrev.selectedIndex == 0 && time.selectedIndex == 0) { // first choice alert("Good choice"); } } }` — mplungjan, Jul 13 '16 at 14:50
I actually don't need an alert. I need a thank you url to populate based on 2 separate form selections. If they select a specific time in business and specific revenue, trigger thank you url to page A, if not the default thank you url B should populate. Since it is so small, do you think a nested switch case would work here? — Katy H., Jul 13 '16 at 16:25
Just remove the alert and change the bing to thankyou note 1 and google to thankyou note 2. You will need to use window.open or target the form to _blank if you want to submit AND show note — mplungjan, Jul 13 '16 at 16:37

score 0 · Accepted Answer · answered Jul 21 '16 at 11:50

This is what worked for me:

window.onload=function(){
var annualRevenue = 'annual_business_revenue'; 
var email = 'email';
var timeInBusiness = 'Time';

if((timeInBusiness == '0 to 6months' || annualRevenue == '0 to 120,000' )){
document.location='http://google.com';
}else{
document.location='http://bing.com';
} 
};

<select id="annual_business_revenue">
    <option value="revenue1">0 to 120,000</option>
    <option value="revenue2">NOT 0 to 120,000</option>
  </select>
  <select id="Time">
    <option value="time1">0 to 6months</option>
    <option value="time2">NOT 0 to 6months</option>
  </select>
  <input id="goBut" type="button" value="Submit" />

Redirect thank you messages based on conditional form field selects using javascript

3 Answers3