javascript - 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:

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=".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=".12.4/jquery.min.js"></script>
<script src=".3.7/js/bootstrap.min.js"></script>
<script src=".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?

Example MYSQL database:

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./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./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery./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?

Share Improve this question asked Aug 19, 2016 at 5:00 laurence keith albano 1,4925 gold badges30 silver badges64 bronze badges

You miss the dot(.). It should be $.ajax not $ajax. – Shiyou Commented Aug 19, 2016 at 5:03
it still displays a number 0 in the department sir, I think my ajax function is incorrect. – laurence keith albano Commented Aug 19, 2016 at 5:05
It seems like there are a few syntax errors in here, which may not be the actual error but does potentially prevent others from properly identifying your problem. For example, Shiyou mentioned $.ajax when your question uses $ajax. I'm looking at url: 'Signup.php?select' += select .. what is happening here? What is the select variable? – Michael Fourre Commented Aug 19, 2016 at 5:08
I call the id="departmentselect" select tag sir and it means it targets the url with value from the select tag. I use this link for reference stackoverflow./questions/30680554/… – laurence keith albano Commented Aug 19, 2016 at 5:09
You don't ever actually store the variable select though. You only grab the value for parison in your if conditional: if($('#departmentselect').val() != '') – Michael Fourre Commented Aug 19, 2016 at 5:12

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

Your ajax method code has syntax error and, when you use post method you have to post data using data option not with URL. data should be in json object or query string. Your ajax function should be

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

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./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./ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://code.jquery./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>");
            });
        });
    })

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to get data from select tag using AJAX before submitting into PHP? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)