Question

我有一个经典的ASP应用程序，它使用动态表来提交库存信息。我在jQuery脚本中的所有函数，直到我到达.submit（）部分。我正在尝试检查是否提供了员工编号，以及在提交表单之前没有空白字段。有帮助吗？这是我的表格：

<form name="filter" id="theForm" method="GET" action="InventoryIssues.asp">
    <table class="normsideBG" align="center" cellpadding="4" cellspacing="0" border="1" bordercolor="lightgrey" width="600px">
        <tr class="norm">
            <td class="bigger headerBG" align="center" colspan=6>
            <b>Inventory Issues</b>
            </td>
        </tr>
        <tr class="norm">
            <td>

            </td>
        </tr>
        <tr class="norm">
            <td class="norm" align ="right">
                <b>Enter Employee Number: </b><input type="text" id="employeeNum" name="employeeNum" value = "<%=employeeNum %>" />
                <select id="hiddenBox" name="hiddenBox"  style="display: none" >
                </select>
                <input type="hidden" name="action" value="set_filter">
            </td>
        </tr>
        <tr>
            <td class="norm">
                To add more records click 'Add New Record'. Submit when all records are completed.
                <br />
                <br />
                <input style="text-align: right" type="hidden" name="hasValues" value="false" />
                <center>

                    <button type="button" id="addRec">Add New Record</button>&nbsp; &nbsp;
                    <button type="button" id="delRec">Remove Last Record</button><br /><br />
                    <input type="submit" id="sub" name="submit" class="norm" value="Submit"/>
                </center>
            </td>
        </tr>
    </table>
    <table id= "tb1" class="norm sideBG" name="recordTable" align="center" cellpadding="4" cellspacing="0" border="1" bordercolor="lightgrey" width="600px">
        <tr class="norm">
            <td>
                <b><u>PART #</u></b>
            </td>
            <td>
                <b><u>LOCATION</u></b>
            </td>
            <td>
                <b><u>QUANTITY</u></b>
            </td>
            <td>
                <b><u>WHERE USED</u></b>
            </td>
        </tr>
        <tbody class="theRow" id="theRow">
            <tr>
                <td class="norm">
                    <label id="partLabel" style="color : red;"></label>
                    <br />
                    <input type='text' name='txtbox0[]' id='txtbox0[]' onchange="javascript: changeLabel(this)" />
                </td>
                <td class="norm">
                    <select id="txtbox1[]" name="txtbox1[]" >

    </select>
                </td>
                <td class="norm">
                    <input type='text' name='txtbox2[]' id='txtbox2[]' />
                </td>
                <td class="norm">
                    <input type='text' name='txtbox3[]' id='txtbox3[]' />
                </td>
            </tr>
        </tbody>
    </table>
</form>

这是我的jQuery

'<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
<script>
$(document).ready(function()
{
    var ctr = 0;

    $("#addRec").click(function () 
    {
        var clone = $("#tb1 > tbody.theRow:last").clone();
        clone.find("input").val("");
        clone.insertAfter("#tb1 > tbody.theRow:last");
        $("#hasValues").val(true);
    });

    $("#delRec").click(function ()
    {
        $("#tb1:last tbody.theRow:last").remove();
    });

    alert("at least this works");
    $("form#theForm").submit(function(event)
    {
        var blankEmployeeNum;
        var blankFields = false;


        var inp = $("#employeeNum");
        if (inp.val().length  == 0 || inp.val() == Null)
        {
            alert("blank empoyee num");
            blankEmployeeNum = true;
        }
        else
        {
            alert("the employee num has a value");
            blankEmployeeNum = false;
        }

        $("#tb1 tr").each(function()
        {
            $("td", this).each(function()
            {   
                var value = $(this).find(":input").val()
                if (value.val().length == 0 || value.val() == Null)
                {
                    alert("there's a blank field");
                    blankFields = true;
                }
            });
        });
        if (blankEmployeeNum)
        {
            alert("Please go back and enter an employee number before submitting.");
            event.preventDefault();
        }
        else if (blankFields)
        {
            alert("One or more of the fields submitted were blank. Please go back and try again.";
            event.preventDefault();
        }
    });
});

Answer 1

存在脚本错误

更新

alert("One or more of the fields submitted were blank. Please go back and try again.";

到

alert("One or more of the fields submitted were blank. Please go back and try again.");

你错过了结束括号。

请注意，还有一些脚本错误。请通过登录控制台解决。

我发现很少有人喜欢changeLabel不是函数等。你真的需要在脚本上做很多工作。有很多错误。

Answer 2

您需要首先在提交函数内调用event.preventDefault（），否则事件会冒泡并提交表单。

$("form#theForm").submit(function(event) {
        event.preventDefault();

jQuery .submit（）函数在.ready（）函数内部不起作用

2 个答案: