JQuery Ajax won't work when receiving POST

Question

I've been searching around the last few days looking for an answer but haven't found one. At this point I believe the problem to either be a result of the AJAX, or my actual form. Either way, any help would be appreciated.

So the Ajax I'm using has worked before, when using it on a much simpler form. For that reason, I simply brought it over and adapted it. The only things that I changed are the ID names and file it will load. With that said, it does work - to an extent. If the file being loaded has text, or a basic echo statement, then it will run fine and print as expected on the page.

When I start trying to have it set variables and what not, then it starts having problems. It simple spits out "Ajax failed to run". Ive tried various ways to pull an error message as well but those didn't seem to work either. There may be some small errors here and there because I've been greatly fiddling with the code for a day or two now.

HTML:

    <!DOCTYPE html>
<?php session_start(); ?>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Standard Meta -->

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properties -->
  <title>Apollo Project | Conjugate</title>

  <link rel="stylesheet" type="text/css" href="/css/semantic.css">
  <link rel="stylesheet" type="text/css" href="components/dropdown.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="/components/dropdown.js"></script>
  <script src="/scripts/semantic.js"></script>    

  <style type="text/css">
  body {
    background-color: #FFFFFF;
  }
  .ui.menu .item img.logo {
    margin-right: 1.5em;
  }
  .main.container {
    margin-top: 7em;
  }
  </style>

</head>
<body>

  <div class="ui fixed inverted menu">
    <div class="ui container">
      <a href="http://semantic-ui.com/examples/fixed.html#" class="header item">
        Apollo Project
      </a>
      <a href="http://semantic-ui.com/examples/fixed.html#" class="item">Home</a>
      <div class="ui simple dropdown item">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <a class="item" href="http://semantic-ui.com/examples/fixed.html#">Link Item</a>
          <a class="item" href="http://semantic-ui.com/examples/fixed.html#">Link Item</a>
          <div class="divider"></div>
          <div class="header">Header Item</div>
          <a class="item" href="http://semantic-ui.com/examples/fixed.html#">Link Item</a>
        </div>
      </div>
    </div>
  </div>


  <div class="ui main text container">

     <h3 class="ui center aligned header">Verb Conjugating</h3>
    <div id="form-content">
    <form method="post" action="" id="mainForm" >
      <!-- Selector for Chapter -->
      Chapter:
    <select name="chapter" class="ui fluid search dropdown" id="chapter">
      <option value="chAll">Any Chapter</option>
      <option disabled role="separator">Select a chapter:</option>
      <option value="ch1">Chapter 1</option>
      <option value="ch2">Chapter 2</option>
      <option value="ch3">Chapter 3</option>
      <option value="ch4">Chapter 4</option>
      <option value="ch5">Chapter 5</option>
      <option value="ch6">Chapter 6</option>
      <option value="ch7">Chapter 7</option>
      <option value="ch8">Chapter 8</option>
      <option value="ch9">Chapter 9</option>
      <option value="ch10">Chapter 10</option>
      <option value="ch11">Chapter 11</option>
      <option value="ch12">Chapter 12</option>
      <option value="ch13">Chapter 13</option>
      <option value="ch14">Chapter 14</option>
      <option value="ch15">Chapter 15</option>
      <option value="ch16">Chapter 16</option>
      <option value="ch17">Chapter 17</option>
      <option value="ch18">Chapter 18</option>
      <option value="ch19">Chapter 19</option>
      <option value="ch20">Chapter 20</option>
      <option value="ch21">Chapter 21</option>
      <option value="ch22">Chapter 22</option>
      <option value="ch23">Chapter 23</option>
      <option value="ch24">Chapter 24</option>
      <option value="ch25">Chapter 25</option>
      <option value="ch26">Chapter 26</option>
      <option value="ch27">Chapter 27</option>
      <option value="ch28">Chapter 28</option>
      <option value="ch29">Chapter 29</option>
      <option value="ch30">Chapter 30</option>
      <option value="ch31">Chapter 31</option>
      <option value="ch32">Chapter 32</option>
      <option value="ch33">Chapter 33</option>
      <option value="ch34">Chapter 34</option>
      <option value="ch35">Chapter 35</option>
    </select>   
    <br>
    <div class="ui two column doubling stackable grid">
        <!-- Selectors for Voice, Tense, Conjugation, and Mood -->
      <div class="column"> Voice:
        <select name="voice" class="ui fluid search dropdown" id="voice">
            <option value="vocAll">Any Voice</option>
            <option disabled role="separator">Select a voice:</option>
            <option value="usrAct">Active</option>
            <option value="usrPas">Passive</option>
        </select>
     </div>
      <div class="column"> Tense:
        <select name="tense" class="ui fluid search dropdown" id="tense">
            <option value="tenAll">Any Tense</option>
            <option disabled role="separator">Select a tense:</option>
            <option value="usrPres">Present</option>
            <option value="usrImp">Imperfect</option>
            <option value="usrPerf">Perfect</option>
            <option value="usrPluPerf">PluPerfect</option>
            <option value="usrFut">Future</option>
            <option value="usrFutPerf">Future Perfect</option>
        </select>
     </div>
     <div class="column"> Conjugation:
        <select name="conj" class="ui fluid search dropdown" id="conj">
            <option value="conjAll">Any Conjugation</option>
            <option disabled role="separator">Select a conjugation:</option>
            <option value="usr1st">1st</option>
            <option value="usr2nd">2nd</option>
            <option value="usr3rd">3rd</option>
            <option value="usr4th">4th</option>
        </select>
     </div>
     <div class="column"> Mood:
        <select name="mood" class="ui fluid search dropdown" id="mood">
            <option value="moodAll">Any Mood</option>
            <option disabled role="separator">Select a mood:</option>
            <option value="usrInd">Indicative</option>
            <option value="usrInf">Infinitive</option>
            <option value="usrImp">Imperative</option>
        </select>
     </div>
    </div> 
    <br>
    <input type="submit" class="ui fluid button" name="submitBtn">
    </form>
    </div>

 <!-- HTML to submit Ajax to another page -->
    <script type="text/javascript">

        $(document).ready(function() {  

            // submit form using $.ajax() method

            $('#mainForm').submit(function(e){

                e.preventDefault(); // Prevent Default Submission

                $.ajax({
                    url: 'submitDecline.php',
                    type: 'POST',
                    data: $(this).serialize() // it will serialize the form data
                })
                .done(function(data){
                    $('#form-content').fadeOut('slow', function(){
                        $('#form-content').fadeIn('slow').html(data);
                    });
                })
                .fail(function(){
                    alert('Ajax Submit Failed ...');    
                });
            }); 
        });
    </script>



<!--    
    <h3 class="ui center aligned header">Doubling Stackable Grid</h3>
    <div class="ui stackable grid">

    </div>
    <div class="ui two column doubling stackable grid">
      <div class="column">
        <div class="ui segment">Content</div>
      </div>
      <div class="column">
        <div class="ui segment">Content</div>
      </div>
      <div class="column">
        <div class="ui segment">Content</div>
      </div>
      <div class="column">
        <div class="ui segment">Content</div>
      </div>
      <div class="column">
        <div class="ui segment">Content</div>
      </div>
      <div class="column">
        <div class="ui segment">Content</div>
      </div>
    </div>
     -->
  </div>
<?php $conn->close();    
?>
  <script src="scripts/script.js"></script>

</body>
</html>

PHP file being loaded:

    <p> This is a test </p>
<?php
session_start();

if( $_POST ){   
    $chaptSelect = $_POST['chapter'];   
    $tenseSelect = $_POST['tense']; 
    $voiseSelect = $_POST['voice']; 
    $moodSelect = $_POST['mood'];   
    $conjSelect = $_POST['conj'];

    if( $chaptSelect == "Any Chapter" ) {
        echo("You selected any chapter")    
    }

?>

<p> This is a test </p>

[Have you watched the AJAX request / response in the browser's developer tools? Have you included the jQuery library in the project? Are there any errors reported? Are you running this on a web-server?](http://jayblanchard.net/basics_of_jquery_ajax.html) — Jay Blanchard, Feb 15 '17 at 14:17
@JayBlanchard The only thing missing from the link is to tell people to [turn on their errors](http://stackoverflow.com/questions/1053424/how-do-i-get-php-errors-to-display) if they haven't. — Mikey, Feb 15 '17 at 14:20
You have to unserialize the data on php before you can access them. — Black, Feb 15 '17 at 14:21
It might be the semi-colon that you are missing at the end of line `echo("You selected any chapter")`. As well, as the closing `}` for your outer `if` statement. — Mikey, Feb 15 '17 at 14:26
That stopped the error, thank you! I knew it would boil down to something small like that. I am still concerned about my form, though. It seems POST isn't sending form data through. Thanks again! — Dylan Wolters, Feb 15 '17 at 14:33
Never mind, I figured it out! Thanks everyone for the awesome help! — Dylan Wolters, Feb 15 '17 at 14:38
Good job. I highly recommend you read Jay's post on debugging AJAX request. Your browser's developer tool is the best place to tell you exactly what data you are sending and what you are getting back. — Mikey, Feb 15 '17 at 14:38

JQuery Ajax won't work when receiving POST

0 Answers0