Problem with passing modal data - javascript - PHP

I have this code for the modal in html, because when loading the modal I can not capture the information of the fields in javascript to be able to send them to PHP and enter the information to the table. I get error 404 in the browser.

<button class="btn btn-primary btn-sm pull-right" data-toggle="modal" data-target="#myModal" data-placement="left" title="Agregar">
        <span class="fa fa-plus"></span> Nuevo
        </button>


     <div class="modal fade bs-example-modal-m " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-m" role="document">
        <div class="modal-content">
          <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel"><strong><span class='fa fa-plus'></span> Agregar Nuevo Role</strong></h4>
          </div>
          <div class="modal-body">

            <form class="form-horizontal" role="form">
                <div class="col-md-12 form-group">
                    <label for="Detalle">Tipo de Role</label>
                    <input type="text" class="form-control" name="tiporole1" id="tiporole1" required>
                </div>
                <div class="col-md-12 form-group">
                    <label for="Detalle">Detalle</label>
                    <textarea class="form-control" id="detalle1" name="detalle1" placeholder="Ingrese un detalle" required></textarea>
                    <!--<input type="text" class="form-control" name="detalle1" id="detalle1" required>-->
                </div>
                <br>
                <div class="modal-footer">
                    <button type="submit"  class="btn btn-primary submitBtn" onclick="nuevoRole()"><span class='fa fa-save'></span> Guardar</button>
                    <button type="button" class="btn btn-warning" data-dismiss="modal"><span class='fa fa-close'></span> Cerrar</button>  
                </div>
            </form>               
          </div>
        </div>
      </div>
    </div>

Now, I have this javascript code, to get the html data.

function nuevoRole(){

  var tipo_role=document.getElementById('tiporole1').value;
  var detalle=document.getElementById('detalle1').value;

$.ajax({
    type:'POST',
    url:'./core/ajax/add_role.php',
    data:'tipo_role='+tipo_role+'&detalle='+detalle,
    beforeSend: function () {
        $('.submitBtn').attr("disabled","disabled");
        $('.modal-body').css('opacity', '.5');
    },
    success:function(msg){
        if(msg == 'ok'){
            $('tiporole1').val('');
            $('detalle1').val('');
            //$('#inputMessage').val('');
            $('.statusMsg').html('<span style="color:green;">Nuevo Role Agregdo.</p>');
        }else{
            $('.statusMsg').html('<span style="color:red;">Error, please try again.</span>');
        }
        $('.submitBtn').removeAttr("disabled");
        $('.modal-body').css('opacity', '');
    }
});}

Now, the non-php code is this.

<?php  
require_once ('../core/clases/Role.php');

if (isset($_POST['tiporole1'])) {
    $tipo=$_POST['tiporole1'];
}
if (isset($_POST['detalle1'])) {
    $detalle=$_POST['detalle1'];
}
$id_user = 1;
$created_at = date("Y-m-d H:i:s");

$user = new User($tipo,$detalle,$id_user,$id_user,$created_at);
$user->saveUser(); ?>

Then, to finish, the browser in debug mode tells me error 404, but the directory path of mine is like this:

  

core /

     

    

ajax /

         

      

add_role.php       lessons/       Role.php       Conexion.php

    

  

     

js /

     

    

functions.js // Here I have the js script

  

     

module /

     

    

role /

         

      

view.php // here is the view where on the button I call the modal.