JavaScript - Trying to allow one input, but two output buttons

Question

At the base of this page, you'll see an input box for "Enter EFC Here".

The JS file is here... JavaScript File

When the EFC score is entered (for testing purposes, use any number between 0 and 600), I want the user to be able to select either of the buttons because there are two potential values possible, depending on the button chosen.

There's one script I want to come up for one button, and another script for the other button. This is the code I have in my HTML...

<form onsubmit="showpell_12_13(this.efc.value); return false;">
                    <form onsubmit="showpell_13_14(this.efc2.value); return false;">
    <div align="center"><strong><em>EFC Calculator:</em></strong></p><br />

                        <div align="center"><input type="text" name="efc" placeholder="Enter EFC Here" value="Enter EFC here..." onblur="if(this.value == ''){ this.value = 'Enter EFC here...'; this.style.color = '#ebebeb';}" onfocus="if(this.value == 'Enter EFC here...'){ this.value = ''; this.style.color = '#000';}" style="color:#000000;" title="EFC Calculator" maxlength="5"/>
  </div><br />
        <!--placeholder="Enter EFC Here" serves as placeholder for all browsers. Does not work for IE9 or below, hence the included JS, which allows placeholder in IE8-->

        <input type="submit" value="EFC - 12 / 13" style="margin-bottom: 10px; width: 40%;" />

        <input type="submit" value="EFC - 13 / 14" style="margin-bottom: 10px; width: 40%;" /><br />

        <input type="reset" value="Reset" style="margin-bottom: 10px; width: 31%;"/>

            </form>

Here is a sample from the JS file I created...

function showpell_12_13(efc) {


  var pell;
  var ssg;
  var estpay;
  var monthpay;

    if (efc == 0) {
        pell = 5550;
        ssg = 0;
        estpay = -483;
        monthpay = 0;
    }

    else if (efc <= 100) {
        pell = 5500;
        ssg = 0;
        estpay = -433;
        monthpay = 0;
    }

    else if (efc < 200) {
        pell = 5400;
        ssg = 0;
        estpay = -333;
        monthpay = 0;
    }

    else if (efc < 300) {
        pell = 5300;        
        ssg = 0;
        estpay = -233;
        monthpay = 0;
    }

    else if (efc < 400) {
        pell = 5200;        
        ssg = 0;
        estpay = -133;
        monthpay = 0;
    }

    else if (efc < 500) {
        pell = 5100;        
        ssg = 0;
        estpay = -33;
        monthpay = 0;
    }

    else if (efc < 600) {
        pell = 5000;        
        ssg = 67;
        estpay = 0;
        monthpay = 0;
    } 

 confirm('Based on the 2012-2013 EFC you entered ('+efc+'), you may receive...'
                +' \n.........................................................'
                +' \n-Potential PELL Grant Award: $'+pell+'.'
                +' \n.........................................................'
                +' \n-Potential Student Success Grant: $'+ssg+'.'
                +' \n.........................................................'
    +' \n-Tuition of 36 credits: $14,472' 
                +' \n.........................................................'
    +' \n-Direct Loan maximum for a Freshman* student: $9,405**' 
                +' \n.........................................................'
    +' \n-Your estimated total payment: $'+estpay+'.'
                +' \n.........................................................'
    +' \n-Your estimated monthly payment: $'+monthpay+'.'
                +' \n.........................................................'
    +' \n *Note: This is only configured for 1st year undergraduate students.'  
    +' \n **Loan fees of 1% are included in the loan rates listed on this sheet.');


}

What I've done for the other button is copy the same script over and created a second '.js' file, then changed the variable from 'efc' to 'efc2'. But it didn't work.

I hope my explanation is clear enough. Let me know if you need more information.

Here's a jsfiddle that might help. It's not, however, going to allow you to submit the form in jsfiddle...

**tldr;** Could you summarize somewhere please? All I can see there is a wall of code. — Jeff Noel, Jun 10 '13 at 17:17
Is that just a copy-paste error or did you really try to nest two forms in each other? — Bergi, Jun 10 '13 at 17:19
Is that the issue? Nesting the forms together? I'm not sure how to split them up and get the same result of one user input box, and two separate buttons for output... — Millhorn, Jun 10 '13 at 17:31
Yes. You cannot nest forms; only the closer one will be in charge of the inputs. — Bergi, Jun 10 '13 at 18:24
see the possible duplicate of [How can I get the button that caused the submit from the form submit event?](http://stackoverflow.com/questions/2066162/how-can-i-get-the-button-that-caused-the-submit-from-the-form-submit-event) (and the ones linked to there) — Bergi, Jun 10 '13 at 18:24

score 0 · Answer 1 · answered Jun 10 '13 at 18:38

First of all don't nest forms because it's not valid. You can find more info why here W3 specs. Also you don't need form element at all if you are not going to submit the values to the server.

If you just need to run some client-side logic by clicking on the buttons just add click events like that

<input type="button" onclick="showpell_12_13(this.value)" value="EFC - 12 / 13" style="margin-bottom: 10px; width: 40%;" />
<input type="button" onclick="showpell_13_14(this.value)" value="EFC - 13 / 14" style="margin-bottom: 10px; width: 40%;" />

Please change input type to button as you just need to run JavaScript code. The this not the best way to do it but it requires minimal changes to your code. In fact you would better use JQuery to subscribe to events.

Hope it helps!

score 0 · Accepted Answer · answered Jun 10 '13 at 18:40

If you are just going to display a confirm box, you do not need a form at all. I made a new fiddle to show you a way you could do it. There isn't a function for your second button in your code so I just used the values from the first function which is showpell_12_13.

The fiddle has all of the code but basically, I would switch to JQuery click handlers and then call a function/ pass the function different values based on which button is clicked.

http://jsfiddle.net/LJg6n/6/

$(function () {
    $('#efc_12_13_button').click(function () {
        var efc = $('#efc_value').val();

        var displayVals = setValuesForDisplay(efc);
        displayConfirmationBox(efc, displayVals.pell, displayVals.ssg, displayVals.estpay, displayVals.monthpay, "2012-2013");
    });

    $('#efc_13_14_button').click(function () {
        var efc = $('#efc_value').val();

        var displayVals = setValuesForDisplay(efc);
        displayConfirmationBox(efc, displayVals.pell, displayVals.ssg, displayVals.estpay, displayVals.monthpay, "2013-2014");
    });

    $('#reset_efc').click(function () {
        $('#efc_value').val('');
    });
});

JavaScript - Trying to allow one input, but two output buttons

2 Answers2