Question

In: Computer Science

In php: This is a static website. There are missing parts that students must fill in...

In php:

  • This is a static website.
  • There are missing parts that students must fill in in order to have a working website.
  • Students should follow the comments in the php file to complete this part.

After completed, the website should hide all messages before the user click submit button OR show either the error message or success message if the user click submit button.

//code

<?php

   if(isset($_GET['submit'])){

//sanitize the input
      
/* Check the error from the input:
if input from user is empty
-> get an error string variable
if input is not empty
-> use preg_match() to match the pattern
$pattern = "/^[1-9][0-9]{2}(\.|\-)[0-9]{3}(\.|\-)[0-9]{4}$/";
-> if it's a matched, get a success string variable
*/
      
   }
?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="">
<title>Lab 2-Part1</title>
</head>
<body>

   <form action="" class="main-form needs-validation">
<div class="form-group">
<label for="numbers">Phone Number</label>
<input type="text" id="numbers" class="form-control" value=<?php //use PHP to print out the value the use typed in if any ?>>
<small class="form-text text-muted">xxx.xxx.xxx or xxx-xxx-xxxx</small>
<!-- Set a condition
if there is an error string variable, print out the string in PHP
if there is a success string variable, print out the string in PHP
-->
      <div class="alert alert-danger">
          Must enter a valid phone number! <!-- should be from an error string variable -->
          </div>
          <div class="alert alert-success">
          Phone number is valid! <!-- should be from an error string variable -->
          </div>
</div>
  
<button type="submit" class="btn btn-primary" >Submit</button>
</form>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

Solutions

Expert Solution

Here is the updated code and made some modification and formatted validations for phone.

<?php
   if(isset($_POST['submit'])){
   $ok = true;
   $phoneerror = $_POST["phoneno"];
   if (empty($phoneerror)) {
    $ok = false;  
    $phoneerrors = "<div class='alert alert-danger'>Phone number cannot be empty!</div>";
   }
   
   if ($phoneerror) {
   
    if(preg_match("/^[1-9][0-9]{2}(\.|\-)[0-9]{3}(\.|\-)[0-9]{4}$/", $phoneerror)) {
        $ok = false;  
      $phoneerrors = "<div class='alert alert-success'>Phone number is valid!</div>";
   }else{
    $ok = false;  
      $phoneerrors = "<div class='alert alert-danger'>Must enter a valid phone number!</div>";
   }
    
   }
   }
   
   ?>
<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
      <link rel="stylesheet" href="">
      <title>Lab 2-Part1</title>
   </head>
   <body>
      <form method="post" action="" class="main-form needs-validation">
         <div class="form-group">
            <label for="numbers">Phone Number</label>
            <input type="text" id="phone" class="form-control" name="phoneno">
         </div>
         <input type="submit" class="btn btn-primary" name="submit" value="Submit">
      </form>
      <!-- Error Messages echo-->
      <?php echo $phoneerrors; ?>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
      <!-- Phone validation limit and format xxx-xxx-xxxx start -->
      <script>
         function mob_formatting(ele,restore) {
           var numcheck,
               selection_start = ele.selectionStart,
               selection_end = ele.selectionEnd,
               number = ele.value.replace(/\D/g,'');
           
           // automatically add dashes
           if (number.length > 2) {
             // matches: 123 || 123-4 || 123-45
             numcheck = number.substring(0,3) + '-';
             if (number.length === 4 || number.length === 5) {
               // matches: 123-4 || 123-45
               numcheck += number.substr(3);
             }
             else if (number.length > 5) {
               // matches: 123-456 || 123-456-7 || 123-456-789
               numcheck += number.substring(3,6) + '-';
             }
             if (number.length > 6) {
               // matches: 123-456-7 || 123-456-789 || 123-456-7890
               numcheck += number.substring(6);
             }
           }
           else {
             numcheck = number;
           }
           ele.value =  (numcheck.length > 12) ? numcheck.substring(12,0) : numcheck;
           
           if (numcheck.slice(-1) === '-' && restore === false
               && (numcheck.length === 8 && selection_end === 7)
                   || (numcheck.length === 4 && selection_end === 3)) {
               selection_start = numcheck.length;
               selection_end = numcheck.length;
           }
           else if (restore === 'revert') {
             selection_start--;
             selection_end--;
           }
           ele.setSelectionRange(selection_start, selection_end);
         
         }
           
         function phone_number_check(field,e) {
           var key_code = e.keyCode,
               key_string = String.fromCharCode(key_code),
               press_delete = false,
               dash_key = 189,
               delete_key = [8,46],
               direction_key = [33,34,35,36,37,38,39,40],
               selection_end = field.selectionEnd;
           
           // delete key was pressed
           if (delete_key.indexOf(key_code) > -1) {
             press_delete = true;
           }
           
           // only force formatting is a number or delete key was pressed
           if (key_string.match(/^\d+$/) || press_delete) {
             mob_formatting(field,press_delete);
           }
           // do nothing for direction keys, keep their default actions
           else if(direction_key.indexOf(key_code) > -1) {
             // do nothing
           }
           else if(dash_key === key_code) {
             if (selection_end === field.value.length) {
               field.value = field.value.slice(0,-1)
             }
             else {
               field.value = field.value.substring(0,(selection_end - 1)) + field.value.substr(selection_end)
               field.selectionEnd = selection_end - 1;
             }
           }
           // all other non numerical key presses, remove their value
           else {
             e.preventDefault();
         //    field.value = field.value.replace(/[^0-9\-]/g,'')
             mob_formatting(field,'revert');
           }
         
         }
         
         document.getElementById('phone').onkeyup = function(e) {
           phone_number_check(this,e);
         }    
      </script>
      <!-- Phone validation limit and format xxx-xxx-xxxx end -->
      <style>
         body{
         padding:20px;
         }
         form.main-form.needs-validation {
         padding-bottom: 20px;
         }
      </style>
   </body>
</html>

Output:


Related Solutions

Fill in the missing information.
Question Fill in the missing information.a. The vendor ships the inventory and sends a(n) __________ back to the purchaser.b. After approving all documents, the purchaser sends a(n) __________ to the vendor.c. When ordering merchandise inventory, the purchaser sends a(n) __________ to the vendor.d. The purchaser receives the inventory and prepares a(n) __________. 
fill in the missing information: Must show all your work to receive credit. Case A Case...
fill in the missing information: Must show all your work to receive credit. Case A Case B Case C Units Produced 1,000 1,500 800 Standard hours per unit 3.5 ? 3 Standard hours for production ? ? ? Standard rate per hour $7.25 $7.00 $7.00 Actual hours worked 3,400 4,900 2,330 Actual total labor cost ? $31,850 ? Labor price variance $850 F ? $466 F Labor usage variance ? $2,800 U ? Please show work for how each missing...
1. PHP OOP Create a complete PHP enabled website that defines and uses a PineApple class...
1. PHP OOP Create a complete PHP enabled website that defines and uses a PineApple class in PHP. The class has following members. Properties $color: string type $taste: string type $weight: number type Standard constructor, with 3 parameters Member functions eat(): no return, no parameter, print a short paragraph in English to describe how to eat a pineapple. grow(): no return, no parameter, print a short paragraph in English to describe how to grow a pineapple plant. display(): no return,...
Fill in the missing blanks in each of the following equations a) _______   → 85At217 +...
Fill in the missing blanks in each of the following equations a) _______   → 85At217 + 2He4 b) 94Pu241→95Am241 + ____________ c) 11Na19→10Ne19 +________ d) 34Se75+ _____ → 33As75 e) 95Am241 →93Np237 +____ f) ______ → 92U233 + -1e0 g) 93Np237 → ______ + 2He4 h) 35Br75 → ______ + +1e0
sing Data Set C, fill in the missing data.
(a) Using Data Set C, fill in the missing data. (Round your p-values to 4 decimal places and other answers to 2 decimal places.)   R2    ANOVA table   Source F p-value   Regression          Variables p-value   Intercept       Floor       Offices       Entrances       Age       Freeway       (b) The predictors whose p-values are less than 0.05 are (You may select more than one answer. Click the box with a check mark for the correct answer and double...
could anyone make a php code for a cart page for an e commerce website?? just...
could anyone make a php code for a cart page for an e commerce website?? just the cart page not the whole website
Use the information in the 1st table (Weights & Periods) to fill in the missing values...
Use the information in the 1st table (Weights & Periods) to fill in the missing values in the second table Weights Applied Period 5 Last month 3 Two months ago 1 Three months ago Month Actual Sales 3-Month Weighted Moving Average January 100 February 150 March 130 April 160 (  (  * 100 ) + (  *  ) + (  *  ) /  = 133 May 120 (  (  * 150 ) + (  *  ) + (  *  ) /  = 133 June 110 (  (  * 130 ) + (  *  ) + (  *  ) /  = 133...
Future value of an ordinary annuity. Fill in the missing futurevalues in the following table...
Future value of an ordinary annuity. Fill in the missing future values in the following table for an ordinary annuity:Number ofPayments orYearsAnnualInterest RatePresent ValueAnnuityFuture Value67%0   $270.26(Click on the following icon in order to copy its contents into a spreadsheet.)Number ofPayments orYearsAnnualInterest RatePresent ValueAnnuityFuture Value67%0   $270.26?1715%0$1,261.39?273.5%    0$732.59?3200.8%0$503.85?
In the following chart, fill in the missing cells for each of the following independent scenarios....
In the following chart, fill in the missing cells for each of the following independent scenarios. Do not enter dollar signs or commas in the input boxes. Round all answers to the nearest whole number, except for the CM Ratio. Round the CM Ratio to 2 decimal places. Scenario Revenue Variable Costs Fixed Costs Total Costs Operating Income CM Ratio Contribution Margin 1 $610 $Answer $490 $630 $-20 Answer% $Answer 2 $1,800 $Answer $Answer $1,600 $Answer 55.00% $Answer 3 $Answer...
Fill in the missing values in the table below given that , dy/dt = 0.8y -...
Fill in the missing values in the table below given that , dy/dt = 0.8y - 2 . t 0 1 2 3 4 y 8 ?? ?? ?? ??
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT