Multiple if else statements within a function - form only redirecting to top listed option

Question

I am using contact form 7 on this page: https://www.thenetwork360group.com/cilt-exam-series/. I am trying to redirect the user based on what exam they enrol on at the end.

I realise having this many if / else statements in one function is messy. I have tried multiple things, I tried switch statements but the form did not redirect after sending.

This is currently what I have:

document.addEventListener( 'wpcf7submit', function( event ) {
    if ( '5686' == event.detail.contactFormId ) {


        var lt2 = document.getElementById("_lt2").value;
        var lt3 = document.getElementById("_lt3").value;
        var lt5 = document.getElementById("_lt5").value;
        var om3 = document.getElementById("_om3").value;
        var om5 = document.getElementById("_om5").value;

      if (lt2 == "1 - £44") {
        location = 'https://www.thenetwork360group.com/cart/?add-to-cart=5683';
      } else if (lt2 == "2 - £88") {
          location = 'https://www.thenetwork360group.com/cart/?add-to-cart=5684';
      } else if (lt2 == "3 - £132") {
          location = 'https://www.thenetwork360group.com/cart/?add-to-cart=5682';
      } else if (lt3 == "1 - £72") {
          location = 'https://www.thenetwork360group.com/cart/?add-to-cart=5707';
      } else if (lt3 == "2 - £144") {
          location = 'https://www.thenetwork360group.com/cart/?add-to-cart=5708';
      } else if (lt5 == "1 - £74") {
          location = 'https://www.thenetwork360group.com/cart/?add-to-cart=5709';
      } else if (lt5 == "2 - £148") {
          location = 'https://www.thenetwork360group.com/cart/?add-to-cart=5710';
      } else if (lt5 == "3 - £222") {
          location = 'https://www.thenetwork360group.com/cart/?add-to-cart=5711';
      } else if (om3 == "1 - £72") {
          location = 'https://www.thenetwork360group.com/cart/?add-to-cart=5712';
      } else if (om5 == "1 - £74") {
          location = 'https://www.thenetwork360group.com/cart/?add-to-cart=5713';
      } else if (om5 == "2 - £148") {
          location = 'https://www.thenetwork360group.com/cart/?add-to-cart=5714';
      } else if (om5 == "3 - £222") {
          location = 'https://www.thenetwork360group.com/cart/?add-to-cart=5715';
      }
    }

}, false )

The ID's related to the form, so var lt2 related to the following ID:

[select lt2 id:_lt2 "1 - £44" "2 - £88" "3 - £132"]

I am expeting the user to be redirected based on which option they have selected, above. However, it only seems to be redirecting to the first option.

Any advice would be great.

Have you tried adding a `console.log()` to see what those values actually are? — Pointy, May 30 '19 at 16:39
@epascarello I have updated the question. lt2 is my variable name which get an element by id - the id being in the contact form 7 itself — OverdueOrange, May 30 '19 at 17:14
Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — imvain2, May 30 '19 at 17:25
@epascarello sorry about that, it is a contact form 7 select item — OverdueOrange, May 30 '19 at 17:25
The problem is you aren't getting the selected value, just the first value. I would read the question that I linked to as this comes down to being a duplicate of it. — imvain2, May 30 '19 at 17:27
One possibility is the check that you put at the top - '5686' == event.detail.contactFormId - is only true when lt2 == "1 - £44" is true. — Zachary Brooks, May 30 '19 at 17:33
@imvain2 I think you are right, how could I possibly fix my code to replicate that — OverdueOrange, May 30 '19 at 17:37
@ZacharyBrooks what other way could i write the code so that the first line is not always true — OverdueOrange, May 30 '19 at 17:38
@Pointy I've checked the values through console.log and they are correct. — OverdueOrange, May 30 '19 at 17:49
@user7623641 I am not sure what steps you need to take. You should be debugging to first ensure what the real problem is, in order to check, make sure that this function is calling every time you want it to. You can use the JS method console.log("") inside the method, this way it logs to the console every time it calls. Then you can see if it's calling when you want it to. Then try logging the values and seeing if they are what you expect. If not - find the problem! Good luck -- it is difficult to find the solution when we can't run the source code. — Zachary Brooks, May 30 '19 at 18:07
@user7623641 I do now know what is the problem. The problem is the logic of the `if` statements themselves combined with having 5 different selects. Since you are trying to run if statements on multiple selects, the if statements for your second to fifth selects never get checked because the first one will always have a value that meets your first if statement or the first/second else if statement, nothing after that will ever be processed. One solution with javascript set the value of the options to the add-to-cart id that is in the redirect URLs. The redirect URL generation is rather trivial — imvain2, May 31 '19 at 17:31

score 0 · Answer 1 · answered May 30 '19 at 17:28

0

Have you tried doing

window.location = url;

instead of

location = url;

Just to point out, you are not handling every single scenario. What happens when the value is not any of them? Is that a possibility? You should also consider a different way to design this - for instance, these elements can have an ID or other attribute that you can validate then simply do:

window.location = 'https://www.thenetwork360group.com/cart/?add-to-cart='+id;

answered May 30 '19 at 17:28

Zachary Brooks

303
2
9

Yes I have tried window.location but that did not work. I will try what you are saying and get back to you. – OverdueOrange May 30 '19 at 17:41

Multiple if else statements within a function - form only redirecting to top listed option

1 Answers1