I have a simple button in my <body> section of code:
<p><button id='submitstudents'>Submit Students</button></p>
What I want the button to do is that if clicked on, it will go through the editvalidation() function to see if there are any errors, if there are no errors then it displays a confirmation box, if the user confirms then it should perform the ajax.
Problem is that when I click on the OK button in the confirmation box, nothing happens at all, page doesn’t even do any loading, my question is what is causing the page to not submit after clicking on the OK button in confirmation?
The is no errors in the error console.
Jquery code (in correct order displayed):
Validation:
function editvalidation()
{
if ($("#sessionsDrop").val()==""){
$("#studentAlert").html("Please Select an Assessment to edit from the Assessment Drop Down Menu");
}
if ($("#sessionsDrop").val()!="" && $("#studentadd").children().length==0){
$("#studentAlert").html("You have not Selected any Students you wish to Add into Assessment");
}
if ($("#sessionsDrop").val()!="" && $("#studentadd").children().length!=0){
return true;
}
return false;
}
submit form:
function submitform() {
$.ajax({
type: "POST",
url: "updatestudentsession.php",
data: {
sessionid: $('#currentid').val(),
students: $('#addtextarea').val()
},
dataType:'json', //get response as json
success: function(result){
if(result.errorflag){
//do your stuff on getting error message
var newHtml="<span style='color: red'>"+result.msg+"</span>";
$("#targetdiv").html(newHtml); //i am displaying the error msg here
}else{
//you got success message
var newHtml="<span style='color: green'>"+result.msg+"</span>";
$("#targetdiv").html(newHtml);
//append students you want to add to assessment into student exist select box
var selectedStudents = jQuery("select#studentadd").find("option");
selectedStudents.appendTo($("select#studentexist"));
$('option.red', 'select#studentexist').remove();
//blank #studentadd select box
$('#studentadd').empty();
$('#targetdiv').show();
}
}
});
}
Confirmation:
function showConfirm(){
var examInput = document.getElementById('currentAssessment').value;
if (editvalidation()) {
var confirmMsg=confirm("Are you sure you want to add your selected Students to this Assessment:" + "\n" + "Exam: " + examInput);
if (confirmMsg==true)
{
submitform();
}
}
}
Button click:
$('body').on('click', '#submitstudents', showConfirm);
Try
EDIT:
Your script should work. Put all the
functionsandhandlerfor theclickevent inside$(document).ready(function(){ //Code goes here });.Also make sure the
jquerylibrary is linked.