Question

我正在努力使用提交按钮，点击时没有任何反应。我认为问题是没有editvalidation()被触发，但我不确定。如果是这种情况，如何触发？我希望验证显示在自己的提交按钮上方。我的问题是如何让提交按钮做某事？

我没有错误：

CODE：

<script type="text/javascript">

            function editvalidation()
    {
        if ($("#coursesDrop").val()==""){
            $("#courseAlert").html("Please Select a Course from the Course Drop Down Menu");
        }
        if ($("#coursesDrop").val()!="" && $("#courseadd").children().length==0){
            $("#courseAlert").html("You have not Selected any Students you wish to Add into Course");
        }
        if ($("#coursesDrop").val()!="" && $("#courseadd").children().length!=0){
            return true;
        }
        return false;
    }

            </script>


    <div id='lt-container'>
    <form action='addstudentcourse.php' method='post' id='courseForm'>
    <p id='warnings'></p>
    <p><strong>Courses:</strong> <select name="course" id="coursesDrop">
    <option value="">Please Select</option>
    <option value='19'>BIO234 - Biology</option>
    <option value='1'>INFO101 - Bsc Information Communication Technology</option>
    <option value='2'>INFO102 - Bsc Computing</option>

    </select> </p>   
    </form>
    <form id='updateForm'>

        <p><strong>Course Chosen:</strong></p>
        <table>
        <tr>
        <th></th>
        <td><input type='hidden' id='currentCourseId' name='CourseIdcurrent' value='' /> </td>
        </tr>
        <tr>
        <th>Course ID:</th>
        <td><input type='text' id='currentCourse' name='Coursecurrent' readonly='readonly' value='' /> </td>
        </tr>
        <tr>
        <th>Course Name:</th>
        <td><input type='text' id='currentCourseName' name='CourseNamecurrent' readonly='readonly' value='' /> </td>
        </tr>
        <tr>
        <th>Duration (Years):</th>
        <td><input type='text' id='currentDuration' name='Durationcurrent' readonly='readonly' value=''/> </td>
        </tr>
        </table>
        </form>

    <form id='studentExistForm'>
    <p><strong>Current Students in Chosen Course:</strong></p>
    <p><select name="studenttextarea" id="studentselect" size="10"></select></p>
    </form> 

    </div>

    <div id='rt-container'>
    <form id='studentRemainForm'>
    <p><strong>Available Students to Enrol:</strong></p>
    <p><select multiple="multiple" name="remaintextarea" id="studentremain" size="10"></select></p>
    <table id='addtbl'>
    <tr>
    </table>
    </form>

    <form id='studentAddForm'>
    <p><strong>Students to Add to Course:</strong></p>
    <p><select multiple="multiple" name="addtextarea" id="studentadd" size="10"></select></p>
    <table id='removetbl'>
    <tr>
    </table>

    <div id='studentAlert'></div>
    </form>

    <p><button id='submitstudents'>Submit Students</button></p>

    </div>

        <script type="text/javascript">    



                 function showConfirm(){

                  var courseNoInput = document.getElementById('currentCourse').value;
                  var courseNameInput = document.getElementById('currentCourseName').value;

                  if (editvalidation()) {

                 var confirmMsg=confirm("Are you sure you want to add your selected Students to this Course:" + "\n" + "Course: " + courseNoInput + " - " + courseNameInput);

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

         $('body').on('click', '#submitstudents', showConfirm);     


        </script>

Answer 1

  if (editvalidation()  === true) {
       //your code
     }
 compare function true or false like this ..


$( '#studentAddForm' ).submit();

更好地提交这样的表格..

Answer 2

脚本开始使用jquery 1.8.1在Google Chrome中运行。一个问题是，没有定义具有id courseAlert的元素。

Answer 3

我格式化了代码并修复了它，以便提交按钮正常工作。

我还在每个函数的开头添加了警报，以便您可以看到它们被调用。

如果您希望脚本完全正常工作，还需要更正其他代码。

链接到工作示例： http://simplestudio.rs/yard/submit_button/form.html

<强>代码：

<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

$(document).ready(function() {

    $("#submitstudents").click(function() { 
        showConfirm();
    }); 

}); 

function showConfirm() {

    alert("function showConfirm is called");
    var courseNoInput = document.getElementById('currentCourse').value;
    var courseNameInput = document.getElementById('currentCourseName').value;

    if (editvalidation()) {

        var confirmMsg=confirm("Are you sure you want to add your selected Students to this Course:" + "\n" + "Course: " + courseNoInput + " - " + courseNameInput);

        if (confirmMsg==true) {

            submitform();   

        }

    }

} 

function editvalidation() {

    alert("function editvalidation is called");
    if ($("#coursesDrop").val()==""){

        $("#courseAlert").html("Please Select a Course from the Course Drop Down Menu");

    }
    if ($("#coursesDrop").val()!="" && $("#courseadd").children().length==0){

        $("#courseAlert").html("You have not Selected any Students you wish to Add into Course");

    }
    if ($("#coursesDrop").val()!="" && $("#courseadd").children().length!=0){

        return true;

    }

    return false;

}


</script>

<style>

    span {
        cursor: pointer;
        position: absolute;
    }

    #divtoshow {
        position: absolute;
        display: none;
    }

</style>

</head>

<body>

    <div id='lt-container'>

        <form action='addstudentcourse.php' method='post' id='courseForm'>

            <p id='warnings'></p>
            <p>

                <strong>Courses:</strong> 

                <select name="course" id="coursesDrop">
                    <option value="">Please Select</option>
                    <option value='19'>BIO234 - Biology</option>
                    <option value='1'>INFO101 - Bsc Information Communication Technology</option>
                    <option value='2'>INFO102 - Bsc Computing</option>
                </select> 

            </p>   

        </form>

        <form id='updateForm'>

            <p>
                <strong>Course Chosen:</strong>
            </p>

            <table>
                <tr>

                    <th></th>
                    <td>
                        <input type='hidden' id='currentCourseId' name='CourseIdcurrent' value='' /> 
                    </td>

                </tr>

                <tr>

                    <th>
                        Course ID:
                    </th>
                    <td>
                        <input type='text' id='currentCourse' name='Coursecurrent' readonly='readonly' value='' /> 
                    </td>

                </tr>

                <tr>

                    <th>
                        Course Name:
                    </th>

                    <td>
                        <input type='text' id='currentCourseName' name='CourseNamecurrent' readonly='readonly' value='' /> 
                    </td>

                </tr>

                <tr>

                    <th>
                        Duration (Years):
                    </th>

                    <td>
                        <input type='text' id='currentDuration' name='Durationcurrent' readonly='readonly' value=''/> 
                    </td>

                </tr>

            </table>

        </form>

        <form id='studentExistForm'>

            <p>
                <strong>Current Students in Chosen Course:</strong>
            </p>

            <p>
                <select name="studenttextarea" id="studentselect" size="10"></select>
            </p>

        </form> 

    </div>

    <div id='rt-container'>

        <form id='studentRemainForm'>

            <p>
                <strong>Available Students to Enrol:</strong>
            </p>

            <p>
                <select multiple="multiple" name="remaintextarea" id="studentremain" size="10"></select>
            </p>

            <table id='addtbl'>
                <tr>
            </table>

        </form>

        <form id='studentAddForm'>

            <p>
                <strong>Students to Add to Course:</strong></p>
            </p>

            <p>
                <select multiple="multiple" name="addtextarea" id="studentadd" size="10"></select>
            </p>

            <table id='removetbl'>
                <tr>
            </table>

            <div id='studentAlert'></div>

        </form>

        <p>
            <button id='submitstudents'>Submit Students</button>
        </p>

    </div>

</body>
</html>

提交按钮没有做任何事情

3 个答案:

如果您希望脚本完全正常工作，还需要更正其他代码。