can not read property 'value' of undefined

Try this, just change the type of search so that it is by Id anything you tell me:

function anadirAlCarrito(){

    var nombre_producto=document.getElementById('nombre_producto').value;
    var precio_producto=document.getElementById('precio_producto').value;
    var cantidad_producto=document.getElementById('cantidad_producto').value;
    var id_producto=document.getElementById('id_producto').value;

    $.ajax({
            type:"POST",
            url:"compra/carrito.php",
            data:{nombre_producto:nombre_producto,precio_producto:precio_producto,
            cantidad_producto:cantidad_producto,id_producto:id_producto},

            // beforeSend:function(){

            //  },

            success:function(respuesta){

                    $("#contenedor_carrito").html(respuesta);
                    $("#contenedor_carrito").show("fast");
                    $("#menu").load(location.href + " #menu");
            }

        });
}

<form name="formAnadirCarrito">
    <input type="text" id="nombre_producto" value="<?php echo utf8_encode($fila2['nombre']); ?>">
    <input type="text" id="precio_producto" value="<?php echo $fila2['precio']; ?>">
    <input type="text" id="cantidad_producto" value="1" maxlength=2>
    <input type="text" id="id_producto" value="<?php echo $fila2['id_producto']; ?>">
    <button type="button" onclick="anadirAlCarrito()" class="botonCarrito">Añadir al carrito</button>
</form>

There is a simpler way to reduce the code with Jquery

What I recommend is that you follow the official documentation as "success" is depreciated in version 3.0

The most advisable thing is that if you use the "document" you use ID's in your inputs to extract the value correctly and remove the quotes from the data

Using Javascript

<form id="anadirCarrito">

    <input type="text" name="nombre_producto" id="nombre_producto" value="<?php echo utf8_encode($fila2['nombre']); ?>">
    <input type="text" name="precio_producto" id="precio_producto" value="<?php echo $fila2['precio']; ?>">
    <input type="text" name="cantidad_producto" id="cantidad_producto" value="1" maxlength=2>
    <input type="text" name="id_producto" id="id_producto" value="<?php echo $fila2['id_producto']; ?>">
    <button type="button" onclick="anadirAlCarrito()" class="botonCarrito">Añadir al carrito</button>
</form>

<script type="text/javascript">
    function anadirAlCarrito(){
    var nombre_producto = document.getElementById('nombre_producto').value;
    var precio_producto = document.getElementById('precio_producto').value;
    var cantidad_producto = document.getElementById('cantidad_producto').value;
    var id_producto = document.getElementById('id_producto').value;

    $.ajax({
            type:"POST",
            url:"compra/carrito.php",
            data:{nombre_producto:nombre_producto,precio_producto:precio_producto,
            cantidad_producto:cantidad_producto,id_producto:id_producto},

            // beforeSend:function(){

            //  },

            success:function(respuesta){

                    $("#contenedor_carrito").html(respuesta);
                    $("#contenedor_carrito").show("fast");
                    $("#menu").load(location.href + " #menu");
            }

        });
    }

</script>

Using $ (this) .serialize () from JQUERY

<form id="anadirCarrito">
    <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="text" name="cantidad_producto" value="1" maxlength=2>
    <input type="text" name="id_producto" value="<?php echo $fila2['id_producto']; ?>">
    <input type="submit" value="Añadir al carrito" >
</form>
<script>
$(document).ready(function(){

//Escuchamos el evento submit
$("#anadirCarrito").submit(function(){
//Ingresamos tu codigo en ajax

    $.ajax({
            type:"POST",
            url:"compra/carrito.php",
            //Obtenemos todas la variables que estan dentro 
            //del form es el equivalente a tu objeto ejemp: "{x:x,a:a}"
           //nota :los inputs de tu form por obligación siempre deben llevar el name
            data:$(this).serialize(),


            success:function(respuesta){
                    //#lo que responde tu carrito.php
                    console.log(respuesta);
                    //$("#contenedor_carrito").html(respuesta);
                    //$("#contenedor_carrito").show("fast");
                    //$("#menu").load(location.href + " #menu");

            }

        });

});

});
</script>

And just print your cart.php file sideways the parameters

<?php 

var_dump($_POST); 
//Tu codigo que realiza la demás operación
?>

change the JavaScript script for this

function anadirAlCarrito(){
    var form=document.querySelector('[name="formAnadirCarrito"]');
    var nombre_producto=form.elements.nombre_producto.value;
    var precio_producto=form.elements.precio_producto.value;
    var cantidad_producto=form.elements.cantidad_producto.value;
    var id_producto=form.elements.id_producto.value;


    $.ajax({
            type:"POST",
            url:"compra/carrito.php",
            data:{"nombre_producto":nombre_producto,"precio_producto":precio_producto,
            "cantidad_producto":cantidad_producto,"id_producto":id_producto},

            // beforeSend:function(){

            //  },

            success:function(respuesta){

                    $("#contenedor_carrito").html(respuesta);
                    $("#contenedor_carrito").show("fast");
                    $("#menu").load(location.href + " #menu");
            }

        });
}