Necesito que al hacer clic en un botón y que me envíe muchos datos a un archivo PHP. Los datos se encuentran en un formulario y también en una tabla que se abre dentro de un modal pero surge un inconveniente al hacer clic en ese botón: se abre el modal y el botón no envía los datos que necesito. Muchas gracias Adjunto el código :
<div class="content-wrapper" >
<div class="page-title">
<div>
?>
<h1><i class="fas fa-warehouse"></i> Gestion de Entregas </h1>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12" >
<div class="card" style="background-color: #F9F8F5; height: 210px">
<div class="card-title-w-btn">
<h3 class="title"><i class=""></i> Detalle de Producto</h3>
</div>
<div class="card-body">
<form role="form" id="datos_pedido">
<div class="col-md-4 " style="display: none;">
<label class="control-label">IDarea:</label>
<input type="text" class="form-control" maxlength="18" name="idarea" id="idarea" placeholder="Nombre" value="<?php if (isset($id_area)) echo $id_area ?>" readonly>
</div>
<div class="col-md-4 ">
<label class="control-label">Area destino</label>
<input type="text" maxlength="25"class="form-control" name="dest_sal" id="dest_sal" placeholder="destino" value="" required >
</div>
<div class="col-md-4 ">
<label class="control-label">Receptor:</label>
<input type="text" maxlength="35"class="form-control" name="receptor-sal" id="receptor-sal" placeholder="Receptor" value="" required>
</div>
<div class="col-md-4">
<label class="control-label">Fecha de Salida</label>
<input style="max-height: 40px;" type="datetime-local" class="form-control form-control-danger" name= "fechaout" id="fechaout" title="Por favor ingrese fecha" value="" autofocus required>
</div>
<div class="col-md-4" style="display: none;">
<div class="form-group-horizontal">
<label class="control-label">Id_categoria</label>
<input type="text" name="id_categoria" id="id_categoria" class="form-control" value= "">
</div>
</div>
<div class='col-md-4' style="display: none;">
<label>Filtrar por categoría</label>
<select class='form-control' name='categoria' id='categoria' >
<option value="">Selecciona una categoría</option>
<?php
$query_categoria=mysqli_query($conn,"select id_categoria, name from categorias where id_area = '$id_area'");
while($rw=mysqli_fetch_array($query_categoria)) {
?>
<option value="<?php echo $rw['id_categoria'];?>"><?php echo $rw['name']; $catera= $rw['id_categoria']; ?></option>
<?php
}
?>
</select>
</div>
<div class="col-md-4">
<h2></h2>
<button type="submit" name="add_tab" class="btn btn-info" data-toggle="modal" data-target="#AgregarPro" >Agregar Producto</button> <!--Este boton trae el modal con la tabla que esta descripto mas abajo-->
</form>
</div>
y a continuación coloco el código del MODAL
<div id="resultados1" class='col-md-12'></div><!-- Carga los datos ajax productos_pedido.php -->
<!-- Modal -->
<!-- Modal Busca Producto-->
<div class="modal fade" id="AgregarPro" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" 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">×</span></button>
<h4 class="modal-title" id="myModalLabel">Buscar productos</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<input type="text" class="form-control" id="filtrar" placeholder="Buscar productos">
</div>
<a href="#" id="bus"><i class='glyphicon glyphicon-search'></i> Buscar</a>
</div>
<div class="outer_div">
<?php
require_once('data/conexion.php');
$sql = "select * from productos where id_area = '$id_area'";
$result = mysqli_query($conn, $sql);
?>
<div class="table-responsive">
<table class="table">
<tbody class="buscar">
<tr class="warning">
<th>Código</th>
<th>Producto</th>
<th>Marca</th>
<th><span class="pull-right">Stock</span></th>
<th><span class="pull-right">Cantidad</span></th>
<th class='text-center' style="width: 36px;">Agregar</th>
</tr>
<?php
while ($row = mysqli_fetch_array($result)) {
$codigo=$row['id_producto'];
$producto=$row['name'];
$marca=$row['marca'];
$stock=$row['stock_actual'];
$cantidad=$row['precio_unidad'];
?>
<tr>
<td><?php echo $codigo; ?></td>
<td><?php echo $producto; ?></td>
<td><?php echo $marca; ?></td>
<td class='col-xs-1'>
<div class="pull-right">
<input type="text" class="form-control" style="text-align:right" id="cantidad_<?php echo $codigo ?>" value="<?php echo $stock ?>">
</div>
</td>
<td class='col-xs-2'>
<div class="pull-right">
<input type="text" class="form-control" name= "cants" id="cants" style="text-align:right" value="">
</div>
</td>
<td class='text-center'>
<a class='btn btn-info'href="#" onclick="agregar(<?php echo $codigo ?>)"><i class="glyphicon glyphicon-plus"></i></a> **<!--Este boton es el que envia los datos de la tabla en el modal -->**
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div><!-- Datos ajax Final -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
Este es el script que envía los datos pero no se como agregar mas variables, por ejemplo los datos del form y otros datos de la tabla.
<script type="text/javascript">
function agregar(id){
var cant = document.getElementById('cantidad_'+id).value;
var cants = document.getElementById('cants').value;
$.ajax({
type: 'POST',
url: "ajax/agregar_pedido.php",
data: "codigo="+id+"&canti="+cant+"&cants="+cants,
success: function (datos){
$("#resultados1").html(datos);
}
});
}
</script>
agregar_pedido.php
esta dentro de una carpeta llamada ajax?