title: Serialize form not working and its not sending any data using jQuery
body: <p>I have a bootstrap modal. Inside that modal I have a form. I would like to submit that form and my submit ajax code is outside of the modal. </p>
  
  <p>The problem is when i click submit, i cant see any data being passed when using serialise. </p>
  
  <p>I move the script inside the modal but again it didn't worked. </p>
  
  <p>Here is My HTML form </p>
  
  <pre><code>&lt;form id="update-selected-category"&gt;
  
                  &lt;div class="row"&gt;**strong text**
                    &lt;div class="col-md-4"&gt;
                        &lt;div class="form-group"&gt;
                          &lt;label for="set"&gt;Set&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="set-input" name="set" value="&lt;?php echo $row['down1_name']; ?&gt;"&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4"&gt;
                        &lt;div class="form-group"&gt;
                          &lt;label for="description"&gt;Description&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="description-input" name="description"  value="&lt;?php echo $row['description']; ?&gt;"&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-4"&gt;
                        &lt;div class="form-group"&gt;
                          &lt;label for="stocklevel"&gt;Stock Level&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="stocklevel-input" name="stock-level"  value="&lt;?php echo $row['stock_stk']; ?&gt;"&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;div class="col-md-4"&gt;
                        &lt;div class="form-group"&gt;
                          &lt;label for="minlevel"&gt;Min Level&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="minlevel-input" name="min-level" value="&lt;?php echo $row['minlevel_stk']; ?&gt;"&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4"&gt;
                        &lt;div class="form-group"&gt;
                          &lt;label for="maxlevel"&gt;Max Level&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="maxlevel-input" name="max-level"  value="&lt;?php echo $row['maxlevel_stk']; ?&gt;"&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;/form&gt;
  
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                    &lt;button type="button" id="update-category" class="btn btn-success update-category"&gt;Save&lt;/button&gt;
                    &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p><strong>MY JQuery</strong> </p>
  
  <pre><code>            $(".update-category").click(function(){ 
  
                      //Create ajax request with the two paramaters
                      $.ajax({
                      url: '../data/stock.php?action=stock-category-update',
                      type: 'POST',
                      dataType:'text',
                      data: $( "#update-selected-category" ).serialize(), 
                      success: function(data, textStatus, jqXHR) {        
                              if(jqXHR.responseText == '{"success":"true"}'){
  
                                  //Hide the modal
                                  $('.category-update-modal').modal('hide');
  
  
                              }else{
  
                                  //Display the bootstrap warning message
                                  alert("something went wrong while saving the data");
  
                              }
                          },
                          error: function(jqXHR, textStatus, errorThrown){
                              //Display error message to user
                              alert("An error occured when saving the data");
                          }
                      }); // End ajax request
  
              }); // End on click event   
  </code></pre>
  
  <p>I'm not sure what i am doing wrong. The form input fields also have 'name' attributes. </p>
  
  <p><strong>EDIT</strong>
  <a href="https://i.stack.imgur.com/EbK0t.png" rel="nofollow noreferrer">alert message </a></p>