Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 4501

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Jan 15th, 2007

Need help with Javascript

Expand Post »

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

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.

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

Similar Threads

recommendations for JavaScript learning resources? in JavaScript / DHTML / AJAX
Javascript links not working in Web Browsers
JavaScript's window.opener in JavaScript / DHTML / AJAX
Javascript/HTML problem!!! in JavaScript / DHTML / AJAX
Javascript Useful? in IT Professionals' Lounge

Inny

Reputation Points: 11

Solved Threads: 6

Posting Whiz in Training

Offline

293 posts
since Oct 2005

Permalink

Jan 16th, 2007

Re: Need help with Javascript

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...

digital-ether

Moderator

Reputation Points: 457

Solved Threads: 101

Nearly a Posting Virtuoso

Offline

1,250 posts
since Sep 2005

Permalink

Jan 16th, 2007

Re: Need help with Javascript

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

Inny

Reputation Points: 11

Solved Threads: 6

Posting Whiz in Training

Offline

293 posts
since Oct 2005

Permalink

Jan 16th, 2007

Re: Need help with Javascript

Click to Expand / Collapse Quote 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..

digital-ether

Moderator

Reputation Points: 457

Solved Threads: 101

Nearly a Posting Virtuoso

Offline

1,250 posts
since Sep 2005

Permalink

Jan 16th, 2007

Re: Need help with Javascript

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

MattEvans

Moderator

Featured Poster

Reputation Points: 522

Solved Threads: 64

Veteran Poster

Offline

1,091 posts
since Jul 2006

Permalink

Jan 16th, 2007

Re: Need help with Javascript

Its a submit.

Inny

Reputation Points: 11

Solved Threads: 6

Posting Whiz in Training

Offline

293 posts
since Oct 2005

Permalink

Jan 16th, 2007

Re: Need help with Javascript

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

MattEvans

Moderator

Featured Poster

Reputation Points: 522

Solved Threads: 64

Veteran Poster

Offline

1,091 posts
since Jul 2006

Permalink

Jan 16th, 2007

Re: Need help with Javascript

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.

Inny

Reputation Points: 11

Solved Threads: 6

Posting Whiz in Training

Offline

293 posts
since Oct 2005

Permalink

Jan 17th, 2007

Re: Need help with Javascript

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:

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:

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.

digital-ether

Moderator

Reputation Points: 457

Solved Threads: 101

Nearly a Posting Virtuoso

Offline

1,250 posts
since Sep 2005

Permalink

Jan 17th, 2007

Re: Need help with Javascript

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

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)

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>

Inny

Reputation Points: 11

Solved Threads: 6

Posting Whiz in Training

Offline

293 posts
since Oct 2005

Page 1
2
Next

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Reply Back?

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: button Swapping

DaniWeb Message

Cancel Changes

User Name
Password