jeudi 30 juin 2016

checked form redirect with javascript and css label styling

I wish to make a css styling of a form, with a href="#url" redirect when the checkbox is checked. I managed to make the styling work, but the javascript redirect isn't working.

So basically, I want to have a form where I can style it with a "fake" or "artificial" checkbox, that will respond to a javascript redirect code, which redirects to another http:// url.

CSS:
/* <-- hide the default checkbox */

label input {
  display: none;/* <-- hide the default checkbox */
}

label {
        margin-bottom: 5px;
    margin-left: 10px;
    font-size: 13px;
}

label .checkbox {/* <-- style the artificial checkbox */
  height: 15px;
  width: 15px;
  border: 1px solid #9c9c9c;
    border-radius:2px;
  display: inline-block;
  position: relative;
  margin-right:10px;
}
[type=checkbox]:checked + .checkbox:before {/* <-- style its checked state..with a ticked icon */
  content: '\2714';
  position: absolute;
  top: -1px;
  left: 3px;
  font-size:20px;
}

.studylicense {
    color: #929292;
    margin-bottom:2px;
    position:absolute;
}

HTML:
<div><label>
  <input style="display:none;" type='checkbox' name="studentRedirect" class="checkbox">
<div class="study checkbox"></div><span class="studylicense"><strong>Studielicens <img class="help-icon" alt="" src="images/help.png"></strong></span></label>
<input style="display:none;" type="checkbox" name="studentRedirect"></div>


                        <input style="display:none" type="submit" name="Send" value="Opret gratis konto" class="btn btn-success" />
                        <span class="sign-up"><a class="supportButton btn btn-success " onclick="if (validator(document.forms['trial'])) document.forms['trial'].submit();" href="javascript:;">
                                        Opret gratis konto</a></span>


                                        <%
                                if trialSignedUp then
                            %>
                            <div id="submitconfirm" class="alert alert-success">
                    Velkommen til <span class="defgoBlue">defgo</span>, vi har sendt en email indeholdende dit gratis login og password</div>

JAVASCRIPT:
  if (theForm.studentRedirect.checked == true)
  {
    self.location="/dk/kontakt/studerende.asp"
    return (false);
  }




Aucun commentaire:

Enregistrer un commentaire