Got a jsfiddle here, where I am trying to figure out the confirmation that should appear after sending, to make sure the user wants to send:
http://jsfiddle.net/baxGm/1/
The problem is that the confirmation does not appear, does anyone know why this is?
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>
Jquery:
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(); } }
UPDATE:
<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();</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>
source share