Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript: Use return key to fire onsubmit and focus outside form <input> field

    Hi all,

    Please keep in mind: this is the first code I have ever written -- much of it with help from this forum and the skeleton from other corners of the JS community. Thanks! But now for the problem...

    I'm developing am income tax calculator, and everything is going swell. Currently the user can type in their adjusted gross income (AGI), hit submit, and learn the amount of income tax they would pay, their tax rate, and their income after tax.

    I've played around with the events to get the submit button to work in FF, IE, Chrome and Safari -- and I've gotten the enter button to work before with some stock code, but here's the catch: when the user presses enter, i want the focus to leave the input box. I don't care where it goes (submit button, I suppose?) but i need it to leave the input field so the onfocus="clearText(this);" event can fire when they return to type in a new income.

    Any ideas? Thanks in advance.

    Code:
    <script language="javascript" type="text/javascript">
    function TotalGrossPerYear() {
    var Calc = document.NetIncome;
    if (Calc.InputRad[0].checked) {
    if ((Calc.AGI.value > 500000)) {
    Bracket3();
    }
    if ((Calc.AGI.value > 200000 ) && (Calc.AGI.value <= 500000)) {
    Bracket1();
    }
    if ((Calc.AGI.value <= 200000)) {
    Bracket2();
    }
    }
    else
    if (Calc.InputRad[1].checked) {
    if ((Calc.AGI.value > 1000000)) {
    Bracket3();
    }
    if ((Calc.AGI.value > 400000 ) && (Calc.AGI.value <= 1000000)) {
    Bracket1();
    }
    if ((Calc.AGI.value <= 400000)) {
    Bracket2();
    }
    }
    }
    function Bracket1() {
    var Calc = document.NetIncome;
    if (Calc.InputRad[0].checked) {
    Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 200000) ;
    Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ;
    Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
    Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
    }
    else {
    if (Calc.InputRad[1].checked) {
    Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 400000) ;
    Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * .05)) ;
    Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
    Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
    }
    }
    }
    function Bracket2() {
    var Calc = document.NetIncome;
    if (Calc.InputRad[0].checked) {
    Calc.TaxableIncome.value = 0 ;
    Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ;
    Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
    Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
    }
    else {
    if (Calc.InputRad[1].checked) {
    Calc.TaxableIncome.value = 0 ;
    Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) * 0.05)) ;
    Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
    Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
    }
    }
    }
    function Bracket3() {
    var Calc = document.NetIncome;
    if (Calc.InputRad[0].checked) {
    Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 200000) ;
    Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) - 300000) * 0.09) + (300000 * 0.05) ;
    Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
    Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
    }
    else {
    if (Calc.InputRad[1].checked) {
    Calc.TaxableIncome.value = (parseFloat(Calc.AGI.value) - 400000) ;
    Calc.AmtDue.value = Math.round((parseFloat(Calc.TaxableIncome.value) - 600000) * .09) + (600000 * 0.05) ;
    Calc.AmtLeft.value = (parseFloat(Calc.AGI.value) - parseFloat(Calc.AmtDue.value)) ;
    Calc.TaxRate.value = (parseFloat(Calc.AmtDue.value) / parseFloat(Calc.AGI.value) * 100).toFixed(2) + " %";
    }
    }
    }
    function Couple() {
    var Calc = document.NetIncome;
    Calc.AGI.value = "";
    Calc.TaxableIncome.value = "--------";
    Calc.AmtDue.value = "--------";
    Calc.AmtLeft.value = "--------";
    Calc.TaxRate.value = "--------";
    }
    function Individual() {
    var Calc = document.NetIncome;
    Calc.AGI.value = "";
    Calc.TaxableIncome.value = "--------";
    Calc.AmtDue.value = "--------";
    Calc.AmtLeft.value = "--------";
    Calc.TaxRate.value = "--------";
    }
    function clearText(thefield){
    if (thefield.value==thefield.value)
    thefield.value = ""
    }
    </script>
    
    </head>
    and the html...

    Code:
    <body>
    <form name=NetIncome>
    <table border=5>
    <th align=left>
    <ol>
    <li>Select Individual or Joint filing status.
    <li>Enter your Adjusted Gross Income.
    <li>Submit to calculate.
    <li>Please reset after each calculation.
    </ol>
    </th>
    <tr>
    <td><font size=5><input type=radio name=InputRad value=PerHour onclick="Individual()"><u>Individual</u>
    <input type=radio name=InputRad value=PerYear onclick="Couple()"><u>Joint</u></font></td>
    </tr>
    <tr><td><input type=text name=AGI size=30 id="txtExamplethree" onfocus="clearText(this);" onsubmit="TotalGrossPerYear();" onblur="this.value=this.value.replace(/[^\d\.]/g, '');" value="Select filing status" maxlength="20" />Adjusted Gross Income
    </td></tr>
    <tr><td><input type=text name=TaxableIncome id="txtExampletwo" readonly="readonly" size=30 value="">Taxable Income</td></tr>
    <tr><td><input type=text name=AmtDue id="txtExampleone" size=30 readonly="readonly" value="">Amount Due in Taxes</font></td></tr>
    <tr><td><input type=text name=AmtLeft id="txtExample" size=30 readoanly="readonly" value="">Income after Tax</font></td></tr>
    <tr><td><input type=text name=TaxRate size=10 readonly="readonly">Tax Rate</td></tr>
    <tr><td align=center><input type="button" value="Submit" onfocus="TotalGrossPerYear(); formatNumber(); formatNumberone(); formatNumbertwo(); formatNumberthree();" /><input type=reset value="Reset Form"></td></tr>
    </table>
    </form>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,985
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    You need some other focusable control to move the focus to.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So I would have to add a function to focus on the submit button, for example?

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How would I do that?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •