JavaScript Pop up password Check

Question

I am trying to make a register form for my website where it asks for a users password once, and when they click submit, a JavaScript box will pop up and ask it from he user again and checks it against the old one and if they are not the same it stays on the join page and tells them passwords don't match. How would I go about doing this?

Here is the HTML document I have:

<h2>New Account Registration.</h2>

            <table width="600" cellpadding="1" style="text-align:center;">
  <form action="join.php" method="get"  >
    <tr>
      <td colspan="1"><font color="#FF0000"></font></td>
    </tr>
    <tr>
      <td>Company Name:</td>
      </tr>
      <tr>
      <td><input style="background-color: #FFF;" name="companys_name" type="text" placeholder="Google" required /></td>
    </tr>
    <tr>
      <td>First Name:</td>
      </tr>
      <tr>
      <td ><input style="background-color: #FFF;" name="admin_first_name" type="text" placeholder="John" required /> 
        </td>
    </tr>
    <tr>
      <td>Last Name: </td>
      </tr>
      <tr>
      <td>
        <input style="background-color: #FFF;" name="admin_last_name" type="text" placeholder="Doe" required />
      </td>
    </tr>

    <tr>
      <td>Phone Number:</td>
      </tr>
      <tr>
      <td><input style="background-color: #FFF;" type="tel" name="admin_phone" pattern="[0-9]{3}-?[0-9]{3}-?[0-9]{4}" required placeholder="123-123-1231"></td>
    </tr>
    <tr>
      <td>Website: </td>
      </tr>
      <tr>
      <td><input style="background-color: #FFF;" type="url" id="orderWebsite" placeholder="http://domain.com"  /></td>
    </tr>

    <tr>
      <td>Email: </td>
      </tr>
      <tr>
      <td><input style="background-color: #FFF;" type="email" id="orderEmail" placeholder="name@domain.com" required /></td>
    </tr>
    <tr>
      <td> Password: </td>
      </tr>
      <tr>
      <td> <input style="background-color: #FFF;" name="admin_password" type="password" required /> 
      </td>
    </tr>   
    <tr>
      <td><input type="submit" name="Submit" value="Register!" onclick="register()" /></td>
    </tr>
  </form>
</table>

Here is the PHP page it connects to:

<?php

$errorMsg = "";

// First we check to see if the form has been submitted 

if (isset($_POST['companys_name'])){

    //Connect to the database through our include 

    include_once "connect_to_mysql.php";

    // Filter the posted variables

    $companys_name = preg_replace("[^A-Za-z0-9]", "", $_POST['companys_name']); // filter everything but numbers and letters

    $admin_first_name = preg_replace("[^A-Za-z]", "", $_POST['admin_first_name']); // filter everything but letters

    $admin_phone = preg_replace("[^0-9]", "", $_POST['admin_phone']);// Filters everything except numbers

    $admin_email = preg_replace("[^A-Z a-z0-9]", "", $_POST['admin_email']); // filter everything but spaces, numbers, and letters

    $admin_url = preg_replace("[^A-Z a-z0-9]", "", $_POST['admin_url']); // filter everything but spaces, numbers, and letters

    $admin_last_name = preg_replace("[^A-Z a-z]", "", $_POST['admin_last_name']); // filter everything but spaces, numbers, and letters

    $admin_email = stripslashes($_POST['admin_email']);

    $admin_email = strip_tags($admin_email);

    $admin_email = mysql_real_escape_string($admin_email);

    $admin_password = preg_replace("[^A-Za-z0-9]", "", $_POST['admin_password']); // filter everything but numbers and letters

    // Check to see if the user filled all fields with

    // the "Required"(*) symbol next to them in the join form

    // and print out to them what they have forgotten to put in

    if((!$companys_name) || (!$admin_first_name) || (!$admin_phone) || (!$admin_last_name) || (!$admin_email) || (!$admin_password)){



        $errorMsg = "You did not submit the following required information!<br /><br />";

        if(!$companys_name){

            $errorMsg .= "--- Company Name";

        } else if(!$admin_first_name){ 

           $errorMsg .= "--- Phone Number 10 Digits"; 

        } else if(!$admin_phone){ 

           $errorMsg .= "--- Phone Number 10 Digits"; 

       } else if(!$admin_last_name){ 
           $errorMsg .= "--- Last Name"; 

       } else if(!$admin_email){ 

           $errorMsg .= "--- Email Address"; 

       } else if(!$admin_password){ 

           $errorMsg .= "--- Password"; 

       } 



    } else {

    // Database duplicate Fields Check

    $sql_companys_name_check = mysql_query("SELECT id FROM toc_companys WHERE companys_name='$companys_name' LIMIT 1");

    $sql_admin_email_check = mysql_query("SELECT id FROM toc_companys WHERE admin_email='$admin_email' LIMIT 1");

    $companys_name_check = mysql_num_rows($sql_companys_name_check);

    $admin_email_check = mysql_num_rows($sql_admin_email_check); 

    if ($companys_name_check > 0){ 

        $errorMsg = "<u>ERROR:</u><br />Your company name is already in use inside our system. Please try another.";

    } else if ($admin_email_check > 0){ 

        $errorMsg = "<u>ERROR:</u><br />Your Email address is already in use inside our system. Please try another.";

    } else {

        // Add MD5 Hash to the password variable

       //$hashedPass = md5($password); 

        // Add user info into the database table, claim your fields then values 

        $sql = mysql_query("INSERT INTO  toc_companys (companys_name, admin_first_name, admin_phone, admin_url, admin_last_name, admin_email, admin_password ) 

        VALUES('$companys_name', '$admin_first_name', '$admin_phone','$admin_url','$admin_last_name', '$admin_email','$admin_password', now())") or die (mysql_error());

        // Get the inserted ID here to use in the activation email

        $id = mysql_insert_id();

        // Create directory(folder) to hold each user files(pics, MP3s, etc.) 

        mkdir("memberFiles/$id", 0755); 

        // Start assembly of Email Member the activation link

        $to = "$admin_email";

        // Change this to your site admin email

        $from = "admin@5mutny.com";

        $subject = "Activate your account!";

        //Begin HTML Email Message where you need to change the activation URL inside

        $message = '<html>

        <body bgcolor="#FFFFFF">

        Hi ' . $admin_first_name . ' at ' . $companys_name . ',

        <br /><br />

        You must complete this step to activate your account with us.

        <br /><br />

        Please click here to activate now &gt;&gt;

        <a href="http://www.testsite.com/activation.php?id=' . $id . '">

        ACTIVATE NOW</a>

        <br /><br />

        Your Login Data is as follows: 

        <br /><br />

        E-mail Address: ' . $admin_email . ' <br />

        Password: ' . $admin_password . ' 

        <br /><br /> 

        Thanks! 

        </body>

        </html>';

        // end of message

        $headers = "From: $from\r\n";

        $headers .= "Content-type: text/html\r\n";

        $to = "$to";

        // Finally send the activation email to the member

        mail($to, $subject, $message, $headers);

        // Then print a message to the browser for the joiner 

        print "<br /><br /><br /><h4>OK $firstname, one last step to verify your email identity:</h4><br />

        We just sent an Activation link to: $admin_email<br /><br />

        <strong><font color=\"#990000\">Please check your email inbox in a moment</font></strong> to click on the Activation <br />

        Link inside the message. After email activation you can log in.";

        exit(); // Exit so the form and page does not display, just this success message

    } // Close else after database duplicate field value checks

  } // Close else after missing vars check

} //Close if $_POST

?>

My teacher wants me to make it so when someone clicks register, a JavaScript box will pop up asking the user to retype their password so that it will check vs. the inputbox one and if they are the same it will make their account if not it won't leave the page but it will tell them their passwords are not the same.

Answer 1

set id for your form, and add a box:

<form id="myform" action="join.php" method="get"  >
...
</form>
<div id="box" style="display: none; width: 100px; height: 100px; backgournd-color: #FFFFFF;">
  <input id="confirmPassword"/>
  <span id="info"></span>
  <button id="confirm">confirm</button>
</div

add script in the bottom of your .html

$('#myform').submit(function(){
  $('#box').show();
  return false; // cancel the submit action
});
$('confirm').click(function(){
  if($('input[value="admin_password"]').val().equal($('#confirmPassword').val())) {
    $('#myform').submit(); // to submit the form here
  } else {
    $('#info').text("passwords are not the same!").show().fadeOut(1000);
  }
});

Answer 2

Pseudocode via JQuery:

$('#submit').click(function(){
  $('#box').show();
});

$('#box > #confirm').click(function(){
  var firstInput = $('#firstInput').val();
  var secondInput = $('#secondInput').val();
  if(!firstInput.equal(secondInput)) {
    //do something if they are not the same
  }
});