CODEWITHSUNDEEP
javascriptjqueryif-statement
Luke
Luke

Reputation: 990

Conditional check when user clicks on input type checkbox

Functionality :

User enter name and email and an optional conditional check box. This check box is for user to check if they are above 18.

Hence, if user checks the box to indicate that they are above 18, and when user clicks submit, the page will navigate the user to page A. Else, if user didnt check the box, the page will navigate user to page B.

Issue :

At this point, I only know that I have to use a conditional if...else statement to do the check and to allow the proper function call. However, I am absolutely stuck on how to proceed from the start, after when user clicks on the submit button to perform the conditional check. Hence, I do request some help to get me started.

Thanks

Code :

<div id="EmailPage" align="center" style="position:absolute; height: 1080px; width:1920px; background-repeat: no-repeat; display: none; z-index=7; top:0px; left:0px; ">

  <!--Email Buttons-->
  <table align="center" cellspacing="0" cellpadding="0" width="1080" top="550px">
    <tr style="height: 1920;">
      <td width="1080">

        <input type="text" id="NameField" style="z-index=8; position:absolute; top:273px; left:779px; height:53px; width:511px; outline= 0; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent;">
        <input type="text" id="EmailField" style="z-index=8; position:absolute; top:342px; left:779px; height:53px; width:511px; outline=0; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent;">

        <input type="checkbox" id="AcknowledgeField" style="z-index=8; position:absolute; top:428px; left:776px; height:22px; width:24px; outline=0; border: 0; background: transparent;">

        <button id="Submit" onclick="Submit()">
        </button>
      </td>
    </tr>
  </table>
</div>

Upvotes: 0

Views: 817

Answers (2)

Relm
Relm

Reputation: 8291

Since you have included JQuery. Here's something you can use. 

<script>
$(document).ready(function(e) {
    $(document).on('click','#Submit', function(){
        /////test if check box is check
        if ($('#AcknowledgeField').is(':checked')){

               alert("About to go to pageA");

            window.location.href="../pageA.html";   
        } else {
            ///////cheeck box not checked///////////

               alert("About to go to pageA");

            window.location.href="../pageB.html";
        }
    })
});
</script>

Upvotes: 3

Devnsyde
Devnsyde

Reputation: 1347

This is how you would do it with Jquery, if you want to do with .NET then it would be different. https://jsfiddle.net/y3llowjack3t/5negy4qj/

and another way with conditionals: https://jsfiddle.net/y3llowjack3t/5negy4qj/1/

<table align="center" cellspacing="0" cellpadding="0">
 <tr>
  <td width="100%">
    <input type="text" id="NameField">
    <input type="text" id="EmailField">
    <input type="checkbox" id="AcknowledgeField">

    <button id="Submit">
      Submit
    </button>
  </td>
 </tr>
</table>
$("#AcknowledgeField").click(function(){
    alert("Change this alert to go to page A");
});

Upvotes: 1

Related Questions