The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Making 1 button perform 2 functions
SeanWoods
post 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.&quot;        
         <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 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 &quot;Get Estimate&quot; 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">&nbsp;</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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SeanWoods
post Apr 21 2009, 07:17 PM
Post #4


Member
***

Group: Members
Posts: 42
Joined: 23-March 09
Member No.: 8,142



QUOTE(pandy @ Apr 21 2009, 07:13 PM) *

Where's the rest of the second form and where are the scripts? Have a link to the page?


Oops, sorry. I put it all in there now.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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().

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SeanWoods
post Apr 21 2009, 07:43 PM
Post #6


Member
***

Group: Members
Posts: 42
Joined: 23-March 09
Member No.: 8,142



QUOTE(pandy @ Apr 21 2009, 07:29 PM) *

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()" />
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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()">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Apr 21 2009, 11:12 PM
Post #8


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(pandy @ Apr 22 2009, 10:06 AM) *

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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 22 2009, 12:23 AM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(SeanWoods @ Apr 22 2009, 02:43 AM) *

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. tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 02:52 AM