Question

在此页面的底部，您会看到“在此处输入EFC”的输入框。

JS文件在这里...... JavaScript File

当输入EFC分数时（出于测试目的，使用0到600之间的任何数字），我希望用户能够选择其中一个按钮，因为根据所选按钮，可能有两个可能的值。

我想为一个按钮创建一个脚本，为另一个按钮创建另一个脚本。这是我在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>

以下是我创建的JS文件中的示例...

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.');


}

我为另一个按钮所做的是复制相同的脚本并创建第二个'.js'文件，然后将变量从'efc'更改为'efc2'。但它没有用。

我希望我的解释足够清楚。如果您需要更多信息，请与我们联系。

Here's a jsfiddle可能有所帮助。但是，它不允许您在jsfiddle中提交表单...

Answer 1

首先不要嵌套表单，因为它无效。您可以在W3 specs找到更多信息。如果您不打算将值提交给服务器，也根本不需要表单元素。

如果您只需要通过点击按钮运行一些客户端逻辑，只需添加类似

的点击事件

<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%;" />

请将输入类型更改为按钮，因为您只需要运行JavaScript代码。这不是最好的方法，但它只需要对代码进行最少的更改。事实上，您最好使用JQuery订阅事件。

希望它有所帮助！

Answer 2

如果您要显示确认框，则根本不需要表格。我做了一个新的小提琴，向你展示你可以做到的一种方式。您的代码中没有第二个按钮的功能，因此我只使用了第一个函数showpell_12_13中的值。

小提琴具有所有代码，但基本上，我将切换到JQuery单击处理程序，然后调用函数/根据单击的按钮传递函数不同的值。

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 - 尝试允许一个输入，但两个输出按钮

2 个答案: