JS Form Math: reads spaces as words

[mattboy_slim]

SOURCE LINK:
http://www.lakesnewsshopper.com/submit.asp

I have a javascript form where a user submits a classified ad. Problem is, that when they go to check the price of the ad, if they have put 2 spaces at the end of a sentence, it reads it as 1 extra word.

Example:

my name is matt. I have blonde hair. = 9 words
my name is matt. I have blonde hair. = 8 words


Does anyone know how I can edit the code to ignore double spaces, and not count them as words?

SOURCE LINK:
http://www.lakesnewsshopper.com/submit.asp

thanks for the help, you guys have been great help so far

Matt

[Philip M]

field.value = field.value.replace(/\s+/g , ' ');

will replace multiple whitespaces by one whitespace.

[mattboy_slim]

Sorry Philip, I'm javascript-stupid. How do I implement that into my current code?

[Philip M]

You need to modify your page as follows:-

// This collapses two or more whitespaces to one
frm.Ad_Wording.value = frm.AdWording.value.replace(/\s+/g , ' ');
// This will get a number of total words.
wordCount=frm.Ad_Wording.value.split(" ");

[mattboy_slim]

Do I need to make a new function for that to work, or can I just toss it in somewhere?

[Philip M]

No, you cannot just toss it in anywhere.

Add these two NEW LINES:-

// This collapses two or more whitespaces to one
frm.Ad_Wording.value = frm.AdWording.value.replace(/\s+/g , ' ');

right in front of these two EXISTING LINES:-

// This will get a number of total words.
wordCount=frm.Ad_Wording.value.split(" ");

This is within the existing function:-


function chargeWords()
{
frm = document.form1;
chargeWordCount = 0; // Zero-out chargeWordCount before re-calculating them
wordLimit = 30; // Sets number of words before addt'l charges are added
wordCost = .05; // Sets cost of addt'l words over wordLimit
baseCost = 6; // Sets base cost of add


// This collapses two or more whitespaces to one
frm.Ad_Wording.value = frm.AdWording.value.replace(/\s+/g , ' ');

// This will get a number of total words.
wordCount=frm.Ad_Wording.value.split(" ");

OK?

You have added the following - cut it out!

<script language="javascript" type="text/javascript">
// This collapses two or more whitespaces to one
frm.Ad_Wording.value = frm.AdWording.value.replace(/\s+/g , ' ');
// This will get a number of total words.
wordCount=frm.Ad_Wording.value.split(" ");
</script>

OK?

[mattboy_slim]

Sorry Philip, I misunderstood your first reply.

I put it in there how you stated, but now my "Calculate Ad Cost" button does not work.

Please advise.

Thanks again,
Matt

[Philip M]

I think an extra space has got into

frm.Ad_Wording.value = frm.AdWording.value.replace(/\s+/g , ' ');

the space after the g and before the comma.


It should read

frm.Ad_Wording.value = frm.AdWording.value.replace(/\s+/g, ' ');

Try that!

[mattboy_slim]

Good eye, let me give that a try.

[mattboy_slim]

Sorry, the button still doesn't work.

[whammy]

<script type="text/javascript">
<!--
function countwords(x){
var w = x.split(/\s+/);
return (w != "") ? w.length : 0;
}
// -->
</script>

<input type="text" onblur="alert(countwords(this.value))" />


P.S. I left out the FORM tag, which is necessary in correct HTML, and other necessary tags, for testing purposes. If I'm not mistaken though (and I use forms 24/7 almost), this should be the solution you are looking for. :)

[Philip M]

Whammy - thank you for your help, but you have lost us! Mattboy is a Javascript virgin and I am only Grade 2!

Please can you sugguest why the line of code which I suggested is throwing an error?

Mattboy - if you want to use Whammy's elegant script you will need to change the variable w to wordCount (note the capitalisation).


That is:-

<script type="text/javascript">
<!--
function countwords(x){
var wordCount = x.split(/\s+/);
return (wordCount != "") ? wordCount.length : 0;
}
// -->
</script>


Javascript is very sensitive and syntax and capitalisation errors will stop it working. Are you sure that in altering your script as I suggested you have not accidentally messed up something else?

[Adam20002]

Hi,

Philip - You're regular expression was exactly correct and would do the job of condensing all multiple spaces into a single space so a correct length value could be obtained to costing.

Whammys regular expression will split the string on finding multiple space thus obtaining a word count there and then.

frm.Ad_Wording.value is null or not an object is the error message.



function chargeWords()
{
frm = document.form1;
chargeWordCount = 0; // Zero-out chargeWordCount before re-calculating them
wordLimit = 30; // Sets number of words before addt'l charges are added
wordCost = .05; // Sets cost of addt'l words over wordLimit
baseCost = 6; // Sets base cost of add

// This collapses two or more whitespaces to one
frm.Ad_Wording.value = frm.AdWording.value.replace(/\s+/g, ' ');

// This will get a number of total words.
wordCount=frm.Ad_Wording.value.split(" ");

// This will find out how many words are over 30.
if(wordCount.length >= wordLimit)
{
chargeWordCount=wordCount.length-wordLimit;
}
else
{
chargeWordCount = 0;
}

// If there are no words over 30, there is standard charge.
// Otherwise, charge 5 cents per page.
if (chargeWordCount < 1) chargeAmount=0.00;
else chargeAmount=chargeWordCount*wordCost;

//Add the $6.00 base charge
totalCost = parseFloat(baseCost) + parseFloat(chargeAmount);

document.form1.amount.value=formatCurrency(totalCost);
alert('Your advertisement will cost '+formatCurrency(totalCost));
}


the highlighed lines of code refer to a frm.Ad_Wording when it should be frm.Ad_wording with a lowercase w. Also one the first line of highlighted code it refers to a frm.AdWording. So i think thats why it wasn't working rather than PhilipM's regular expression.

Having said that using Whammys code would be far more effecient :)

Adam

[mattboy_slim]

So do I have to add the "onblur" value to my current textarea where the ad text is typed?

[mattboy_slim]

I did add the onblur value to my current textarea, but what I didn't realize is that it pops up an alert telling me how many words are in the box, when I already have an alert telling me how much the ad costs.

View the current page:
http://www.lakesnewsshopper.com/submit.asp

And the page with Whammy's code added:
http://www.lakesnewsshopper.com/submit2.asp

Please advise on what to do.

Thanks,
Matt

[whammy]

Ok, you don't need the onblur alert, that was just an example of how to use it. What you can do is this:


function formatCurrency(num)
{
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num)) num = "0";

sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();

if(cents<10) cents = "0" + cents;

for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
{
num = num.substring(0,num.length-(4*i+3))+','+num.substring(num.length-(4*i+3));
}

return (((sign)?'':'-') + '$' + num + '.' + cents);
}

function countWords(str)
{
var wordCount = str.split(/\s+/);
return (wordCount != "") ? wordCount.length : 0;
}

function chargeWords()
{
frm = document.form1;
chargeWordCount = 0; // Zero-out chargeWordCount before re-calculating them
wordLimit = 30; // Sets number of words before addt'l charges are added
wordCost = .05; // Sets cost of addt'l words over wordLimit
baseCost = 6; // Sets base cost of add

// This will get a number of total words.
wordCount=countWords(frm.Ad_Wording.value);

// This will find out how many words are over 30.
if(wordCount.length >= wordLimit)
{
chargeWordCount=wordCount.length-wordLimit;
}
else
{
chargeWordCount = 0;
}

// If there are no words over 30, there is standard charge.
// Otherwise, charge 5 cents per page.
if (chargeWordCount < 1) chargeAmount=0.00;
else chargeAmount=chargeWordCount*wordCost;

//Add the $6.00 base charge
totalCost = parseFloat(baseCost) + parseFloat(chargeAmount);

document.form1.amount.value=formatCurrency(totalCost);
alert('Your advertisement will cost '+formatCurrency(totalCost));
}


Which should now ignore extra spaces... If I were you I would only add/replace the lines in red though, in case the forum messed up any syntax.

[mattboy_slim]

Now no matter how many words are in the textarea, the ad shows up as costing $6.00

http://www.lakesnewsshopper.com/submit.asp

[whammy]

// This will find out how many words are over 30.
if(wordCount.length >= wordLimit)
{
chargeWordCount=wordCount.length-wordLimit;
}

The code above is wrong... wordCount is already a number, don't use wordCount.length !!! just wordCount

[mattboy_slim]

Whammy, you are awesome. Thanks for being so patient with me through the ASP and javascript issues. Seriously, you don't know how much brain-ache you've saved me.

This place is great. Just great.

[Adam20002]

LOL ! I wake up with brain ache every morning.

[Philip M]

Some confusion - is the form referred to as:-

wordCount=countWords(frm.Ad_Wording.value);

or

wordCount=countWords(frm.Ad_wording.value);

Javascript is case sensitive.

[whammy]

I did a search to make sure that the textarea was indeed named Ad_Wording :) And thanks, mattboy_slim, always glad to help... this is where I learned a lot of this stuff, myself. :)