AJAX

Need help with Javascript

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2005

Posts: 240

Reputation: Inny is an unknown quantity at this point

Solved Threads: 6

Inny

Offline

Posting Whiz in Training

Need help with Javascript

Jan 15th, 2007

Hi folks, I need some help with A javascript thats basically a spam/swearword filter. Its designed to disable the submit button if a matching word from an array is found.

heres a working example

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script language="JavaScript1.2">
 
// Word Filter
 
 
var swear_words_arr=new Array("silly","crap","idiot","http");
var swear_alert_arr=new Array;
var swear_alert_count=0;
 
function reset_alert_count()
{
swear_alert_count=0;
}
 
function validate_text()
{
reset_alert_count();
var compare_text=document.formx.post.value;
for(var i=0; i<swear_words_arr.length; i++)
{
for(var j=0; j<(compare_text.length); j++)
{
if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).t
oLowerCase())
{
swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i
].length));
swear_alert_count++;
}
}
}
var alert_text="";
for(var k=1; k<=swear_alert_count; k++)
{
alert_text+="*" + "(" + k + ") " + swear_alert_arr[k-1];
}
if(swear_alert_count>0)
{
alert("Your post cannot be submitted.*The following Naughty words were found:*_______________________________*" + alert_text + "*_______________________________");
document.formx.post.select();
}
else
{
document.formx.submit();
}
}
 
function select_area()
{
document.formx.post.select();
}
 
window.onload=reset_alert_count;
 
</script>
 
 
 
<form name="formx" method="post" action="post">
 
<textarea rows="3" cols="40" name="post" style="border:2 solid #808080; font-family:verdana,arial,helvetica; font-weight:normal; font-size:10pt" onclick="select_area()">Enter your text here...</textarea>
 
<input type="button" style="background:#EFEFEF; border:2 solid #808080; width:100px; cursor:pointer" value="Submit" onclick="validate_text();">
</form>
<script language="JavaScript1.2">

// Word Filter


var swear_words_arr=new Array("silly","crap","idiot","http");
var swear_alert_arr=new Array;
var swear_alert_count=0;

function reset_alert_count()
{
swear_alert_count=0;
}

function validate_text()
{
reset_alert_count();
var compare_text=document.formx.post.value;
for(var i=0; i<swear_words_arr.length; i++)
{
for(var j=0; j<(compare_text.length); j++)
{
if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).t
oLowerCase())
{
swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i
].length));
swear_alert_count++;
}
}
}
var alert_text="";
for(var k=1; k<=swear_alert_count; k++)
{
alert_text+="*" + "(" + k + ") " + swear_alert_arr[k-1];
}
if(swear_alert_count>0)
{
alert("Your post cannot be submitted.*The following Naughty words were found:*_______________________________*" + alert_text + "*_______________________________");
document.formx.post.select();
}
else
{
document.formx.submit();
}
}

function select_area()
{
document.formx.post.select();
}

window.onload=reset_alert_count;

</script>



<form name="formx" method="post" action="post">

<textarea rows="3" cols="40" name="post" style="border:2 solid #808080; font-family:verdana,arial,helvetica; font-weight:normal; font-size:10pt" onclick="select_area()">Enter your text here...</textarea>

<input type="button" style="background:#EFEFEF; border:2 solid #808080; width:100px; cursor:pointer" value="Submit" onclick="validate_text();">
</form>

test here

http://leprofesseur.tripod.com/html-testbed.htm

Im trying to intergrate this into my ipb v1.3 forum for a specific forum only (guests). Having no luck despite my efforts. Heres what I tried (matching my system) but it still submits. Not sure how to 'href. match' for a specific forum url only.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script language="JavaScript1.2">
 
// Cant even post bad words Filter
 
var swear_words_arr=new Array("WORD1","WORD2","WORD3");
var swear_alert_arr=new Array;
var swear_alert_count=0;
 
function reset_alert_count()
{
swear_alert_count=0;
}
 
function validate_text()
{
reset_alert_count();
var compare_text=document.REPLIER.post.value;
for(var i=0; i<swear_words_arr.length; i++)
{
for(var j=0; j<(compare_text.length); j++)
{
if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).t
oLowerCase())
{
swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i
].length));
swear_alert_count++;
}
}
}
var alert_text="";
for(var k=1; k<=swear_alert_count; k++)
{
alert_text+="*" + "(" + k + ") " + swear_alert_arr[k-1];
}
if(swear_alert_count>0)
{
alert("Your post cannot be submitted.*The following Naughty words were found:*_______________________________*" + alert_text + "*_______________________________");
document.REPLIER.post.select();
}
else
{
document.REPLIER.submit();
}
}
 
function select_area()
{
document.REPLIER.post.select();
}
 
window.onload=reset_alert_count;
 
</script>
 
 
 
 
 
 
 
in submit input button put....
onclick="validate_text()"
 
in textarea put....
onclick="select_area()">
<script language="JavaScript1.2">

// Cant even post bad words Filter

var swear_words_arr=new Array("WORD1","WORD2","WORD3");
var swear_alert_arr=new Array;
var swear_alert_count=0;

function reset_alert_count()
{
swear_alert_count=0;
}

function validate_text()
{
reset_alert_count();
var compare_text=document.REPLIER.post.value;
for(var i=0; i<swear_words_arr.length; i++)
{
for(var j=0; j<(compare_text.length); j++)
{
if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).t
oLowerCase())
{
swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i
].length));
swear_alert_count++;
}
}
}
var alert_text="";
for(var k=1; k<=swear_alert_count; k++)
{
alert_text+="*" + "(" + k + ") " + swear_alert_arr[k-1];
}
if(swear_alert_count>0)
{
alert("Your post cannot be submitted.*The following Naughty words were found:*_______________________________*" + alert_text + "*_______________________________");
document.REPLIER.post.select();
}
else
{
document.REPLIER.submit();
}
}

function select_area()
{
document.REPLIER.post.select();
}

window.onload=reset_alert_count;

</script>







in submit input button put....
onclick="validate_text()"

in textarea put....
onclick="select_area()">

Any help appreciated thanks

•

Join Date: Sep 2005

Posts: 1,050

Reputation: digital-ether is just really nice

Solved Threads: 65

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: Need help with Javascript

Jan 16th, 2007

Hi,[HTML][/HTML]

You should put some alerts in your code to see if it is actually being run or not, and to see if the variables are changing as expected...

You could probably just check word for word also by creating an array of words out of the form field value.

eg:

var arr = document.formx.post.value.split(/[\s\.,\-]+/);

Then matching the words in the array to each "spam word".

Here's an prototype of the Array() that returns the index of a matched value..

[HTML]Array.prototype.in_array = function(value) {
for (var x = 0; x < this.length; x++) {
if (this[x] == value) {
return x;
}
}
return -1;
};[/HTML]

eg:

[HTML]
...
if (swear_words_arr.in_array(word.toLowerCase()) != -1) {
// spam word found
}
...[/HTML]

That way you don't have to match character for character...

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!

•

Join Date: Oct 2005

Posts: 240

Reputation: Inny is an unknown quantity at this point

Solved Threads: 6

Inny

Offline

Posting Whiz in Training

Re: Need help with Javascript

Jan 16th, 2007

Thanks. For some reason I just tested it in a testbed (my 'working' example *cough* and it didnt work! ?? help clueless!

•

Join Date: Sep 2005

Posts: 1,050

Reputation: digital-ether is just really nice

Solved Threads: 65

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: Need help with Javascript

Jan 16th, 2007

•

Originally Posted by Inny

Thanks. For some reason I just tested it in a testbed (my 'working' example *cough* and it didnt work! ?? help clueless!

You mean when you put in the alerts they were never fired?

Regarding:

[HTML]onclick="validate_text()"[/HTML]

Is this onclick on an input of type="button" or type="submit" ? If its of type="submit" then the form every time..

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: Need help with Javascript

Jan 16th, 2007

You shouldn't use JavaScript for restrictive/non-helpful form validation. It's amusingly easy to bypass.

Plato forgot the nullahedron..

•

Join Date: Oct 2005

Posts: 240

Reputation: Inny is an unknown quantity at this point

Solved Threads: 6

Inny

Offline

Posting Whiz in Training

Re: Need help with Javascript

Jan 16th, 2007

Its a submit.

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: Need help with Javascript

Jan 16th, 2007

An onsubmit event handler would probably be more use, and it's a form event rather than a button/input event.

http://www.htmlcodetutorial.com/form..._onSubmit.html

Last edited by MattEvans; Jan 16th, 2007 at 1:26 pm. Reason: grammar

Plato forgot the nullahedron..

•

Join Date: Oct 2005

Posts: 240

Reputation: Inny is an unknown quantity at this point

Solved Threads: 6

Inny

Offline

Posting Whiz in Training

Re: Need help with Javascript

Jan 16th, 2007

Arrrrrgh! Thanks people I appreciate your input but Im just too daft to make the thing work im afraid. My knowledge is very very basic.

•

Join Date: Sep 2005

Posts: 1,050

Reputation: digital-ether is just really nice

Solved Threads: 65

digital-ether digital-ether is offline

Offline

Veteran Poster

Re: Need help with Javascript

Jan 17th, 2007

don't give up yet! You're so close..

Since the onclick event listener is attached to a submit field rather than just a button, the form will be submitted no matter what. Your onclick event listerner will most likely not complete execution.

What you can do is change the field to a type="button" instead of type="submit".
Then the form will not be submitted unless you submit it via javascript with the form.submit() method.

However, a better way of doing it is to attach an event Listener to the form submit method, as Matt said.
This allows a user without javascript on their browser to submit the form, but users with javascript to have the form validation.

You could do it like:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
document.formx.onsubmit = function() {
 
// paste the form validation code you have here.. 
// then use "return false;" to not send the form, and "return true;" to send it.
 
};
document.formx.onsubmit = function() {

// paste the form validation code you have here.. 
// then use "return false;" to not send the form, and "return true;" to send it.

};

A better way to attach event listerners is to use the W3C DOM method: addEventListener()

http://developer.mozilla.org/en/docs...dEventListener

and use the M$ implementation, attachEvent(), where needed.

Heres one implementation:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
addEvent = function(el, evType, fn, useCapture) {
	if (el.addEventListener) {
		el.addEventListener(evType, fn, useCapture);
		return true;
	}
	else if (el.attachEvent) {
		var r = el.attachEvent('on' + evType, fn);
		return r;
	}
	else {
		el['on' + evType] = fn;
	}
}
addEvent = function(el, evType, fn, useCapture) {
	if (el.addEventListener) {
		el.addEventListener(evType, fn, useCapture);
		return true;
	}
	else if (el.attachEvent) {
		var r = el.attachEvent('on' + evType, fn);
		return r;
	}
	else {
		el['on' + evType] = fn;
	}
}

that way you can attach multiple events, and also not overwrite any events that are attached by other parts of the script.

Off course when you use JS form validation, it should be considered as helping the form user, nothing more.
I wrote something on this last night: http://fijiwebdesign.com/content/view/93/77/ (its not finished)
JS form validation is very useful in helping the user out however since close to 100% of users have JS on their browser.

www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!

•

Join Date: Oct 2005

Posts: 240

Reputation: Inny is an unknown quantity at this point

Solved Threads: 6

Inny

Offline

Posting Whiz in Training

Re: Need help with Javascript

#10

Jan 17th, 2007

Thanks fopr the encouragement!

this does indeed work well (see below) but Im not sure how to integrate/make changes to my form (below that) to work.

[please assist if you havent run out of patientts

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script language="JavaScript1.2">
var swear_words_arr=new Array("silly","bloody","idiot","*******");
var swear_alert_arr=new Array;
var swear_alert_count=0;
 
function reset_alert_count()
{
 swear_alert_count=0;
}
 
function validate_user_text()
{
 reset_alert_count();
 var compare_text=document.form1.user_text.value;
 for(var i=0; i<swear_words_arr.length; i++)
 {
  for(var j=0; j<(compare_text.length); j++)
  {
   if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).toLowerCase())
   {
    swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i].length));
    swear_alert_count++;
   }
  }
 }
 var alert_text="";
 for(var k=1; k<=swear_alert_count; k++)
 {
  alert_text+="\n" + "(" + k + ")  " + swear_alert_arr[k-1];
 }
 if(swear_alert_count>0)
 {
  alert("The form cannot be submitted.\nThe following illegal words were found:\n_______________________________\n" + alert_text + "\n_______________________________");
  document.form1.user_text.select();
 }
 else
 {
  document.form1.submit();
 }
}
 
function select_area()
{
 document.form1.user_text.select();
}
 
window.onload=reset_alert_count;
 
</script>
 
 
 
<form name="form1" method="post" action="your_post_address.asp">
 
<table><tr><td></td></tr></table>
<textarea rows="3" cols="40" name="user_text" style="border:2 solid #808080; font-family:verdana,arial,helvetica; font-weight:normal; font-size:10pt" onclick="select_area()">Enter your text here...</textarea>
<table><tr><td></td></tr></table>
<center><input type="button" style="background:#EFEFEF; border:2 solid #808080; width:100px; cursor:pointer" value="Submit" onclick="validate_user_text();"></center>
</form></form>
<script language="JavaScript1.2">
var swear_words_arr=new Array("silly","bloody","idiot","*******");
var swear_alert_arr=new Array;
var swear_alert_count=0;

function reset_alert_count()
{
 swear_alert_count=0;
}

function validate_user_text()
{
 reset_alert_count();
 var compare_text=document.form1.user_text.value;
 for(var i=0; i<swear_words_arr.length; i++)
 {
  for(var j=0; j<(compare_text.length); j++)
  {
   if(swear_words_arr[i]==compare_text.substring(j,(j+swear_words_arr[i].length)).toLowerCase())
   {
    swear_alert_arr[swear_alert_count]=compare_text.substring(j,(j+swear_words_arr[i].length));
    swear_alert_count++;
   }
  }
 }
 var alert_text="";
 for(var k=1; k<=swear_alert_count; k++)
 {
  alert_text+="\n" + "(" + k + ")  " + swear_alert_arr[k-1];
 }
 if(swear_alert_count>0)
 {
  alert("The form cannot be submitted.\nThe following illegal words were found:\n_______________________________\n" + alert_text + "\n_______________________________");
  document.form1.user_text.select();
 }
 else
 {
  document.form1.submit();
 }
}

function select_area()
{
 document.form1.user_text.select();
}

window.onload=reset_alert_count;

</script>



<form name="form1" method="post" action="your_post_address.asp">

<table><tr><td></td></tr></table>
<textarea rows="3" cols="40" name="user_text" style="border:2 solid #808080; font-family:verdana,arial,helvetica; font-weight:normal; font-size:10pt" onclick="select_area()">Enter your text here...</textarea>
<table><tr><td></td></tr></table>
<center><input type="button" style="background:#EFEFEF; border:2 solid #808080; width:100px; cursor:pointer" value="Submit" onclick="validate_user_text();"></center>
</form></form>

my form that needs changing...(relavent Parts)

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 
<textarea cols='70' rows='8' name='Post' class='textinput'  tabindex="1">
</textarea>
<BR>
<BR>
<a href="http://www.upload3r.com/"target="_blank">Alternate upload Click here (paste url)</a>
<BR>
<BR>
{ibf.lang.upload_title}Attach single image
{ibf.lang.upload_text} $data<input class='textinput' type='file' size='30' name='FILE_UPLOAD' /><BR><BR>
 
<input type='checkbox' name='enableemo' value='yes' class="checkbox" checked="checked" />&nbsp;{ibf.lang.qr_add_smilie} |
<input type='checkbox' name='enablesig' value='yes' class="checkbox" checked="checked" />&nbsp;{ibf.lang.qr_add_sig}
 
</TD></TR>
</Table>
 
<div align='center'> 
<input type='submit' name='submit' value='Submit' class='forminput' tabindex="2" accesskey="s" />&nbsp;
<input type='submit' name='preview' value='{ibf.lang.qr_more_opts}' class='forminput' />
&nbsp;&nbsp; <input type='button' name='qrc' onclick="ShowHide('qr_open','qr_closed');" value='{ibf.lang.qr_closeit}' class='forminput' />
</div>
</div>
</form>
<textarea cols='70' rows='8' name='Post' class='textinput'  tabindex="1">
</textarea>
<BR>
<BR>
<a href="http://www.upload3r.com/"target="_blank">Alternate upload Click here (paste url)</a>
<BR>
<BR>
{ibf.lang.upload_title}Attach single image
{ibf.lang.upload_text} $data<input class='textinput' type='file' size='30' name='FILE_UPLOAD' /><BR><BR>

<input type='checkbox' name='enableemo' value='yes' class="checkbox" checked="checked" />&nbsp;{ibf.lang.qr_add_smilie} |
<input type='checkbox' name='enablesig' value='yes' class="checkbox" checked="checked" />&nbsp;{ibf.lang.qr_add_sig}

</TD></TR>
</Table>

<div align='center'> 
<input type='submit' name='submit' value='Submit' class='forminput' tabindex="2" accesskey="s" />&nbsp;
<input type='submit' name='preview' value='{ibf.lang.qr_more_opts}' class='forminput' />
&nbsp;&nbsp; <input type='button' name='qrc' onclick="ShowHide('qr_open','qr_closed');" value='{ibf.lang.qr_closeit}' class='forminput' />
</div>
</div>
</form>