Pasar Valor de Un formulario (HTML, PHP) a JS

Estoy realizando un formulario donde me gustaría que se pueda elegir un producto , una vez presionado el botón de comprar que mande el id del producto , nombre , cantidad y precio al carrito,.
Pero mi problema es que no recibe nada la función de JS.

Cómo puedo hacer que function tomé los valores que recibe del form?
Esto porque no me manda nigua valor que recibe del arreglo, en que podría mejorar?

Y bueno cualquier dato que se requiera de mi parte estaré pendiente , dado que soy nuevo con temas de php , Javascript y HTML pero me gustaría seguir mejorando, agrezco el tiempo que se brida y la atención.

Aqui abajo comparto el código que utilizó tanto HTML, PHP y la función.

Gracias

            <?php
        while($fila2=mysqli_fetch_array($registros2)){

  
       
        ?>
        <a href="#" data-toggle="modal" data-target="#">  
        <?php   $fila2['id_producto']; ?> <div id="i" class="productosmain hvr-buzz-out"><img src="administracion/productos/imagenes/<?php if(mysqli_num_rows($registros3)>0)echo $fila3['nombre'];  else echo "no-disponible.jpg"; ?>" width="100%" height="150" alt="imagen"><div class="precio"><?php echo "$".$fila2['precio']." MXN"; ?></div>
    
<form name="formu_compra">
<!--PRECIO DEL PRUCTO-->

<input style="width:65px; color:#333" type="number" name="cantidad_producto" min="1" max="10" value="1">
<input type="text" name="nombre_producto" value="HOLIS">
<input type="text" name="precio_producto" value="<?php echo $fila2['precio']; ?>">
<input type="hidden" name="id_producto" value="<?php echo $fila2 ["id_producto"]; ?>">
<?php

echo utf8_encode($fila2['nombre']);
?>
<!-- ---------------- Producto descargable ---------------------- -->
<input type="hidden" name="descargable" value="<?php echo $fila2["descargable"]; ?>"> 

        <!-- ----------------stock-------------------------- -->
<?php
//echo hi.$fila2['id_producto'];
if($fila2["cantidad"]>0 || $fila2["cantidad"]==-1){
?>
        <button type="button" onClick="aniadir_productos2()" class="btn btn-primary">Comprar  &nbsp</button>


 <br></br>

<?php
}else{ 

    echo "¡Agotado!";
    echo "</span>";
    
    ?>
    <div onClick="aviso_stock('<?php echo $fila2["id_producto"]; ?>')" style="color:orange;cursor:pointer">
        Avísame cuando haya stock
    </div>
    <?php
    
}
?>
        
        </div></a>

     <!--carrito -->
        <div id="b"  class="carrito">
          <div  style=" width:50px; height:120px; float:left; padding:4px; background-color:#0052a5; border-radius:10px 0px 0px 10px; margin-left:-50px; cursor: pointer">
                
                <i style=" margin-top:33px; margin-left:200px; color:#FFF; font-size:35px" class="fa fa-shopping-basket" aria-hidden="true"></i>  
                    
            </div>
            
            <!--numerito-->
            <?php 
          
          if(isset($_SESSION['cantidad_de_productos'])){
          
          ?>
            
            <div id="cantidad_de_productos" style="position:absolute; width:30px; height:30px; background-color: #FFF; border-radius:50%; margin-top:81px; margin-left:-41px; border: solid 2px #FF3366; text-align:center; color: #F00; font-weight:bold; padding:2.5px; font-size:14px;"><?php echo $_SESSION['cantidad_de_productos']; ?></div>
        
            
            <?php
          
          }
          
         
          ?>
            <!--Numero Muestra compra-->
       
            <div style="height:400px; padding:4px; overflow:auto" id="mostrar_compra">
                
            </div>
        </div>
        <!--carrito-->

     <?php

        }
       cerrarconexion();
        ?>

 <script>
 
function aniadir_productos2(){

    var nombre_producto=document.formu_compra.nombre_producto.value;
     window.alert(nombre_producto);
    var precio_producto=document.formu_compra.precio_producto.value;
    var cantidad_producto=document.formu_compra.cantidad_producto.value;
    // stock
    var id_producto=document.formu_compra.id_producto.value;
    // stock
    // descargable
    var descargable=document.formu_compra.descargable.value;
    // descargable

    $("#b").effect("bounce",900);
    document.getElementById('player').play();
    
    $.ajax({
                    
        type:"POST",
        url:"compra/mostrar_compra.php",
        data:{"nombre_producto":nombre_producto,"precio_producto":precio_producto,"cantidad_producto":cantidad_producto,"id_producto":id_producto,"descargable":descargable},
            
        success:function(respuesta){
                
            $("#mostrar_compra").html(respuesta);
            $("#mostrar_compra").show("fast");
            
        }
            
    });
                
    //$("#mostrar_compra").load("compra/mostrar_compra.php");

    
    
}

$(function(){
     
        $.ajax({
            
            url:"compra/mostrar_compra.php",
            
            success:function(respuesta){
                
                $("#mostrar_compra").html(respuesta);
                $("#mostrar_compra").show("fast");
            
            
            }
            
            
        });
        
     
     
});

 </script>
 

<div class="main" style=" width:100%;">
    <?php
    while($fila2=mysqli_fetch_array($registros2)){
           
    /*?>
    <!--Aqui es tamaño del cuadro -->
    <a href="detalleproducto.php?id_categoria=<?php echo $fila2['id_categoria']; ?><?php if($fila2['id_subcategoria']!=-1) {?>&id_subcategoria=<?php echo $fila2['id_subcategoria']; ?><?php } ?>&id_producto=<?php echo $fila2['id_producto']; ?>"><div id="i" class="productosmain hvr-buzz-out"><img src="administracion/productos/imagenes/<?php if(mysqli_num_rows($registros3)>0)echo $fila3['nombre']; else echo "no-disponible.jpg"; ?>" width="80%"  height="250" class="center" alt="imagen"><div class="precio"><?php echo "$".$fila2['precio']." MXN"; ?></div></div></a>
    <?php */
    ?>
    <br>
 <form name="formu_compra">      
        
<span style="font-size:30px; font-family:'Helvetica', cursive; color:#3B5998"><?php echo "$".$fila2['precio']; ?> MXN &nbsp;X&nbsp;&nbsp;
    
<input style="width:65px; color:#333" type="number" name="cantidad_producto" min="1" max="10" value="1">

<input type="text" name="nombre_producto" value="<?php echo utf8_encode($fila2['nombre']); ?>">
<input type="text" name="precio_producto" value="<?php echo $fila2['precio']; ?>">
<input type="hidden" name="id_producto" value="<?php echo $fila2 ["id_producto"]; ?>">

<!-- ---------------- Producto descargable ---------------------- -->
<input type="hidden" name="descargable" value="<?php echo $fila2["descargable"]; ?>"> 
                <button type="button" onClick="comprobar_stock('<?php echo $fila2["cantidad"]; ?>')" class="btn btn-primary">Comprarp  &nbsp</button>

        </form>

<form name="formu_compra8">

<!-- ---------------- Producto descargable ------------->
    

    
    


    <?php
    }
    cerrarconexion();
    ?>
    <div class="limpiar"></div>
    </div>

</form>