Comparing two strings?

[Jamier101]

Hi,

I'm new to JavaScript but I've been trying to have a go at solving a problem I've got. I would like to compare to strings to ensure that a user has entered their e-mail address correctly into my form. Unfortunately I don't appear to be having much luck although I thought I had everything done correctly. Could somebody please take a look at my code and point me in the right direction?

  <tr>
  <td><div align="right">Address for invoices:</div></td>
  <td><input name="InvoiceEmail" type="text" size="40" value="" onkeyup="compare();" id="InvoiceEmail" /></td>
  <td></td>
  </tr>
  <tr>
  <td><div align="right">Please re-enter address:</div></td>
  <td><input name="ValInvoiceEmail" type="text" size="40" value="" onkeyup="compare();" id="ValInvoiceEmail" /></td>
  <td>
<script type="text/javascript">
var first=document.getElementById('InvoiceEmail').value;
var second=document.getElementById('ValInvoiceEmail').value;

if (parseStr(first)!=parseStr(second)) {
document.write("Error");
} else {
document.write("Okay")
};
//alert('E-mail addresses must match!');
</script>
  </td>
  </tr>

[Fotiman]

First, I stripped your code down to the bare basics, since all that table nonsense just adds distraction (you really should consider using markup that does not use tables for layout).

<input name="InvoiceEmail" type="text" size="40" value="" onkeyup="compare();" id="InvoiceEmail" />
<input name="ValInvoiceEmail" type="text" size="40" value="" onkeyup="compare();" id="ValInvoiceEmail" />
<script type="text/javascript">
var first=document.getElementById('InvoiceEmail').value;
var second=document.getElementById('ValInvoiceEmail').value;

if (parseStr(first)!=parseStr(second)) {
document.write("Error");
} else {
document.write("Okay")
};
//alert('E-mail addresses must match!');
</script>

An obvious problem is the use of document.write. You should avoid using document.write as it encourages bad practices, and also can't be used once the page has finished loading (it will replace your current document).

Next, I don't see a "compare" function defined anywhere, yet you're trying to call it onkeyup of both input elements. I also don't see a parseStr method defined anywhere, which you're using in your script.

Last, your first and second variables only get set as the script executes (while the page is loading). Presumably, you'd want something more like this:

function compare() {
  var first = document.getElementById('InvoiceEmail').value,
    second = document.getElementById('ValInvoiceEmail').value,
    result = document.getElementById('EmailCompareResult');
  if (parseStr(first) != parseStr(second)) {
    result.innerHTML = 'Error';
  }
  else {
    result.innerHTML = 'Okay';
  }
}

Then add an element with id 'EmailCompareResult' where you currently have the script element in your original example. See if that does what you need.

[Fotiman]

Note also, I kept the reference to parseStr, assuming you have this defined somewhere. This also could have been rewritten as:

function compare() {
  var first = document.getElementById('InvoiceEmail').value,
    second = document.getElementById('ValInvoiceEmail').value,
    result = document.getElementById('EmailCompareResult');
  result.innerHTML = (parseStr(first) != parseStr(second)? 'Error': 'Okay');
}