1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Development Html form - Wifi Landing page

Discussion in 'Software' started by seebul, 3 May 2013.

  1. seebul

    seebul Active Member

    Joined:
    9 Aug 2005
    Posts:
    1,211
    Likes Received:
    1
    Hi! Need a little bit of help from someone...

    I have a wifi landing page I installed for a friend, its pretty basic with a simple button press to get people online, and another form for people to sign up to their e-mail database.

    Basically I want to combine the two forms to do two things at once, when they click the email sign up button, I want them to be logged into the wifi...

    This is the code to authenticate the user and join the
    Code:
    form method="get" action="$authaction">
             <input name="tok" value="$tok" type="hidden" /> <input name="redir" value="$redir" type="hidden" />
    <button class="button" type="submit">Continue</button>
    And the moment i've just embedded a third party sign up..

    Code:
     <form action="https://madmimi.com/signups/subscribe/79298" method="post" id="mad_mimi_signup_form" target="_blank"> 
      <fieldset> 
       <div class="mimi_field text email required"> 
        <label for="signup_email">Email</label> 
        <input id="signup_email" name="signup[email]" type="text" placeholder="you@example.com" data-invalid-message="This field is invalid" class="required"> 
        <div class="mimi_field_feedback"></div><span class="mimi_funk"></span> 
       </div> 
       <div class="mimi_field action"> 
        <input id="webform_submit_button" value="Sign up!" type="submit" class="submit" data-default-text="Sign up!" data-submitting-text="Sending…" data-invalid-text="↑ You forgot some required fields"> 
       </div> 
      </fieldset> 
     </form> 
    <script type="text/javascript">
    (function() {
      var form = document.getElementById("mad_mimi_signup_form"),
          submit = document.getElementById("webform_submit_button"),
          email = /.+@.+\..+/;
          
      form.onsubmit = function(event) {
        var isValid = validate();
        if(!isValid) {
          for(var i = 0; i < form.elements.length; ++i) {
            var input = form.elements[i];
            if(input.className.indexOf("required") >= 0) {
              input.onchange = validate;
            }
          }
          return false;
        }
        if(form.getAttribute("target") != "_blank") {
          form.className = "mimi_submitting";
          submit.value = submit.getAttribute("data-submitting-text");    
      		submit.disabled = true;
      		submit.className = "disabled";
        }
    
        setTimeout(function() {
          for(var i = 0; i < form.getElementsByTagName("input").length; ++i) {
            var input = form.getElementsByTagName("input")[i];
            if(input.getAttribute("type") == "text") {
              input.value = "";
            }
            if(input.id == "signup_email") {
              input.placeholder = "you@example.com";
            } else {
              input.placeholder = "";
            }
          }
        }, 3000);
      };
      
      function validate() {
        var isValid = true;
        
        for(var i = 0; i < form.elements.length; ++i) {
          var input = form.elements[i],
              allDivs = input.parentNode.getElementsByTagName("div");
    
          if(input.className.indexOf("required") >= 0) {
            if(input.id == "signup_email") {
              if(!email.test(input.value)) {
                emailErrorMessage(input, allDivs);
                isValid = false;
              } else {
                removeErrorMessage(input, allDivs);
              }
            } else {
              if((input.type == "checkbox" && !input.checked) || input.value == "" || input.value == "-1") {
                fieldErrorMessage(input, allDivs);
                isValid = false;
              } else {
                removeErrorMessage(input, allDivs);
              }
            }
          }
        }
        
        form.className = isValid ? "" : "mimi_invalid";
        submit.value = isValid ? submit.getAttribute("data-default-text") : submit.getAttribute("data-invalid-text");
    		submit.disabled = !isValid;
    		submit.className = isValid ? "submit" : "disabled";
        
        return isValid;
      }
    
      function emailErrorMessage(input, allDivs) {
        if(input.getAttribute("data-webform-type") == "iframe") {
          input.className = "required invalid";
          input.placeholder = input.getAttribute("data-required-message") || "This field is required";
        } else {
          allDivs[0].innerHTML = input.getAttribute("data-invalid-message") || "This field is invalid";
        }
      }
    
      function fieldErrorMessage(input, allDivs) {
        if(input.getAttribute("data-webform-type") == "iframe") {
          input.className = "required invalid";
          input.placeholder = input.getAttribute("data-required-message") || "This field is required";
        } else {
          for(var i = 0; i < allDivs.length; ++i) {
            var element = allDivs[i];
            if(element.className.indexOf("mimi_field_feedback") >= 0) {
              return element.innerHTML = input.getAttribute("data-required-message") || "This field is required";
            }
          }
        }
      }
    
      function removeErrorMessage(input, allDivs) {
        if(input.getAttribute("data-webform-type") == "iframe") {
          input.className = "required";
        }
    
        for(var i = 0; i < allDivs.length; ++i) {
          var element = allDivs[i];
          if(element.className.indexOf("mimi_field_feedback") >= 0) {
            return element.innerHTML = "";
          }
        }
      }
    })();
    </script>
    
    Any help would be much appreciated!
     
  2. Guinevere

    Guinevere Mega Mom

    Joined:
    8 May 2010
    Posts:
    2,478
    Likes Received:
    176
    Okay, you can't technically merge the two forms into one form as a form can only post/get to a single location at once.

    Your first form gets to a location defined by @authaction

    Your second forms posts to https://madmimi.com/signups/subscribe/79298

    So...

    Keep your second form intact and try replacing your first form with either:

    1. An iFrame referencing the URL the first forms gets to (EG src="$authaction?tok=$tok&redir=$redir")

    2. Perform a hidden javaScript call to the URL defined by the authaction, tok and redid querystring parameters (The same URL as you'd use in an iFrame). Basically you need to load that page and you can try loading it invisibly.

    Whether these will work will depend on the scripts, pages you have access to. You may need to tweak them as you see fit, not forgetting to escape any spaces etc if you need to (Depending on scripts used)
     
    seebul likes this.
  3. seebul

    seebul Active Member

    Joined:
    9 Aug 2005
    Posts:
    1,211
    Likes Received:
    1
    Thanks for the reply, i'll try loading the page within an iframe.
     
  4. seebul

    seebul Active Member

    Joined:
    9 Aug 2005
    Posts:
    1,211
    Likes Received:
    1
    Still having issues with this, I am loading that src in a hidden iFrame, but it doesnt authenticate the user when the splash page is loaded... I cant actually tell if the Iframe is even loading anything.

    Is there any chance you'd be able to help with the javascript call? :lol:

    EDIT: I looked at the page source and the iFrame, and it looks like it is actually working. When the page loads in a browser this is what shows in the source..

    "http://10.82.96.1:2050/nodogsplash_auth/?tok=438bf1ec&amp;redir=http:/www.apple.com"

    So its authenticating and giving the user a token but it still doesn't let the user actually get online...

    EDIT: It's working :) turns out the redirect in the code was causing problems, I got rid of it and now it authenticates people fine. Only issue is that they can get online whether or not they enter there e-mail address obviously, any thoughts on what I could do stop this? Delay the iframe loading maybe?
     
    Last edited: 12 May 2013
  5. deathtaker27

    deathtaker27 #noob

    Joined:
    17 Apr 2010
    Posts:
    2,079
    Likes Received:
    115
    javascript validation on the entry to ensure there is data in the e-mail address (haven't look at your code)
     

Share This Page