Conditional check when user clicks on input type checkbox

Question

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>

@MasoodRehman, Thanks, but I am not intending to use the form tag at all. I guess that is possible too right? — Luke
– Luke, Commented Feb 17, 2016 at 23:29
@HarryBomrah, Yes, the name and email and the check condition will be going to server. I will be using a ajax (function.do, formType()); call to post the data to the server in my jQuery method call — Luke
– Luke, Commented Feb 17, 2016 at 23:30

Relm · Accepted Answer · 2016-02-17 17:27:28Z

3

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>

answered Feb 17, 2016 at 17:27

Relm

8,33420 gold badges70 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Devnsyde · Accepted Answer · 2016-02-17 16:54:52Z

1

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");
});

answered Feb 17, 2016 at 16:54

Devnsyde

1,3571 gold badge14 silver badges34 bronze badges

1 Comment

Luke Over a year ago

okay!!Thanks, I have managed to edit the following and incorporate it into my email validation method call too. Thanks

Collectives™ on Stack Overflow

Conditional check when user clicks on input type checkbox

Functionality :

Issue :

Code :

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Functionality :

Issue :

Code :

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related