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

Question

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="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?

it still displays a number 0 in the department sir, I think my ajax function is incorrect. — laurence keith albano
– 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
– 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.com/questions/30680554/… — laurence keith albano
– 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 comparison in your if conditional: if($('#departmentselect').val() != '') — Michael Fourre
– Michael Fourre, Commented Aug 19, 2016 at 5:12

Haresh Vidja · Accepted Answer · 2016-08-19 05:15:21Z

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>

answered Aug 19, 2016 at 5:15

Haresh Vidja

8,4713 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

laurence keith albano Over a year ago

It will only display the value number of the department sir, not the values of the json file. Example: Select College of Cas, then you select English. When submitting the form, the value 'English' won't appear in the database. it will only display a value 0 or 1. The type is text in mysql.

laurence keith albano Over a year ago

It work sir, I did not realize that my query type of the department select tag is an int type.

mulika_mwizi · Accepted Answer · 2016-08-19 05:54:18Z

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>");
            });
        });
    })

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related