Sending javascipt to my PHP page

SeanWoods

My page calculates the number of words that the user has with my wordcount function. It should send that word count # to the url on my php page. I cannot get it to send properly.

html page with the javascript: http://www.grammarperfection.com/cost.html

php page where data is send after button is pressed http://www.grammarperfection.com/checkout.php?serv=1words=0

I believe the problem is in the very begining of my javascript code.

I have

var numWords = 0;

What can I replace this with? It sends 0 to the url on my php page. If I take it out, the button to send the info does nothing.

<script language="JavaScript">
    var numWords = 0;

function giveEstimate( )
{
    var form = document.estimates;

var numWords = form.usertext.value.split(" ").length;
form.words.value = numWords;

var numPages = Math.ceil(numWords/300);

// Standard Cost Estimate
form.txtStandardEst.value = "$" + (numPages*5).toFixed(2);
// Expedite Cost Estimate
form.txtExpediteEst.value = "$" + (numPages*7.5).toFixed(2);
// Overnight Cost Estimate
form.txtOvernightEst.value = "$" + (numPages*9).toFixed(2);

// Display the estimate table.
document.getElementById("tblEstimates").style.display = "block";
}

function goToCheckout(serviceOption)
{
    var checkoutUrl = "/checkout.php?";    

    window.location.href = checkoutUrl + "serv=" + serviceOption + "words=" + numWords;
}

</script>
<script type ="text/javascript" src="/scripts/header.js"></script>
</head>
<body>
<form name="estimates" action="/checkout.php" method="post">
<input type=hidden name="serv" value="1">

<table width="620" border="0" align="center" cellpadding="2" cellspacing="2">
<tr>
    <td class="pagetext"><h1>How much does it cost?</h1>
        <h2>Cost Estimator </h2>
        <p>
        Copy and paste your document into the box below and click "Get Estimate" to estimate the total number of words 
        in your document and the estimated cost of three types of delivery.
        <p>
        *Hint: To copy and paste, highlight all of the text in your document. Next, right click your mouse and 
        select &quot;copy.&quot; Click anywhere in the text box below, then right click your mouse and 
        press &quot;paste.&quot;<br>
    </td>
</tr>
<tr>
    <td class="pagetext" align="left" nowrap>
        <textarea rows="12" name="usertext" cols="60" wrap="virtual"></textarea>
    </td>
</tr>
<tr>
    <td><hr></td>
</tr>
<tr>
    <td class="pagetext"><h2><b>Estimate</b></h2>
        <p> Click &quot;Get Estimate&quot; for price details.<br /></p>
    </td>
</tr>
<tr>
    <td>
        <table width="100%">
        <tr>
            <td width="33%" class="pagetext">Number of Words:</td>
            <td width="33%"><input type="text" name="words" size="10" readonly /></td>
            <td width="33%"><input type="button" value="Get Estimate" onclick="giveEstimate()" /></td>
        </tr>
        </table>
        <table width="100%" border="1" cellpadding="2" cellspacing="0" id="tblEstimates" style="display: none;">
        <tr>
            <td class="pagetext"><b>Service Option</b> </td>
            <td class="pagetext"><b>Cost Estimate</b> </td>
            <td class="pagetext">&nbsp;</td>
        </tr>
        <tr>
            <td class="pagetext"> Standard - 3 Day/72 Hour Return - $5.00 Per Page </td>
            <td><input type="text" name="txtStandardEst" readonly size="10" /></td>
            <td><input type="button" value="Quick Standard Checkout" onclick="goToCheckout(1)" /></td>
        </tr>
        <tr>
            <td class="pagetext"> Expedite - 2 Day/48 Hour Return - $7.50 Per Page </td>
            <td><input type="text" name="txtExpediteEst" readonly size="10" /></td>
            <td><input type="button" value="Quick Expedited Checkout" onclick="goToCheckout(2)" /></td>
       </tr>
       <tr>
            <td class="pagetext"> Overnight - 1 Day/24 Hour Return - $9.00 Per Page </td>
            <td><input type="text" name="txtOvernightEst" readonly size="10" /></td>
            <td><input type="button" value="Quick Overnight Checkout" onclick="goToCheckout(3)" /></td>
       </tr>
       </table>

</td>
</tr>
</table>
</form>
<p>
<script type ="text/javascript" src="/scripts/footer.js"></script>
</p>

etully

First of all, I can understand why you want to calculate the number in Javascript... but you don't have to pass that value up to the server. PHP is perfectly able to count the number of words for itself. (And as a security precaution, you should never have PHP trust the results that JS came up with anyway).

But second, if there was some reason why you needed to pass JS's numWords, you have to have the giveEstimate() function actually run so that numWords actually gets a value. For example, in this script, if I just press the Checkout button without pressing the Estimate button, then giveEstimate() will not have run and numWords still has it's "0" value (which it got from line 1).

Third, I would remove the "var" from line 7. You already established that numWords was a variable in line 1. There's no need to do it again on line 7 and it could actually be harmful because it can confuse the scope of numWords. Declaring it as a variable on line 1 is correct for this project because it gives it scope inside every function such as giveEstimate and gotoCheckout. But when you RE-declare it as a variable inside the giveEstimate function, you could be reducing its scope to just be available inside that function.

But most importantly, you really need to ask yourself why you're passing the word count up to PHP. PHP can figure it out by itself.