removeStudentCourse.html

<!DOCTYPE html>
<html lang="en" style="height: 100%; margin: 0; padding: 0;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body style="height: 100%; margin: 0; padding: 0;">
        <nav style="float: left;background-color: beige; margin-right: 2%; height: 100%; padding: 1%;">
                <a href="index.html">Home</a><br><br>
                <a href="searchStudents.html">Search Students</a><br><br>
                <a href="searchStudentCourses.html">Search Student Courses</a><br><br>
                <a href="createStudent.html">Add Student</a><br><br>
                <a href="createStudentCourses.html">Add Student Course</a><br><br>
                <a href="updateStudent.html">Update Student</a><br><br>
                <a href="updateStudentGrade.html">Update Student Grade</a><br><br>
                <a href="removeStudent.html">Remove Student</a><br><br>
                <a href="removeStudentCourse.html">Remove Student course</a><br><br>
                <a href="searchProfessors.html">Search Professors</a><br><br>
                <a href="searchProfessorCourses.html">Search Professor Courses</a><br><br>
                <a href="searchDepartments.html">Search Departments</a><br><br>
                <a href="searchCourses.html">Search Courses</a><br><br>
        </nav>
    <h1>Delete Student Course</h1>
    <form id="form" action="">
        Student ID:<br>
        <input type="number" id="studentId" required><br><br>
        Course ID:<br>
        <input type="number" id="courseId" required><br><br>
        <input type="submit" value="Delete"><br><br>     
    </form>
    <div id="result">

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js" integrity="sha256-T/f7Sju1ZfNNfBh7skWn0idlCBcI3RwdLSS4/I7NQKQ=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(()=>{
            $('#form').submit((e)=>{
                e.preventDefault();
                callApi($('#studentId').val(),$('#courseId').val()).then(function(response){
                    if(response.status!=200){
                        if((typeof response.data.error)=="string"){
                            $('#result').html("<b>An error has occured</b> <br>");
                            $('#result').append(response.data.error+"<br>");
                        }
                        else if(response.data.error && response.data.error!=undefined){
                            var errors = "<b>An error has occured</b><br>errors:<br>";
                            response.data.error.forEach(err=>{
                                errors+=err.msg+" : "+err.value;
                                errors+="<br>";
                            });
                            $('#result').html(errors);
                        }
                        else{
                            $('#result').html("<b>An error has occured</b><br>");
                        }
                    }
                    else{
                        $('#result').html("<b>"+response.data.message+"</b><br>");
                    }
                });
            });
        });
        function callApi(val1,val2){
            return new Promise(function(resolve,reject){
                axios.delete('http://64.225.24.123:3000/api/v1/students/'+val1+"/courses/"+val2)
            .then(response =>{
                    resolve(response);
            }).catch(error=>{
                resolve(error.response);
            });
            })
        }
    </script>
    
</body>
</html>