停止在提交表单时添加URL参数

时间:2013-08-12 14:11:07

标签: javascript html forms url-parameters

好的,所以这可能是一个愚蠢的问题,但我正在尝试编写一个简单的JavaScript应用程序(请原谅我的术语,我是新手),其中包括一个表单,除了我正在做仅使用HTML和JS(和CSS),因此我使用document.getElementById访问表单中的值。

问题是Javascript函数应该根据表单值显示一些东西(它基本上是一个GPA计算器),但显示的东西只是在屏幕上闪烁,然后当我运行HTML文件时就会消失,当我通过我的实际域运行它时,根本不显示。我觉得这样做的原因是,在您提交表单后,会粘贴一堆URL参数,从而刷新HTML并删除新添加的innerHTML。

以下是我的表单代码:

<form id="calculator" name="calculator">
            <table>
                <thead>
                    <tr>
                        <td>Class Number</td>
                        <td>Grade</td>
                        <td>AP/Non-AP</td>
                        <td>GPA</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="classnumber">Class 1</td>
                        <td>
                            <select id="class1GPA" name="class1GPA">
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class1AP" name="class1AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class1disp">

                        </td>
                    </tr>
                    <tr>
                        <td class="classnumber">Class 2</td>
                        <td>
                            <select id="class2GPA" name="class2GPA">
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class2AP" name="class2AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class2disp">

                        </td>
                    </tr>
                    <tr>
                        <td class="classnumber">Class 3</td>
                        <td>
                            <select id="class3GPA" name="class3GPA">
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class3AP" name="class3AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class3disp">

                        </td>
                    </tr>
                    <tr>
                        <td class="classnumber">Class 4</td>
                        <td>
                            <select id="class4GPA" name="class4GPA">
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class4AP" name="class4AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class4disp">

                        </td>
                    </tr>
                    <tr>
                        <td class="classnumber">Class 5</td>
                        <td>
                            <select id="class5GPA" name="class5GPA">
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class5AP" name="class5AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class5disp">

                        </td>
                    </tr>
                    <tr>
                        <td class="classnumber">Class 6</td>
                        <td>
                            <select id="class6GPA" name="class6GPA">
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class6AP" name="class6AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class6disp">

                        </td>
                    </tr>
                    <tr>
                        <td class="classnumber">Class 7</td>
                        <td>
                            <select id="class7GPA" name="class7GPA">
                                <option value="none">N/A</option>
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class7AP" name="class7AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class7disp">

                        </td>
                    </tr>
                    <tr>
                        <td class="classnumber">Class 8</td>
                        <td>
                            <select id="class8GPA" name="class8GPA">
                                <option value="none">N/A</option>
                                <option value=4.4 selected>A+</option>
                                <option value=4.0>A</option>
                                <option value=3.7>A-</option>
                                <option value=3.4>B+</option>
                                <option value=3.0>B</option>
                                <option value=2.7>B-</option>
                                <option value=2.4>C+</option>
                                <option value=2.0>C</option>
                                <option value=1.7>C-</option>
                                <option value=1.4>D+</option>
                                <option value=1.0>D</option>
                                <option value=0.7>D-</option>
                                <option value=0>F</option>
                            </select>
                        </td>
                        <td>
                            <select id="class8AP" name="class8AP">
                                <option value=False selected>Regular Class</option>
                                <option value=True>AP Class</option>
                            </select>
                        </td>
                        <td id="class8disp">

                        </td>
                    </tr>
                    </br>
                </tbody>
            </table>
            <input onClick="showGPA()" id="submit" type="submit" value="Calculate!"/>
        </form>

应该处理它的Javascript(它实际上并没有显示平均值,但这比找出它为什么只是闪烁/不显示更重要):

function showGPA() {
var grades = {};
grades.classesNumber = 6
if (document.getElementById('class1AP').value === "True") {
    grades.class1 = parseFloat(document.getElementById('class1GPA').value) + 0.5;
} else {
    grades.class1 = parseFloat(document.getElementById('class1GPA').value);
}
document.getElementById('class1disp').innerHTML = grades.class1.toFixed(1);

if (document.getElementById('class2AP').value === "True") {
    grades.class2 = parseFloat(document.getElementById('class2GPA').value) + 0.5;
} else {
    grades.class2 = parseFloat(document.getElementById('class2GPA').value);
}
document.getElementById('class2disp').innerHTML = grades.class2.toFixed(1);

if (document.getElementById('class3AP').value === "True") {
    grades.class3 = parseFloat(document.getElementById('class3GPA').value) + 0.5;
} else {
    grades.class3 = parseFloat(document.getElementById('class3GPA').value);
}
document.getElementById('class3disp').innerHTML = grades.class3.toFixed(1);

if (document.getElementById('class4AP').value === "True") {
    grades.class4 = parseFloat(document.getElementById('class4GPA').value) + 0.5;
} else {
    grades.class4 = parseFloat(document.getElementById('class4GPA').value);
}
document.getElementById('class4disp').innerHTML = grades.class4.toFixed(1);

if (document.getElementById('class5AP').value === "True") {
    grades.class5 = parseFloat(document.getElementById('class5GPA').value) + 0.5;
} else {
    grades.class5 = parseFloat(document.getElementById('class5GPA').value);
}
document.getElementById('class5disp').innerHTML = grades.class5.toFixed(1);

if (document.getElementById('class6AP').value === "True") {
    grades.class6 = parseFloat(document.getElementById('class6GPA').value) + 0.5;
} else {
    grades.class6 = parseFloat(document.getElementById('class6GPA').value);
}
document.getElementById('class6disp').innerHTML = grades.class6.toFixed(1);

if (document.getElementById('class7GPA').value !== "none") {
    if (document.getElementById('class7AP').value === "True") {
        grades.class7 = parseFloat(document.getElementById('class7GPA').value) + 0.5;
    } else {
        grades.class7 = parseFloat(document.getElementById('class7GPA').value);
    }
    document.getElementById('class7disp').innerHTML = grades.class7.toFixed(1);
    grades.classesNumber++;
} else {
    grades.class7 = 0;
}

if (document.getElementById('class8GPA').value !== "none") {
    if (document.getElementById('class8AP').value === "True") {
        grades.class8 = parseFloat(document.getElementById('class8GPA').value) + 0.5;
    } else {
        grades.class8 = parseFloat(document.getElementById('class8GPA').value);
    }
    document.getElementById('class8disp').innerHTML = grades.class8.toFixed(1);
    grades.classesNumber++;
} else {
    grades.class8 = 0;
}

}

如何在表单提交时停止添加16个不同的URL参数?

现在我猜测为什么它不起作用可能是完全错误的,正如我所说的,我是新手。 (在尝试完成这项工作时,我注意到其中一个问题是我将.innerHTML拼写为.innnerHTML)

但如果有人可以帮助我完成这项工作,最好不要学习PHP或其他东西,那就太好了。谢谢!

3 个答案:

答案 0 :(得分:5)

提交表单时,它会对您指定的操作执行HTTP发布。如果您希望在此处在表单上运行一些javascript,并停止发布,请在提交时添加“return false”。

http://jsbin.com/icobam/2/edit

    <form id="calculator" name="calculator" onsubmit="return false;">

答案 1 :(得分:3)

<form id="calculator" name="calculator" onsubmit='showGPA();' method="post">

插入method="post"将阻止表单在网址中添加参数。

答案 2 :(得分:1)

从提交按钮中删除onclick语句:

<input onClick="showGPA()" id="submit" 

<input id="submit" 

将表单更改为:

<form id="calculator" name="calculator" onsubmit='showGPA(); return false;'>

注意:如果showGPA函数中存在任何javascript错误,则表单将被提交并导致页面刷新。防止这种情况的唯一方法是确保没有javascript错误。