JavaScript Forum

**chrisj** · 11:28 AM

I have this Form, where there is a field that requires a number to be entered into it.
How can I add the function where the number has to be re-entered into the next field, and match the original number field? I want to check that the number in both inputs is the same before the form will be submitted successfully
Thanks

Code:

<html>
<head>
  <title></title>
 
 
</head>
<body>
<br>
<h1 style="border-bottom:1px solid #dddcdc;"><br><center> Form</center></h1>
 
        <p><center><font face="verdana"><font size="2"><font color=#000000;"></font></font></p>
 
        <p><font face="verdana"><font size="2"><font color=#800000;">Please complete the simple form below.</font></font></p>
 
        <p><font face="verdana"><font size="2"><font color=#000000;">.</font></font></p>
 
        <p><font face="verdana"><font size="2"><font color=#000000;"> </font></font></center></p>
 
<!--<div style="height: 80px; background-color: #336699;">
  <span class="page_title"><span class="form_title">Form</span></span>
</div>-->
 
<br />
 
<table cellpadding="0" cellspacing="0" align="center" width="600">
<tr>
  <td>
    <font face="verdana"><font size="2"><font color=#800000;">[var.result]</font></font><font color="red"><strong>[var.error]</strong></font><br>
    <hr size="1" />
    <br />
 
    <form action="/page.php?page=14" method="post" name="contact_us" onSubmit="return capCheck(this);">
 
 
    <table cellpadding="0" width="100%">
    <tr>
  <td width="10" class="required_field">*</td>
      <td width="80">First Name:</td>
      <td><input type="text" name="name" maxlength="50" style="width:300px" /></td>
    </tr>
    <tr>
  <td class="required_field">*</td>
      <td>Last Name:</td>
      <td><input type="text" name="email" maxlength="40" style="width:300px" /></td>
    </tr>
    <tr>
  <td class="required_field">*</td>
      <td>Type:</td>
      <td><input type="text" name="custom1" maxlength="20" style="width:300px" /></td>
    </tr>
    <tr>
  <td class="required_field">*</td>
      <td>Number:</td>
      <td><input type="text" name="custom2" maxlength="20" style="width:300px" /></td>
    </tr>
    <tr>   
<tr>
      <td class="required_field">*</td>
      <td>Enter Image Code:</td>
      <td><input type="text" value="" name="captext" style="width: 100px" maxlength="6" /></td>
    </tr>
<tr>
      <td></td>
      <td><a onclick="refresh_security_image(); return false;" style="cursor:pointer;"><u>Refresh Image</u></a></td>
      <td><img src="includes/captcha.php" border="0" id="verificiation_image" /></a></td>
    </tr>
    </table>
<br>
 
<br>
    <p>
      <input type="hidden" name="submited" value="1" />
      <input type="submit" name="submit" value="Submit" />
    </p>
 
    </form>
 
  </td>
</tr>
</table>
<script type="text/javascript">
  <!--
  function refresh_security_image() {
 
  var new_url = new String("[var.base_url]/includes/captcha.php?width=132&amp;height=36&charcators=");
new_url = new_url.substr(0, new_url.indexOf("width=") + 37);
// we need a random new url so this refreshes
var chr_str = "123456789";
for(var i=0; i < 6; i++)
new_url = new_url + chr_str.substr(Math.floor(Math.random() * 2), 1);
document.getElementById("verificiation_image").src = new_url;
  }
  -->
 </script>
 
 <!-- captcha start -->
 <script type="text/javascript" id="clientEventHandlersJS" language="javascript">
 <!--
  function capCheck(theForm) {
var xmlhttp;
var sReply;
DataToSend = "action=process&captext=" + escape(theForm.captext.value);
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
xmlhttp.open("POST",'includes/process.php',false);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(DataToSend);
sReply = xmlhttp.responseText;
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("POST",'includes/process.php',false);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(DataToSend);
sReply = xmlhttp.responseText;
}
if (sReply == "good") {
return true;
} else if (sReply == "bad") {
alert("Security code not valid, please try again"); return false;
} else if (sReply == "") {
alert("You must enter the security code"); return false;
} else {
alert("Error"); return false;
}
}
  -->
  </script>
  <!-- captch end -->
 
</body>
</html>

**chrishirst** · 11-10-2009, 11:30 AM

Code:

function checkValues() {
if (document.formname.elementename.value == document.formnane.element2name.value) {
     document.formname.submitbuttonname.enabled = true;
}
}

Add onblur="checkValues()" to the second text input.

**chrisj** · 11-10-2009, 01:46 PM

Thank you for that code. I greatly appreciated it.
I've added it, but the code appears on the html page,
Would you be kind enought to tell me where I should add the
code so it won't appear? I tried a few things without success.
Thanks

**chrishirst** · 11-10-2009, 02:33 PM

It needs to be inside <script> tags because it's a javascript function.

**chrisj** · 11-10-2009, 02:53 PM

Thank you Chris for your help. Much appreciated.

Should I ask this in another thread?:
How/where can I add a message that will state "the fields don't match" when the values aren't equal?

thanks again

**chrishirst** · 11-10-2009, 02:59 PM

Code:

function checkValues() {
if (document.formname.elementename.value == document.formnane.element2name.value) {
     document.formname.submitbuttonname.enabled = true;
} else {
     alert("Fields do not match");
}
}

**chrisj** · 11-10-2009, 06:56 PM

Thanks for all of your help.
In the Form example below, the only message that appears, when the fields are mismatched is "B Numbers Do Not Match".

The other two fields, A1 Number and Confirm A2 Number, don't display the mismatch message when they're mismatched. Can you help me with that? Thanks.

Code:

<form action="/page.php/page=14" method="post" name="contact_us" onSubmit="return capCheck(this);">

    <table cellpadding="0" width="100%">
        <td class="required_field">*</td>
       <td>Your Email Address:</td>
       <td><input type="text" name="email" maxlength="40" style="width:300px" /></td>
     </tr>
    <tr>
    <td width="10" class="required_field">*</td>
      <td width="80">First Name:</td>
      <td><input type="text" name="firstname" maxlength="50" style="width:300px" /></td>
    </tr>
    <tr>
    <td class="required_field">*</td>
      <td>Last Name:</td>
      <td><input type="text" name="lastname" maxlength="40" style="width:300px" /></td>
    </tr>
    <tr>
    <td class="required_field">*</td>
      <td>A1 Number:</td>
      <td><input type="text" name="A1"  style="width:300px" maxlength="35" /></td>
    </tr>
    <tr>
    <td class="required_field">*</td>
      <td>Confirm A1 Number:</td>
      <td><input type="text" name="A2" onblur="checkValues()" style="width:300px" maxlength="35" /></td>
    </tr>
    <tr>
    <td class="required_field">*</td>
      <td>B1 Number:</td>
      <td><input type="text" name="B1" style="width: 300px" maxlength="35" /></td>
    </tr>
    <tr>
    <td class="required_field">*</td>
      <td>Confirm B1 Number:</td>
      <td><input type="text" name="B2" onblur="checkValues()" style="width: 300px" maxlength="35" /></td>
    </tr>
    </table>
<br>
<br>
    <p>
      <input type="hidden" name="submited" value="1" />
      <input type="submit" name="submit" value="Submit" />
    </p>
    </form>
  </td>
</tr>
</table>
<script>
  function checkValues() {
  if (document.contact_us.A1.value == document.contact_us.A2.value) {
       document.contact_us.submit.enabled = true;
       } else {
     alert("A Numbers Do Not Match");
  }
}
</script>
<script>
  function checkValues() {
  if (document.contact_us.B1.value == document.contact_us.B2.value) {
       document.contact_us.submit.enabled = true;
       } else {
     alert("B Numbers Do Not Match");
  }
}
</script>