I want to get the data of the select tag id="departmentselect" so that the values of it will be stored in the mysql database before submitting the form. I heard that you will use AJAX to get the data before you submit the form. Because when I select the College select tag and its corresponding values of the department select tag it will only store a number in the department of the database.

Example MYSQL database:
[![enter image description here](https://i.stack.imgur.com/qJy3T.png)](https://i.stack.imgur.com/qJy3T.png)

In the query of mysql, the department did not get the values of the JSON file. It only display the number.

Here is my **PHPCode**

```
<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form action="SignupProcess.php" method="POST" onsubmit="return check_password();" id="signupform">
    <select id="collegeselect" name="collegeselect">
      <option value="">College</option>
      <option value="College of CAS">College of CAS</option>
    </select>

    <select id="departmentselect" name="departmentselect">
        <option value="">Department</option>
    </select>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="GetCollegeJsonData.js"></script>
<script>
        $('#signupform').submit(function(e))
        {
            if($('#departmentselect').val() != '')
            {
                $ajax
                ({
                    type: 'POST',
                    url: 'Signup.php?select' += select,
                    success: function(data)
                    {
                        alert(data);
                    }
                });
            }
            else
            {
                alert('error');
            }
            e.preventDefault();
        });
</script>
</html>

```

**Script Type**
Here is the script for using ajax but it did not seem to have any effect.

```
<script>
        $('#signupform').submit(function(e))
        {
            if($('#departmentselect').val() != '')
            {
                $ajax
                ({
                    type: 'POST',
                    url: 'Signup.php?select' += select,
                    success: function(data)
                    {
                        alert(data);
                    }
                });
            }
            else
            {
                alert('error');
            }
            e.preventDefault();
        });
</script>

```

**JQUERY Code** file name **GetCollegeJsonData.js**

I get the JSON data from the file and read it into my Jquery file and then link the file using script to my php code

```
//Get json
$('body').on('change', '#collegeselect', function() {
    var selected_college = $(this).val();

    $('#departmentselect').html('');

    $.getJSON("CollegeAndDepartment.json", function(data) {
        $.each(data[selected_college], function(key, val) {
            $('#departmentselect').append("<option value='" + key + "'>" + val + "</option>");
        });
    });
})

```

Its **JSON File**

```
{
    "College of CAS": ["Biology", "English", "LIACOM", "Library & Information Science", "Mass Communication", "Philosophy", "Political Science", "Psychology"]
}

```

Is my Ajax function is incorrect?