laurence keith albano laurence keith albano - 3 months ago 11
MySQL Question

How to get data from select tag using AJAX before submitting into PHP?

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

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?

Answer

I have edited your code as below.

Kindly give it a try.

 <!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',
                        data:{select:$('#departmentselect').val()},
                        url: 'Signup.php',
                        success: function(data)
                        {
                            alert(data);
                        }
                    });
                }
                else
                {
                    alert('error');
                }
                e.preventDefault();
            });


    </script>
    </html>

    For GetCollegeJsonData.js, ihave modified as follows:

    //Get json
    $('#collegeselect').on('change', function() {

        var selected_college = $(this).val();

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

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