CODEWITHSUNDEEP
javascriptjqueryajax
Ayush Bansal
Ayush Bansal

Reputation: 51

form not redirecting to new page

getStudents.js

$("#submit").click(function(){
$.ajax({
    url: "displayStudents.php?branchCode=1",
    datatype:"JSON",
    success: function(obj){
        $("table").append("<form method='POST' action='markAttendance.php'>     <tr><th>Roll No</th>    <th>Name</th><th colspan='2'>Attendance</th></tr>");
        for(var i=0; i<obj.length; i++){
            $("table").append(
                "<tr>"+
                "<td>"+obj[i].RollNo+"</td>"+
                "<td>"+obj[i].Name+"</td>"+
                "<td><input type='radio' name='mark["+i+"]' value='Present'>Present" +
                "<input type='radio' name='mark["+i+"]' value='Absent' checked>Absent</td>" +
                "</tr>"
                );
        }
        $("table").append("<tr><td><button type='submit' name='submitMark' id='submitMark'>Mark Attendance</button></td></tr></form>");
        $("#submit").hide();
    }    
})
});

In the html file there is a table and button having id as submit. I am getting the json correctly and it is also displayed properly. But whenever I click on the Mark Attendance Button, it is not redirected to markAttendance.php.

Upvotes: 2

Views: 78

Answers (1)

Deepak Sharma
Deepak Sharma

Reputation: 1137

Try your call like this:

$('body').on('click',"#submit",function(){

As it's AJAX, page is not going to redirect on displayStudents.php. There will be an async call to the page.

You can track on inspect tools --> network tab.

Instead of <table><form></form></table> structure, do <form><table></table></form>

Upvotes: 2

Related Questions