4

在这里有一个 jsfiddle，我正在尝试整理一个确认信息，该确认信息应在提交后出现，以确保用户是否要提交：

http://jsfiddle.net/baxGm/1/

问题是没有出现确认，有谁知道这是为什么？

HTML：

<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>
    <p id='submitchoicebtn'>
        <input id='choiceSubmit' type='submit' value='Choose Assessment' name='choiceSubmit' onClick='myClickHandler(); return false;'/>
    </p>
    <div id='currentAlert'></div>
</form>

查询：

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;

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

function myClickHandler() {
    if (choicevalidation()) {
        showConfirm();
    }
}

更新：

        <body>

    <script type="text/javascript">


        $('#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('');           
            }
        });

        $('#assessmentForm').delegate('change','select',(function(warnings)
{
    return function()
    {
        warnings.html('');
    };
}($('#warnings'))));



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 = $('#currentAssessment').val();
            var dateInput = $('#currentDate').val();
            var timeInput = $('#currentTime').val();

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


$('#choiceSubmit').click(function(e){myClickHandler(e)});

function myClickHandler(e){
    e.preventDefault(); 
     if(choicevalidation()){ 
                if(showConfirm())
                   $('#choiceForm').submit();
     } 
}

    </script>   

   Logged In: <b>Mayur Patel</b> | <a href='./studentlogout.php'>Logout</a>     
        <div class="topcorner"><a id="studentmenulink" href="studentmenu.php">Back to Menu</a></div>

        <noscript style='color: red'><img src="Images/warning-2.fw.png" alt="Javascript Warning" id="warningImage" name="warningSymbol"/> In order to use this application without any problems, you must have javascript enabled</noscript>


        <div id="js">


<h1>TAKE AN ASSESSMENT</h1>   

<form action="/u0867587/Mobile_app/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>

<div id='lt-container'>
<form action='/u0867587/Mobile_app/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'>WDFRK - 17-01-2013 - 09:00</option>
<option value='26'>POKUB1 - 25-01-2013 - 15:00</option>
</select> </p>   
</form>
</div>
<div id='rt-container'>
<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>
    <p id='submitchoicebtn'>
    <input id='choiceSubmit' type='submit' value='Choose Assessment' name='choiceSubmit'/>    
    </p>
    <div id='currentAlert'></div>
    </form>

    </div>

</div>

<script type="text/javascript">
document.getElementById('js').style.display = 'block';
</script>

    </body>
4

2 回答 2

1

myClickHandler() 不是全局函数，它位于 jquery onload 函数的上下文中，因此您会收到“myClickHandler is not defined”错误。

使用常规 jquery 事件绑定而不是内联 onclick 和函数

$("#choiceSubmit").click(function(){
  if(choicevalidation()){ 
    showConfirm(); 
  } 
  return false;
});

http://jsfiddle.net/baxGm/3/

于 2013-01-14T18:59:07.650 回答
0

好的，在这种情况下inputis 类型submit，这意味着它的默认行为是提交。在这个小提琴中：http: //jsfiddle.net/efuZA/我没有更改类型，而是添加e.preventDefault()以防止它立即提交然后使用submit()。

于 2013-01-14T20:49:11.870 回答