La función AJAX no se activa

Hola a todos, quiero analizar la matriz al controlador Codeigniter, pero mi código no funciona, ¿pueden decirme dónde hay un error en este código? Soy nuevo en jQuery. Sé que es un error muy básico.

Código jQuery:

$("#add_state").click(function(){
      var addstate = {
        State: $.trim($('#statename').val()
      }
      $.ajax({
        type: "POST",
        url: "<?php echo base_url()?>/index.php/geo/add_state",
        data: addstate,
        success: function(response){
          alert(response);
        }
      });
    event.preventDefault();
});

Código HTML:

<form role="form">
   <div class="form-group">
      <label for="exampleInputEmail1">State Name</label>
      <input type="text" name="State" class="form-control" id="statename" placeholder="Enter State Name">
   </div>
   <button type="submit" class="btn btn-info" id="add_state">Submit</button>
</form>