One of two ajax functions not working

Question

in this code snippet, I want to load form the view folder (MVC project) based on a selected option in a select tag using ajax and it works correctly. What I want, is when I click on the submit button, that it alerts me the content of test.php with the ajax function. My problem, is when I click on the submit button, that nothing happens

script.js:

$(document).ready(function () {
$('#SelectBox').on("change", function() {
    if ($('#SelectBox').val() == 'rectangle') {
        $.ajax({
            type:'post',
            url:'views/rectangle/index',
            data:{},
            success:(function (response) {
                $('#Container').html(response);
            })
        })

    }else if($('#SelectBox').val() == 'square'){
        $.ajax({
            type:'post',
            url:'views/square/index',
            data:{},
            success:(function (response) {
                $('#Container').html(response);
            })
        })
    }
})
})

script2.js: at the top of the index page(views/square/index), I want, when I click on submit button, that it alerts the content of test.php using ajax:

$(document).ready(function () {
$('#send').click(function () {
    $.ajax({
        type:'post',
        url:'views/index/test',
        data:{},
        success:(function (response) {
            alert(response);
        })
    })
})
})

and this is test.php:

<?php
echo "salam";
?>

square view :

<script src="public/js/script2.js"></script>
<?php
$return .='<form action="" method="post">
<label for="edge">edge:</label>
<input type="text" name="edge" id="edge"/>
<input type="submit" value="SEND" id="send"/>
</form>';
echo $return;
?>

Answer 1

Make sure that jQuery library included before this script.js file.

Now Add all code inside one file script.js like below:-

$(document).ready(function () {
    $('#SelectBox').on("change", function() {
        if ($('#SelectBox').val() == 'rectangle') {
            $.ajax({
                type:'post',
                url:'views/rectangle/index',
                data:{},
                success:(function (response) {
                    $('#Container').html(response);
                })
            })

        }else if($('#SelectBox').val() == 'square'){
            $.ajax({
                type:'post',
                url:'views/square/index',
                data:{},
                success:(function (response) {
                    $('#Container').html(response);
                });
            });
        }
    });
    $('#send').click(function (e) { //event added
        e.preventDefault(); //prevent normal for submit
        $.ajax({
            type:'post',
            url:'views/index/test',
            success:(function (response) {
                alert(response);
            });
        });
    });
});

So your view code need to be:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="public/js/script.js"></script>
<?php
$return .='<form action="" method="post">
<label for="edge">edge:</label>
<input type="text" name="edge" id="edge"/>
<input type="submit" value="SEND" id="send"/>
</form>';
echo $return;
?>