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

次のコードを使用します

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

Firebugまたはインスペクター（chrome / ie）を使用して、JavaScriptをステップ実行しましたか？上記の場合、e.preventDefault()メソッドにブレークポイントを追加します。これに該当する場合、問題はjavascript内にあります。そうでない場合、JavaScriptは送信ボタンにバインドされていません。

于 2013-01-15T10:49:47.157 に答える
0

フォームがネストされていないため、複数あるためネストされるべきではありません。

validationfalse のみを返すように、関数内のすべてのコードを削除してみてください。

function validation(e) {
  return false;
}

これが機能する場合、問題は HTML ではなく JavaScript にあることがわかります。そこから、どの部分が問題を引き起こしているかがわかるまで、関数をどんどん追加し直すことができます。

于 2013-01-15T09:57:41.873 に答える
0

私はこの行if ($(this).val() !== '') {がこのようであるべきだと思いますif ($(this).val() != '') {

また、別の回答で述べたように、これを追加します：e.preventDefault();

于 2013-01-15T10:24:06.083 に答える