admin管理员组

文章数量:1425801

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?

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./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?

  • javascript
  • php
  • jquery
  • mysql
  • ajax
Share Improve this question asked Aug 19, 2016 at 5:00 laurence keith albanolaurence keith albano 1,4925 gold badges30 silver badges64 bronze badges 5
  • 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

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

本文标签： javascriptHow to get data from select tag using AJAX before submitting into PHPStack Overflow

版权声明：本文标题：javascript - How to get data from select tag using AJAX before submitting into PHP? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745442710a2658518.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。