javascript - checked term and condition before submit form - Stack Overflow|Programmer puzzle solving

if user want to submit their form, they have to checked the terma and condition box first. so where should i add the code?

<?php
// Start the session
session_start();
?>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="form1.css"/>
</head>
<body onload="disableSubmit()">

<?php 

//define variable and set to empty value

$forenameErr = $surnameErr = $emailErr = $postalAddressErr = $landLineTelNoErr = $mobileTelNoErr = $sendMethodErr = "";
$valid = true;

// if forename is null , make it null , else test_input()
$forename = empty($_POST["forename"]) ? NULL : test_input($_POST["forename"]);

// if surname is null , make it null , else test_input()
$surname =  empty($_POST["surname"]) ? NULL : test_input($_POST["surname"]);

// if postalAddress is null , make it null , else test_input()
$postalAddress = empty($_POST["postalAddress"]) ? NULL : test_input($_POST["postalAddress"]);

// if landLineTelNo is null , make it null , else test_input()
$landLineTelNo = empty($_POST["landLineTelNo"]) ? NULL : test_input($_POST["landLineTelNo"]);

// if mobileTelNo is null , make it null , else test_input()
$mobileTelNo = empty($_POST["mobileTelNo"]) ? NULL : test_input($_POST["mobileTelNo"]);

//email
$email = empty($_POST["email"]) ? NULL : test_input($_POST["email"]);

// if sendMethod is null , make it null , else test_input()
$sendMethod = empty($_POST["sendMethod"]) ? NULL : test_input($_POST["sendMethod"]);

    if  (isset($_POST["submit"])){


        //check forename
        if($forename === NULL)  {
            //forename is empty
            $forenameErr = "*Forename is required";
            $valid = false;

        } else {
            //check characters
             if (!preg_match("/^[a-zA-Z ]*$/",$forename)) {
                 $forenameErr = "Only letters and white space allowed";
                 $valid = false;
             }
        }

        //check surname
        if($surname === NULL){
            //surname is empty
            $surnameErr = "*Surname is required";
             $valid = false; //false

        } else {
            //check charaters
             if (!preg_match("/^[a-zA-Z ]*$/",$surname)) {
             $surnameErr = "*Only letters and white space allowed";
             $valid = false;
            }
        }   

         //check address
         if (!preg_match("/^[a-zA-Z0-9\-\\,. ]*$/", $postalAddress)) {
                     // check characters
                     $postalAddressErr = "*Invalid Postal Address";
                     $valid = false;//false
        }


            // check if invalid telephone number added
            if (!preg_match("/^$|^[0-9]{12}$/",$landLineTelNo)) {
                //check number
                     $landLineTelNoErr = "*Only 12 digit number can be entered";
                     $valid = false;//false
            }


            //check valid mobiel tel no
            if (!preg_match("/^$|^[0-9]{11}$/",$mobileTelNo)) {
                //check number
                     $mobileTelNoErr = "*Only 11 digit number can be entered";
                     $valid = false;//false
            }


        //check valid email
            if (isset($email) && !filter_var($email, FILTER_VALIDATE_EMAIL)) 
            { $emailErr = "*Invalid email format"; 
                 $valid = false;//false
             }


        //check sendMethod
        if($sendMethod === NULL){
             //send method is empty
             $sendMethodErr = "*Contact method is required";
             $valid = false; //false
        } else {
            $sendMethod = test_input($_POST["sendMethod"]);
        }

        //sendmethod link to information filled
        if (isset($sendMethod) && $sendMethod=="email" && $email ==NULL){
            $emailErr ="*Email is required ";
            $valid = false;
        }

        if (isset($sendMethod) && $sendMethod=="post" && $postalAddress ==NULL){
            $postalAddressErr ="*Postal Address is required ";
            $valid = false;
        }

        if (isset($sendMethod) && $sendMethod=="SMS" && $mobileTelNo ==NULL){
            $mobileTelNoErr ="*Mobile number is required ";
            $valid = false;
        }


     //if valid then redirect
    if($valid){

         $_SESSION['forename'] = $forename;
         $_SESSION['surname'] = $surname;
         $_SESSION['email'] = $email;
         $_SESSION['postalAddress'] = $postalAddress;
         $_SESSION['landLineTelNo'] = $landLineTelNo;
         $_SESSION['mobileTelNo'] = $mobileTelNo;
         $_SESSION['sendMethod'] = $sendMethod;

         header('Location: userdetail.php');
         exit();
        }    

    }   else{
         //user did not submit form!
    }




//check
function test_input($data) {
   $data = trim($data);
   $data = stripslashes($data);
   $data = htmlspecialchars($data);
   return $data;
}

?>

<div id="wrapper">

<h1>Wele to Chollerton Tearoom! </h1>

<nav> 
    <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="findoutmore.html">Find out more</a></li>
         <li><a href="offer.html">Offer</a></li>
         <li><a href="credit.html">Credit</a></li>
         <li><a href="#">Admin</a></li>
         <li><a href="wireframe.html">WireFrame</a></li>
    </ul>
</nav>

<form id = "userdetail" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">

    <fieldset id="aboutyou">
    <legend id="legendauto">user information</legend>

        <p>
        <label for="forename">Forename: </label>
        <input type="text" name="forename" id="forename" value="<?php echo $forename;?>">
        <span class="error"> <?php echo $forenameErr;?></span>
        </p>

        <p>
        <label for="surname">Surname:</label>
        <input type="text" name="surname" id="surname" value="<?php echo $surname;?>">
        <span class="error"> <?php echo $surnameErr;?></span>
        </p>

        <p>
        <label for="postalAddress">Postal Address:</label>
        <input type="text" name="postalAddress" id="postalAddress" value="<?php echo $postalAddress;?>">
        <span class="error"> <?php echo $postalAddressErr;?></span>
        </p>

        <p>
        <label for="landLineTelNo">Landline Telephone Number:</label>
        <input type="text" name="landLineTelNo" id="landLineTelNo" value="<?php echo $landLineTelNo;?>" >
        <span class="error">  <?php echo $landLineTelNoErr;?></span>
        </p>

        <p>
        <label for="mobileTelNo">Moblie:</label>
        <input type="text" name="mobileTelNo" id="mobileTelNo" value="<?php echo $mobileTelNo;?>" >
        <span class="error">  <?php echo $mobileTelNoErr;?></span>
        </p>

        <p>
        <label for="email">E-mail:</label>
        <input type="text" name="email" id="email" value="<?php echo $email;?>">
        <span class="error"> </span> <?php echo $emailErr;?> </span>
        </p>

        <fieldset id="future">
        <legend>Lastest news</legend>

        <p>
        Choose the method you remanded to recevive the lastest information
        </p>
        <br>
        <input type="radio" name="sendMethod" id="sendMethod" <?php if (isset($sendMethod) && $sendMethod=="email") echo "checked";?>  value="email">
        Email
        <input type="radio" name="sendMethod" id="sendMethod" <?php if (isset($sendMethod) && $sendMethod=="post") echo "checked";?>  value="post">
        Post
        <input type="radio" name="sendMethod" id="sendMethod" <?php if (isset($sendMethod) && $sendMethod=="SMS") echo "checked";?>  value="SMS">
        SMS
        <span class="error"> <?php echo $sendMethodErr;?></span>
        </fieldset>

       <p><span class="error">* required field.</span></p>




         <input type="checkbox" name="terms" id="terms">
         I have read and agree to the Terms and Conditions and Privacy Policy  
         <br><br>
         <p>
         <input type="submit" name="submit" value="submit"  />
         </p>
         </form>




        </form>

       </fieldset>
    </form>

</div>



</body>
</html>

and so here is my userdetail.php to get user data...

<?php 

session_start();

$forename = $_SESSION['forename'];
$surname = $_SESSION['surname'];
$email = $_SESSION['email'];
$postalAddress = $_SESSION['postalAddress'];
$landLineTelNo = $_SESSION['landLineTelNo'];
$mobileTelNo = $_SESSION['mobileTelNo'];
$sendMethod = $_SESSION['sendMethod'];

echo "<h1>Successfull submission :</h1>";
echo "<p>Forename :  $forename <p/>";
echo "<p>Surname : $surname <p/>";


if($_SESSION['postalAddress']==NULL)
{echo "<p>postalAddress:NULL</p>";} 
else {echo "<p>PostalAddress : $postalAddress </p>";}

if($_SESSION['email']==NULL)
{echo "<p>email:NULL<p/>";} 
else {echo "<p>email : $email</p>";}

if($_SESSION['landLineTelNo']==NULL)
{echo "<p>landLineTelNo:NULL<p/>";} 
else {echo "<p>landLineTelNo : $landLineTelNo </p>";}

if($_SESSION['mobileTelNo']==NULL)
{echo "<p>mobileTelNo:NULL<p/>";} 
else {echo "<p>mobileTelNo : $mobileTelNo </p>";}


echo "<p>sendMethod : $sendMethod </p>";

?>

i need the term and condition check box to be checked else use cannot submit the form....

if user want to submit their form, they have to checked the terma and condition box first. so where should i add the code?

<?php
// Start the session
session_start();
?>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="form1.css"/>
</head>
<body onload="disableSubmit()">

<?php 

//define variable and set to empty value

$forenameErr = $surnameErr = $emailErr = $postalAddressErr = $landLineTelNoErr = $mobileTelNoErr = $sendMethodErr = "";
$valid = true;

// if forename is null , make it null , else test_input()
$forename = empty($_POST["forename"]) ? NULL : test_input($_POST["forename"]);

// if surname is null , make it null , else test_input()
$surname =  empty($_POST["surname"]) ? NULL : test_input($_POST["surname"]);

// if postalAddress is null , make it null , else test_input()
$postalAddress = empty($_POST["postalAddress"]) ? NULL : test_input($_POST["postalAddress"]);

// if landLineTelNo is null , make it null , else test_input()
$landLineTelNo = empty($_POST["landLineTelNo"]) ? NULL : test_input($_POST["landLineTelNo"]);

// if mobileTelNo is null , make it null , else test_input()
$mobileTelNo = empty($_POST["mobileTelNo"]) ? NULL : test_input($_POST["mobileTelNo"]);

//email
$email = empty($_POST["email"]) ? NULL : test_input($_POST["email"]);

// if sendMethod is null , make it null , else test_input()
$sendMethod = empty($_POST["sendMethod"]) ? NULL : test_input($_POST["sendMethod"]);

    if  (isset($_POST["submit"])){


        //check forename
        if($forename === NULL)  {
            //forename is empty
            $forenameErr = "*Forename is required";
            $valid = false;

        } else {
            //check characters
             if (!preg_match("/^[a-zA-Z ]*$/",$forename)) {
                 $forenameErr = "Only letters and white space allowed";
                 $valid = false;
             }
        }

        //check surname
        if($surname === NULL){
            //surname is empty
            $surnameErr = "*Surname is required";
             $valid = false; //false

        } else {
            //check charaters
             if (!preg_match("/^[a-zA-Z ]*$/",$surname)) {
             $surnameErr = "*Only letters and white space allowed";
             $valid = false;
            }
        }   

         //check address
         if (!preg_match("/^[a-zA-Z0-9\-\\,. ]*$/", $postalAddress)) {
                     // check characters
                     $postalAddressErr = "*Invalid Postal Address";
                     $valid = false;//false
        }


            // check if invalid telephone number added
            if (!preg_match("/^$|^[0-9]{12}$/",$landLineTelNo)) {
                //check number
                     $landLineTelNoErr = "*Only 12 digit number can be entered";
                     $valid = false;//false
            }


            //check valid mobiel tel no
            if (!preg_match("/^$|^[0-9]{11}$/",$mobileTelNo)) {
                //check number
                     $mobileTelNoErr = "*Only 11 digit number can be entered";
                     $valid = false;//false
            }


        //check valid email
            if (isset($email) && !filter_var($email, FILTER_VALIDATE_EMAIL)) 
            { $emailErr = "*Invalid email format"; 
                 $valid = false;//false
             }


        //check sendMethod
        if($sendMethod === NULL){
             //send method is empty
             $sendMethodErr = "*Contact method is required";
             $valid = false; //false
        } else {
            $sendMethod = test_input($_POST["sendMethod"]);
        }

        //sendmethod link to information filled
        if (isset($sendMethod) && $sendMethod=="email" && $email ==NULL){
            $emailErr ="*Email is required ";
            $valid = false;
        }

        if (isset($sendMethod) && $sendMethod=="post" && $postalAddress ==NULL){
            $postalAddressErr ="*Postal Address is required ";
            $valid = false;
        }

        if (isset($sendMethod) && $sendMethod=="SMS" && $mobileTelNo ==NULL){
            $mobileTelNoErr ="*Mobile number is required ";
            $valid = false;
        }


     //if valid then redirect
    if($valid){

         $_SESSION['forename'] = $forename;
         $_SESSION['surname'] = $surname;
         $_SESSION['email'] = $email;
         $_SESSION['postalAddress'] = $postalAddress;
         $_SESSION['landLineTelNo'] = $landLineTelNo;
         $_SESSION['mobileTelNo'] = $mobileTelNo;
         $_SESSION['sendMethod'] = $sendMethod;

         header('Location: userdetail.php');
         exit();
        }    

    }   else{
         //user did not submit form!
    }




//check
function test_input($data) {
   $data = trim($data);
   $data = stripslashes($data);
   $data = htmlspecialchars($data);
   return $data;
}

?>

<div id="wrapper">

<h1>Wele to Chollerton Tearoom! </h1>

<nav> 
    <ul>
         <li><a href="index.html">Home</a></li>
         <li><a href="findoutmore.html">Find out more</a></li>
         <li><a href="offer.html">Offer</a></li>
         <li><a href="credit.html">Credit</a></li>
         <li><a href="#">Admin</a></li>
         <li><a href="wireframe.html">WireFrame</a></li>
    </ul>
</nav>

<form id = "userdetail" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">

    <fieldset id="aboutyou">
    <legend id="legendauto">user information</legend>

        <p>
        <label for="forename">Forename: </label>
        <input type="text" name="forename" id="forename" value="<?php echo $forename;?>">
        <span class="error"> <?php echo $forenameErr;?></span>
        </p>

        <p>
        <label for="surname">Surname:</label>
        <input type="text" name="surname" id="surname" value="<?php echo $surname;?>">
        <span class="error"> <?php echo $surnameErr;?></span>
        </p>

        <p>
        <label for="postalAddress">Postal Address:</label>
        <input type="text" name="postalAddress" id="postalAddress" value="<?php echo $postalAddress;?>">
        <span class="error"> <?php echo $postalAddressErr;?></span>
        </p>

        <p>
        <label for="landLineTelNo">Landline Telephone Number:</label>
        <input type="text" name="landLineTelNo" id="landLineTelNo" value="<?php echo $landLineTelNo;?>" >
        <span class="error">  <?php echo $landLineTelNoErr;?></span>
        </p>

        <p>
        <label for="mobileTelNo">Moblie:</label>
        <input type="text" name="mobileTelNo" id="mobileTelNo" value="<?php echo $mobileTelNo;?>" >
        <span class="error">  <?php echo $mobileTelNoErr;?></span>
        </p>

        <p>
        <label for="email">E-mail:</label>
        <input type="text" name="email" id="email" value="<?php echo $email;?>">
        <span class="error"> </span> <?php echo $emailErr;?> </span>
        </p>

        <fieldset id="future">
        <legend>Lastest news</legend>

        <p>
        Choose the method you remanded to recevive the lastest information
        </p>
        <br>
        <input type="radio" name="sendMethod" id="sendMethod" <?php if (isset($sendMethod) && $sendMethod=="email") echo "checked";?>  value="email">
        Email
        <input type="radio" name="sendMethod" id="sendMethod" <?php if (isset($sendMethod) && $sendMethod=="post") echo "checked";?>  value="post">
        Post
        <input type="radio" name="sendMethod" id="sendMethod" <?php if (isset($sendMethod) && $sendMethod=="SMS") echo "checked";?>  value="SMS">
        SMS
        <span class="error"> <?php echo $sendMethodErr;?></span>
        </fieldset>

       <p><span class="error">* required field.</span></p>




         <input type="checkbox" name="terms" id="terms">
         I have read and agree to the Terms and Conditions and Privacy Policy  
         <br><br>
         <p>
         <input type="submit" name="submit" value="submit"  />
         </p>
         </form>




        </form>

       </fieldset>
    </form>

</div>



</body>
</html>

and so here is my userdetail.php to get user data...

<?php 

session_start();

$forename = $_SESSION['forename'];
$surname = $_SESSION['surname'];
$email = $_SESSION['email'];
$postalAddress = $_SESSION['postalAddress'];
$landLineTelNo = $_SESSION['landLineTelNo'];
$mobileTelNo = $_SESSION['mobileTelNo'];
$sendMethod = $_SESSION['sendMethod'];

echo "<h1>Successfull submission :</h1>";
echo "<p>Forename :  $forename <p/>";
echo "<p>Surname : $surname <p/>";


if($_SESSION['postalAddress']==NULL)
{echo "<p>postalAddress:NULL</p>";} 
else {echo "<p>PostalAddress : $postalAddress </p>";}

if($_SESSION['email']==NULL)
{echo "<p>email:NULL<p/>";} 
else {echo "<p>email : $email</p>";}

if($_SESSION['landLineTelNo']==NULL)
{echo "<p>landLineTelNo:NULL<p/>";} 
else {echo "<p>landLineTelNo : $landLineTelNo </p>";}

if($_SESSION['mobileTelNo']==NULL)
{echo "<p>mobileTelNo:NULL<p/>";} 
else {echo "<p>mobileTelNo : $mobileTelNo </p>";}


echo "<p>sendMethod : $sendMethod </p>";

?>

i need the term and condition check box to be checked else use cannot submit the form....

Share Improve this question edited Nov 30, 2016 at 15:59 asked Apr 9, 2016 at 8:04 Chi Shen 2072 silver badges17 bronze badges

Can you please narrow down your code to the problem area? – SuperDJ Commented Apr 9, 2016 at 8:05
1 Multiple same-named id's is not going to work: id="sendMethod" – Rasclatt Commented Apr 9, 2016 at 8:06
1 Why not use JS to enable the submit only if the user has has checked "accept" – Peter Chaula Commented Apr 9, 2016 at 8:12

Add a ment |

4 Answers 4

Sorted by: Reset to default 3

REMEMBER! Using javascript will just make it easy for user.It prevents loading another page to display error. STILL if a browser has javascript turned of it will pass the checked Terms without even checking it. so you should Always check it serverside (PHP) and use javascript for users ease.

in your HTML:

<form id="userdetail" ....>
    ...
    <input type="checkbox" name="terms" id="terms" value="accepted" />
    ...
</form>

then in your javascript:

Pure JS:

document.getElementById('userdetail').addEventListener('submit', function(event){
    if(document.getElementById('terms').checked == false){
        event.preventDefault();
        alert("By signing up, you must accept our terms and conditions!");
        return false;
    }
});

Using JQuery (jquery.)

$('#userdetail').submit(function(event){
    if($('#terms').is(':checked') == false){
        event.preventDefault();
        alert("By signing up, you must accept our terms and conditions!");
        return false;
    }
});

and in your PHP to check if it is checked you should use

if(isset($_POST['terms']) && $_POST['terms'] == 'accepted') {
    // Continue Registring 
} else {
    // Display Error
}

Instead of submit you do:

    <input type="button" onclick="javascript:myFunction()" Value="Submit">

And then the javascript function:

function myFunction() {
    if(document.getElementById("terms").checked == true){
        document.getElementById("userdetail").submit();
    }
    else{
        alert("You have to agree on terms and conditions");
    }
}

In Jquery you can do like below:

<script>
    $('#userdetail').submit(function(){
    if($('#terms').is(':checked'))
    {
         return true;
    }
    else
    {
      return false;
    }
    });
</script>

Replace the part of html with the given html in answer and add the function below to you script...

function verify_terms()
{
   if (!$('#terms').is(':checked'))
   {
     alert('Please agree terms and conditions');
     return false;
   }
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<input type="checkbox" name="terms" id="terms">
I have read and agree to the Terms and Conditions and Privacy Policy  
<br><br>
<p>
<input type="submit" name="submit" onclick="return verify_terms();" value="submit"  />

Programmer puzzle solving

javascript - checked term and condition before submit form - Stack Overflow

4 Answers 4

Articles related to this article

comment list (0)