Show/hide elements using query string and javascript

JavaScript
1

I hope someone can help with what is probably a beginner js question.

I am implementing a sign up form from a third party, which specifies the return URL (which I can set), and the 3rd party system returns the status appended to the return url, for example www.website.com/pagename?error=email exists

The return URL document is a flat html page so I plan to handle these (rightly or wrongly) by using javascript to interrogate the query string and display messages as appropriate. I am a js novice (code is below) so I am certain there are better ways to write it.

My problem is that this works as desired when the code is uploaded through a content managed web page. However when a simple test html page is uploaded with the identical js code, the show and hide of content fails. What am I missing? Any help and constructive criticism welcome, thank you.

Here is the full javascript code for reference. There are corresponding div elements with IDs to show depending on the query string.

There is one line in the javascript that will be removed but is included currently to show the page URL is being captured correctly and that the interrogation of the URL is working as expected:

function myFunction() {
    var url = window.location.href
    var str = url;

    //look for "noemail"
    var patt = /noemail/g;
    var result = patt.test(str);

    //look for "name"
    patt2 = /name/g;
    result2 = patt2.test(str);

    //look for "invalid"
    patt3 = /invalid/g;
    result3 = patt3.test(str);

    //look for "exists"
    patt4 = /exists/g;
    result4 = patt4.test(str);
    var url = window.location.href;
    document.getElementById("demo").innerHTML = result + "<br>" + result2 + "<br>" + result3 + "<br>" + result4 + "<br>" + url;

 if (result) {
            $("#noemail").show();
      } else {
            $("#noemail").hide();
      }
 if (result2) {
            $("#name").show();
      } else {
            $("#name").hide();
      }
if (result3) {
            $("#invalid").show();
      } else {
            $("#invalid").hide();
      }
if (result4) {
            $("#exists").show();
      } else {
            $("#exists").hide();
      }
}
2

Are you sure the function is executing?

3

Hi, yes that’s what is confusing me, it definitely is on one page, but the identical code in another page isn’t - I will continue to investigate.

Thanks,
Matt

4

Hi Matt,

Here’s another way you could write the code that reduces some of the duplication:

// Get jQuery to execute the function when the page is loaded
$(function() {
  // create an array of valid error types
  var errorList = [
    'noemail',
    'name',
    'invalid',
    'exists'
  ];

  // search querystring for error param value
  var matches = window.location.search.match(/error=(\w+)/);

  // if there's an error param, and that param is in our list
  if (matches && errorList.indexOf(matches[1]) !== -1) {
    // show the matching element
    $('#' + matches[1]).show();
  }
});
5

Thanks Fretburner, I thought there would be a tidier way!

My confusion continues to be that identical code works in one place but does not elsewhere.

I have used the chrome developer tool to look and on the page where the .js doesnt work properly I am getting this error:

Uncaught ReferenceError: $ is not defined

for this line:

$(“#noemail”).hide();

I am sure I am missing something basic?!

I don’t have jquery scripts linked to the page, could it be that?

Thanks for the input,
Matt

6

Ah, yup that’ll be your problem… whenever you see a dollar sign ($) function being used that’s almost always a reference to jQuery. You’ll need to include jQuery in your page before the JS that uses it.

7

Hi all
Thanks for your helpful responses, I’ve solved it - the test page did not have jquery loaded to it - I mistakenly thought all the javascript I had written would work independently of jquery but obviously I was wrong and the show/hide elements are reliant on it.

All working now.

Cheers,
Matt

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.