Question

I need help with what I thought would be a simple form submit problem with Jquery, but am running into issues.

I have a form, #listing_step_1, in which the user first selects a category from a dropdown. When a category has been selected, if the user clicks “next”, the subcategory dropdown is revealed. When both a category and subcategory is selected, clicking next will take them to step 2 of the process using a redirect. On submission, the form is reloading the same page using $_SERVER[‘PHP_SELF’].

I want to autosubmit the form so clicking on next is not required to reveal the subcategories. I’m trying to do this on an onchange event using JQuery, but the following code does not work.

$('#item_category').change(function(){
   $('#listing_step_1').submit();
});

I would appreciate any help with this as I am new to form submission using JQuery and AJAX. Manually, it’s working fine – i.e., pressing the page button and with the PHP page refresh. I thought by simply submitting the form in the onchange instance it would reload and execute the required actions, but this does not appear to be the case.

Form code:

<form method="post" name="listing_step_1" id="listing_step_1" action="<?php $_SERVER['PHP_SELF'] ?>" enctype="multipart/form-data" <?php if($errormessage != ""){ echo ' style="margin-top: 30px"';}?>>
  <div class="formField fullwidth">
    <label for="item_category">Category *</label>
    <select id="item_category" name="item_category">
      <option value="0">Select category...</option>
      <?php $cd = new CategoryListing("<option_credits>", "</option>"); ?>
    </select>
  </div>
  <div class="formField fullwidth">
    <label for="item_subcategory">Subcategory*</label>
    <?php if($dropdownlist != "") { ?>
    <select id="item_subcategory" name="item_subcategory">
      <?php echo $dropdownlist; ?>
    </select>
    <?php } else { ?>
    <select id="item_subcategory" name="item_subcategory" disabled="true">
      <option value="0">Select subcategory...</option>
    </select>
    <?php } ?>
  </div>
  <input type="submit" value="Next" id="submit" name="submit" style="width: 100px;" />
</form>

Form Submission:

if(isset($_POST['submit'])){
 if($_POST['item_category'] != 0){
  $dropdownlist = CategoryListing::getSubCategoryDropdown($_POST['item_category']);
 } 
 else {
  $errormessage = "Please select a category";
 }
}

Jquery:

$(document).ready(function(){
       $('#item_category').change(function(){
      this.form.submit();
     });
});

Answer 1

Try this instead:

$(function() {
  $('#item_category').change(function(){
     this.form.submit();
  });
});