Question 280018 in Wordpress Question posted in
The official Wordpress documentation can be found here.

how can I make an Ajax call instead of post printing the waybill from WordPress on my php website?

<form id="print-shipping-label-form">
    <input type="hidden" name="shipping_id" value="<?php echo $result_wpid_shipping['ID']; ?>">
    <input type="hidden" name="api_key" value="ce312203c06e8bda7157c408fbac54c4">
    <button type="submit" class="btn btn-danger">Drukuj list przewozowy</button>
</form>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var printShippingLabelForm = document.getElementById('print-shipping-label-form');
        
        if (printShippingLabelForm) {
            printShippingLabelForm.addEventListener('submit', function(event) {
                event.preventDefault(); // Zatrzymaj domyślne zachowanie formularza
                
                var formData = new FormData(printShippingLabelForm);
                var url = 'https://torebki-fabiola.pl/?flexible_shipping_get_label=' + formData.get('shipping_id') + '&apikey=' + formData.get('api_key');
                
                // Wykonaj żądanie AJAX
                fetch(url, { method: 'POST' })
                    .then(function(response) {
                        return response.text();
                    })
                    .then(function(responseText) {
                        // Obsłuż odpowiedź z serwera, np. otwórz ją w nowym oknie.
                        window.open(responseText, '_blank');
                    })
                    .catch(function(error) {
                        console.log('Wystąpił błąd podczas wykonywania żądania AJAX: ' + error);
                    });
            });
        }
    });
</script>

I try to fix problem with this code

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0
    "> Drukuj list przewozowy document.addEventListener('DOMContentLoaded', function() { var printShippingLabelForm = document.getElementById('print-shipping-label-form'); if (printShippingLabelForm) { printShippingLabelForm.addEventListener('submit', function(event) { event.preventDefault(); // Zatrzymaj domyślne zachowanie formularza var formData = new FormData(printShippingLabelForm); var url = 'https://torebki-fabiola.pl/?flexible_shipping_get_label=' + formData.get('shipping_id') + '&apikey=' + formData.get('api_key'); // Wykonaj żądanie AJAX fetch(url, { method: 'POST' }) .then(function(response) { return response.text(); }) .then(function(responseText) { // Obsłuż odpowiedź z serwera, np. otwórz ją w nowym oknie. window.open(responseText, '_blank'); }) .catch(function(error) { console.log('Wystąpił błąd podczas wykonywania żądania AJAX: ' + error); }); }); } });

  2. 0

    You can use the fetch() method in JavaScript. This method is used to make AJAX requests and returns a promise that resolves to the response from the server. After the fetch() method, then() method is used to handle the response from the server. In this example, the response is converted to JSON and logged to the console. The catch() method is used to handle any errors that occur during the AJAX request.

    Login or Signup to reply.
  3. 0

    “>

    Drukuj list przewozowy

    <!-- Skrypt JavaScript umieszczony na końcu dokumentu -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Pobranie formularza
        var printShippingLabelForm = document.getElementById('print-shipping-label-form');

        // Nasłuchiwanie na zdarzenie submit formularza
        printShippingLabelForm.addEventListener('submit', function(event) {
            event.preventDefault(); // Zatrzymaj domyślne zachowanie formularza

            // Pobranie danych z formularza
            var shippingId = document.querySelector('input[name="shipping_id"]').value;
            var apiKey = document.querySelector('input[name="api_key"]').value;

            // URL z danymi z formularza
            var url = 'https://torebki-fabiola.pl/?flexible_shipping_get_label=' + shippingId + '&apikey=' + apiKey;

            // Wykonanie żądania AJAX
            fetch(url, { method: 'POST' })
                .then(function(response) {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.text();
                })
                .then(function(responseText) {
                    // Obsłuż odpowiedź z serwera, np. otwórz ją w nowym oknie.
                    window.open(responseText, '_blank');
                })
                .catch(function(error) {
                    console.log('Wystąpił błąd podczas wykonywania żądania AJAX: ' + error);
                });
        });
    });
</script>

    this is what it looks like after the corrections, but it doesn’t work either, please help

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search