2

我的页面在没有检查验证或显示警报的情况下立即提交。我相信提交会提前触发，但我的问题是我有多个表单吗？

我的问题是如何让提交工作，因为它应该在检查验证的地方工作，如果成功，显示确认？

我不得不发布我的整个代码，以便您可以看到代码的顺序，因为代码的顺序可能是我的失败：

    <script type="text/javascript">
    $(document).ready(function () {

        $('#sessionsDrop').change(function () {

            $('#targetdiv').hide();

            if ($(this).val() !== '') {
                var text = $(this).find('option:selected').text();
                var split = text.split(' - ');
                $('#currentId').val($(this).find('option:selected').val());
                $('#currentAssessment').val(split[0]);
                $('#currentDate').val(split[1]);
                $('#currentTime').val(split[2]);
            } else {
                $('#currentAssessment,#currentDate,#currentTime,#currentId').val('');
            }
        });

    });


    function validation(e) {

        var isDataValid = true;

        var moduleTextO = document.getElementById("modulesDrop");

        var errModuleMsgO = document.getElementById("moduleAlert");

        if (moduleTextO.value == "") {
            $('#targetdiv').hide();
            $('#assessmentForm').hide();
            $('#choiceForm').hide();
            $('#submitchoicebtn').hide();
            errModuleMsgO.innerHTML = "Please Select a Module";
            isDataValid = false;
        } else {
            errModuleMsgO.innerHTML = "";
        }

        if (isDataValid === false) {
            if (e.preventDefault) {
                e.preventDefault();
                e.stopPropagation(); //VERY important
            }
            e.returnValue = false;
            e.cancelBubble = true;
        }

        return isDataValid;

    }

    function choicevalidation() {

        var isDataValid = true;

        var currentAssesO = document.getElementById("currentAssessment");

        var currentAssesMsgO = document.getElementById("currentAlert");

        currentAssesMsgO.innerHTML = "";


        if (currentAssesO.value == "") {
            $('#targetdiv').hide();
            currentAssesMsgO.innerHTML = "Please Select an Assessment to edit from the Assessment Drop Down Menu";
            isDataValid = false;
        } else {
            currentAssesMsgO.innerHTML = "";
        }
        return isDataValid;

    }

    function showConfirm() {

        var examInput = document.getElementById('curentAssessment').value;
        var dateInput = document.getElementById('currentDate').value;
        var timeInput = document.getElementById('currentTime').value;

        if (choicevalidation()) {

            var confirmMsg = confirm("Are you sure you want to take the following Assessment:" + "\n" + "Exam: " + examInput + "\n" + "Date: " + dateInput + "\n" + "Time: " + timeInput);

            if (confirmMsg == true) {
                submitform();
            }
        }
    }

    $('#choiceForm').on('submit', showConfirm);
</script>
 <h1>TAKE AN ASSESSMENT</h1> //FORM 1
<form action="assessmentchoice.php" method="post" onsubmit="return validation(event);">
    <table>
        <tr>
            <th>Module:
                <select name="modules" id="modulesDrop">
                    <option value="">Please Select</option>
                    <option value="CHI2513_Systems Strategy_1">CHI2513 - Systems Strategy</option>
                    <option value="CHT2220_Interactive Systems_4">CHT2220 - Interactive Systems</option>
                </select>
            </th>
        </tr>
    </table>
    <p>
        <input id="moduleSubmit" type="submit" value="Submit Module" name="moduleSubmit"
        />
    </p>
    <div id="moduleAlert"></div>
    <div id="targetdiv"></div>
</form>//FORM 2
<div id='lt-container'>
    <form action='assessmentchoice.php' method='post' id='assessmentForm'>
        <p id='warnings'></p>
        <p><strong>Selected Module:</strong> CHI2513 - Systems Strategy
            <input type='hidden'
            value='1'>
        </p>
        <p><strong>Assessments:</strong> 
            <select name="session" id="sessionsDrop">
                <option value="">Please Select</option>
                <option value='28'>LDREW - 09-01-2013 - 09:00</option>
                <option value='29'>BQNYF - 10-01-2013 - 10:00</option>
                <option value='22' disabled>WDFRK - 17-01-2013 - 09:00</option>
                <option value='26' disabled>POKUB1 - 25-01-2013 - 15:00</option>
            </select>
        </p>
    </form>
</div>
<div id='rt-container'>//FORM 3 (This is where when submitted it should show confirmation)
    <form
    id='choiceForm' action='assessment.php' method='post'>
        <p><strong>Chosen Assessment:</strong>
        </p>
        <table>
            <tr>
                <th></th>
                <td>
                    <input type='hidden' id='currentId' name='Idcurrent' readonly='readonly'
                    value='' />
                </td>
            </tr>
            <tr>
                <th>Assessment:</th>
                <td>
                    <input type='text' id='currentAssessment' name='Assessmentcurrent' readonly='readonly'
                    value='' />
                </td>
            </tr>
            <tr>
                <th>Date:</th>
                <td>
                    <input type='text' id='currentDate' name='Datecurrent' readonly='readonly'
                    value='' />
                </td>
            </tr>
            <tr>
                <th>Start Time:</th>
                <td>
                    <input type='text' id='currentTime' name='Timecurrent' readonly='readonly'
                    value='' />
                </td>
            </tr>
        </table>
        <div id='currentAlert'></div>
        <p id='submitchoicebtn'>
            <button id='choiceSubmit'>Choose Assessment</button>
        </p>
        </form>
4

4 回答 4

1

这是一个演示

尝试更改以下行：

function showConfirm() { /* your existing code */ }

进入

function showConfirm(e) {
    e.preventDefault();

    /* your existing code */

    return false;
}

您是否已经尝试过：

function showConfirm(e) {
    e.preventDefault();

    var examInput = document.getElementById('curentAssessment').value;
    var dateInput = document.getElementById('currentDate').value;
    var timeInput = document.getElementById('currentTime').value;

    if (choicevalidation()) {

        return confirm("Are you sure you want to take the following Assessment:" + "\n" + "Exam: " + examInput + "\n" + "Date: " + dateInput + "\n" + "Time: " + timeInput);
    }
    return false;
}

$('#choiceSubmit').on('click', function(e) {
    if (showConfirm(e)) {
        $('#choiceForm').submit();
    }
});
于 2013-01-15T10:02:14.297 回答
0

您的表单没有嵌套，所以不应该是因为有多个。

尝试删除validation函数中的所有代码，使其仅返回 false：

function validation(e) {
  return false;
}

如果这可行，您就会知道问题出在 JavaScript 而不是 HTML。从那里您可以添加越来越多的功能，直到您发现导致问题的部分。

于 2013-01-15T09:57:41.873 回答
0

我认为这条线if ($(this).val() !== '') {应该是这样的if ($(this).val() != '') {

也如另一个答案中所述，添加以下内容：e.preventDefault();

于 2013-01-15T10:24:06.083 回答
0

我会使用以下代码

$('#choiceSubmit').click(function(e) {
    e.preventDefault();
    var x = 0;
    if (showConfirm(e)) {
        $('#choiceForm').submit();
    }
});

您是否使用过萤火虫或检查器（chrome/ie）并逐步浏览了 javascript？在上述情况下，我会在e.preventDefault()方法中添加一个断点。如果遇到这个问题，那么问题出在 javascript 中。如果没有，那么 javascript 甚至没有绑定到提交按钮。

于 2013-01-15T10:49:47.157 回答