Making 1 button perform 2 functions |
Making 1 button perform 2 functions |
SeanWoods |
Apr 21 2009, 07:00 PM
Post
#1
|
Member Group: Members Posts: 42 Joined: 23-March 09 Member No.: 8,142 |
Hello,
I am working on my page that calculates the cost for my proofreading service. Cost Page I think my page is redundant because I have the user press one button to count the number of words in their document, and another button to calculate the price. I would like to eliminate the 1st button and only have them select the 2nd button to calculate the number of words and the price. I have tried several ways to combine them, but have not had any luck. Any ideas? CODE <script language="JavaScript"> function countit(){ var formcontent=document.wordcount.wordcount2.value formcontent=formcontent.split(" ") document.wordcount.wordcount3.value=formcontent.length document.quickcalculator.txtWordCount.value = formcontent.length; } function quickcalc(){ var numWords = document.quickcalculator.txtWordCount.value; var costEstimate; var numPages = Math.ceil(numWords/300); // Standard Cost Estimate costEstimate = numPages*5.00; document.estimates.txtStandardEst.value = "$" + costEstimate.toFixed(2); // Expedite Cost Estimate costEstimate = numPages*7.50; document.estimates.txtExpediteEst.value = "$" + costEstimate.toFixed(2); // Overnight Cost Estimate costEstimate = numPages*9.00; document.estimates.txtOvernightEst.value = "$" + costEstimate.toFixed(2); // Display the estimate table. document.getElementById("tblEstimates").style.display = "block"; } function goToCheckout(serviceOption){ var numWords = document.quickcalculator.txtWordCount.value; var checkoutUrl = "/checkout.php?"; window.location.href = checkoutUrl + "serv=" + serviceOption + "&words=" + numWords; } </script> <script type ="text/javascript" src="/scripts/header.js"></script> <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 "Count Words" to estimate the total number of words in your document. Your result will automatically appear in the "Number of Words" box below. Lastly, select "Get Estimate." <p>*Hint: To copy and paste, highlight all of the text in your document. Next, right click your mouse and select "copy." Click anywhere in the text box below, then right click your mouse and press "paste."<br> </td> </tr> <tr> <td class="pagetext" align="left" nowrap height="20"> <form method="POST" name="wordcount"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><textarea rows="12" name="wordcount2" cols="60" wrap="virtual"></textarea></td> </tr> <tr> <td width="100%"> <div align="left"> <p> <input type="button" value="Count Words" onClick="countit()"> <input type="text" name="wordcount3" size="20"></p> </div> </td> </tr> </table> </form> </td> </tr> </table> <table border="0" width="620" cellspacing="2" cellpadding="2"> <tr> <td class="pagetext"><h2><b>Estimate</b></h2> <p> Click "Get Estimate" for price details.<br /> </p></td> </tr> <tr> <td><form name="quickcalculator" id="quickcalculator"> <table> <tr> <td class="pagetext" width="150"> Number of Words: </td> <td><input type="text" name="txtWordCount" size="20" maxlength="20" /></td> <td><input type="button" value="Get Estimate" name="btnGetEstimate" onclick="quickcalc()" /> </td> </tr> </table> </form> <form name="estimates" id="estimates"> <table 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"> </td> </tr> <tr> <td class="pagetext"> Standard - 3 Day/72 Hour Return - $5.00 Per Page </td> <td><input type="text" name="txtStandardEst" size="20" maxlength="20" /> </td> <td><input type="button" value="Quick Checkout" name="btnCheckout" 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" size="20" maxlength="20" /> </td> <td><input type="button" value="Quick Checkout" name="btnCheckout" 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" size="20" maxlength="20" /> </td> <td><input type="button" value="Quick Checkout" name="btnCheckout" onclick="goToCheckout(3)" /> </td> </tr> </table> </form></td> </tr> </table> <p> <script type ="text/javascript" src="/scripts/footer.js"></script> </p> This post has been edited by SeanWoods: Apr 21 2009, 07:30 PM |
Darin McGrew |
Apr 21 2009, 07:03 PM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
I have moved this from the Markup forum to the Client-side Scripting forum.
|
pandy |
Apr 21 2009, 07:13 PM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Where's the rest of the second form and where are the scripts? Have a link to the page?
|
SeanWoods |
Apr 21 2009, 07:17 PM
Post
#4
|
Member Group: Members Posts: 42 Joined: 23-March 09 Member No.: 8,142 |
|
pandy |
Apr 21 2009, 07:29 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Just make the two functions countit() and quickcalc() into one function and have the single submit button call that. As far as I can see you don't need to make any changes to the scripts, just move the body of quickcalc() to the end of countit().
|
SeanWoods |
Apr 21 2009, 07:43 PM
Post
#6
|
Member Group: Members Posts: 42 Joined: 23-March 09 Member No.: 8,142 |
Just make the two functions countit() and quickcalc() into one function and have the single submit button call that. As far as I can see you don't need to make any changes to the scripts, just move the body of quickcalc() to the end of countit(). I think I have the onclick part correct, but how do I list the form info? Name, method, ID, etc. Here is what I had for the 1st button: CODE <form method="POST" name="wordcount"> Here is how I changed the 2nd button: CODE <form name="quickcalculator" id="quickcalculator"> <table> <tr> <td class="pagetext" width="150"> Number of Words: </td> <td><input type="text" name="txtWordCount" size="20" maxlength="20" /></td> <td><input type="button" value="Get Estimate" name="btnGetEstimate" onclick="quickcalc();countit()" /> |
pandy |
Apr 21 2009, 08:06 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
No, change the script. Put the content of both functions into one function.
Instead of this... CODE function countit(){ // count words script } function quickcalc(){ // estimate cost script } ... you do it like so. CODE function theNewFunction(){ // count words script // estimate cost script } HTML <input type="button" onclick="theNewFunction()"> |
Brian Chandler |
Apr 21 2009, 11:12 PM
Post
#8
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
No, change the script. Put the content of both functions into one function. Instead of this... CODE function countit(){ // count words script } function quickcalc(){ // estimate cost script } ... you do it like so. CODE function theNewFunction(){ // count words script // estimate cost script } HTML <input type="button" onclick="theNewFunction()"> I think better programming practice would be simply to make the function you are running (is this a javascript event handler?) like this: CODE function doesitall() { count(); estimate(); } It's always better to avoid big blocks of code, and make small functions, which start with comments giving a *specification* of exactly what the function does, what its parameters mean, etc. |
pandy |
Apr 22 2009, 12:23 AM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
but how do I list the form info? Name, method, ID, etc. Missed this. Keep name and id. Method you hardly need since the forms are never submitted as far as I could see. You can still have both forms. It doesn't matter where you put the button since it isn't a submit button but just a button-button. |
Lo-Fi Version | Time is now: 19th March 2024 - 02:52 AM |