<div class="w3-row">
    <div class="w3-col w3-center">
        <form name="my_form" id="my_form">
            <input type="text" name="foo" value="12345gfd">
            <input type="text" name="bar" value="1234sdfghjzt5gfd">
            <button type="button" id="foobutton">doit</button>
        </form>
    </div>
</div>
<script type="application/javascript">
    $(function () {
        $('#foobutton').click(function () {
            let formData = new FormData(window.document.forms.namedItem('my_form'));
            let data = {};
            formData.forEach((key, value) => data[key] = value);
            $.ajax({
                url: '/lerp-product-product/a536d460-5791-4338-bb32-507fc7958264',
                method: 'put',
                data: data,
                processData: false, // wegen FormData
                contentType: false, // wegen FormData
                success: function (data, textStatus, jqXHR) {
                    console.log('yeah, back from PUT');
                }
            });
        });
    });
</script>