在这里有一个 jsfiddle,我正在尝试整理一个确认信息,该确认信息应在提交后出现,以确保用户是否要提交:
问题是没有出现确认,有谁知道这是为什么?
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>