Page 1 of 1

I hate JS

Posted: Thu Nov 03, 2005 5:03 am
by Ree

Code: Select all

function form_submit()
{
  year = /^\d{4}$/;
  start_year = document.my_form.adStartYear.value;
  end_year = document.my_form.adEndYear.value;

  if (!year.test(start_year))
  {
    alert('Starting year must be a number');
    return;
  }

  if (!year.test(end_year))
  {
    alert('Ending year must be a number');
    return;
  }

  document.my_form.action = 'list.php';
  document.my_form.submit();
}
What is wrong with this? It says 'object expected'.

Posted: Thu Nov 03, 2005 5:05 am
by Chris Corbyn
We can't tell without seeing the HTML it's linked to ;)

Note: Don't use IE's <span style='color:blue' title='I&#39;m naughty, are you naughty?'>smurf</span>fy JS error reporting it offers no debug help at all. Use the "JavaScript Console" in firefox... that's useful.

Posted: Thu Nov 03, 2005 5:21 am
by Ree

Code: Select all

<form method="post" action="search.php" name="my_form">
  <table border="0" cellspacing="0" cellpadding="4">
    <tr>
      <td style="text-align: right">* Starting Year:</td>
      <td style="text-align: left"><input type="text" name="adStartYear" maxlength="4" /></td>
    </tr>
    <tr>
      <td style="text-align: right">* Ending Year:</td>
      <td style="text-align: left"><input type="text" name="adEndYear" maxlength="4" /></td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: center"><input type="button" name="search" value="Search" onclick="form_submit()" /></td>
    </tr>
  </table>
</form>
Btw, for some reason FF is silent regarding this.

Posted: Thu Nov 03, 2005 5:39 am
by Chris Corbyn
Hmmm... what did firefox say? Which line etc.

I'm too used to the convenience of using DOM.

Code: Select all

function form_submit()
{
  year = /^\d{4}$/;
  start_year = document.getElementById('adStartYear').value;
  end_year = document.getElementById('adEndYear').value;

  if (!year.test(start_year))
  {
    alert('Starting year must be a number');
    return;
  }

  if (!year.test(end_year))
  {
    alert('Ending year must be a number');
    return;
  }

  document.getElementById('my_form').action = 'list.php';
  document.getElementById('my_form').submit();
} 



<form method="post" action="search.php" id="my_form" name="my_form">
  <table border="0" cellspacing="0" cellpadding="4">
    <tr>
      <td style="text-align: right">* Starting Year:</td>
      <td style="text-align: left"><input type="text" id="adStartYear" name="adStartYear" maxlength="4" /></td>
    </tr>
    <tr>
      <td style="text-align: right">* Ending Year:</td>
      <td style="text-align: left"><input type="text" id="adEndYear" name="adEndYear" maxlength="4" /></td>
    </tr>
    <tr>
      <td colspan="2" style="text-align: center"><input type="button" name="search" value="Search" onclick="form_submit()" /></td>
    </tr>
  </table>
</form>

Posted: Thu Nov 03, 2005 6:32 am
by Ree
Firefox doesn't tell anything. Can't seem to find what's wrong. For some reason I ALWAYS have problems with Javascript, even with simple stuff like this.

Posted: Thu Nov 03, 2005 7:09 am
by feyd
are you in standards compliance mode? If so, the form won't work (I believe.)

Posted: Thu Nov 03, 2005 7:33 am
by Ree
What do you mean? It's HTML 4.01 Trans. I won't believe I can't have a simple integer validation with JS. :)

Posted: Thu Nov 03, 2005 8:50 am
by Chris Corbyn
Ree wrote:What do you mean? It's HTML 4.01 Trans. I won't believe I can't have a simple integer validation with JS. :)
You're doing the validation wrong for a start :)

In your case, if you don't have JS, the form still shows, has a submit button (or not as the case may be), but when clicking the button, nothing would happen. How annoying would that be if I didn't know why?

Correct method... use the event handler onSubmit. That way, if JS is disbaled you can still submit without the validation.... do the checking on the server.

Code: Select all

function doCheck()
{
    if (document.getElementById('foo').value) return true;
    else return false;
}


<form action="foobar" method="post" onsubmit="return doCheck()">
<input type="text" id="foo" name="something" />
<input type="submit" name="submit" value="Submit Me!" />
</form>
Note: I think feyd may be referring to you "name" attribute in the <form> tags.... it's not allowed in XHTML methinks.

Posted: Thu Nov 03, 2005 9:23 am
by feyd
I was referring to having a table inside a form in standards mode..

Posted: Thu Nov 03, 2005 9:46 am
by pickle
A good JS validator is JSLint: http://www.crockford.com/jslint/index.html

I'm guessing that the !year.test(start_year) line is causing the error. The way you've got it set up, year isn't an object, so test can't be a function of it.

Posted: Thu Nov 03, 2005 9:56 am
by Weirdan
pickle wrote: The way you've got it set up, year isn't an object, so test can't be a function of it.
Isn't it an instance of RegExp?

Posted: Thu Nov 03, 2005 10:00 am
by Chris Corbyn
pickle wrote:I'm guessing that the !year.test(start_year) line is causing the error. The way you've got it set up, year isn't an object, so test can't be a function of it.
Heh.... Actually JavaScript supports a "regexp" object. Just like string objects.

You can explicitly declare:

Code: Select all

var year = new RegExp('pattern', 'modifiers');
Or you can just jump in and do it

Code: Select all

var year = /pattern/modifers
Then test() is actually a method of the regexp object "year.test(strint_to_test_against);". It returns true or false if the regex matches pattern. Another method is exec().

JS is a bit scattered with RegExp though, because you can do things another way too.... there are string methods which take a regex object as an argument (match(), replace()....)

Code: Select all

var foo = "a number: 123";
document.write( foo.replace( /^([a-z\s]+:\s*)(\d+)$/i, "$1XXX") );  //a number: XXX
I think that's right (*hopes*) :D

Posted: Thu Nov 03, 2005 10:02 am
by feyd
yes, year is a RegExp object, and yes d11 you are correct. :)

Posted: Thu Nov 03, 2005 10:06 am
by Chris Corbyn
feyd wrote:...and yes d11 you are correct. :)
Of course :P

<off-topic>

If you want to see proper regex, Play with some very basic perl.... none of this function names like preg_replace() or replace() or match(). The pattern itself contains the instructions for what you're doing.... it does! Trust me :P

</off-topic>

EDIT | Ohhh... I went all giddy and got a little bit excited by the regex there :oops: