一次通過 JS 發送一個表單和一個常規的 POST

Question

我很難使用 POST 和 JS 發送表單。 這種設置的原因是同時通過 AWS 向 DotMailer 電子郵件程序和 Magento 發送表單，兩者具有不同的發送方式。 我認為它在真正有機會 POST 之前被發送到 AWS？

數據在發送到 AWS 之前是 JSON 化的，我認為這對郵件程序的 POST 來說是一個問題？

幫助將不勝感激！

代碼形式代碼：

        <form name="signup" id="signup" action="https://example.com/signup.ashx" method="post" autocomplete="off" class="redeye-form loyalty-form" onsubmit="return validate_signup(this, true)" data-form-id="loyalty-form">
<input type="hidden" name="ci_isconsentform" value="true">
<input type="hidden" name="userid" value="230531">
<input type="hidden" name="SIGb7f7109acfe72442f3b9937c47f1c0e7a78f60e9bec1ba7a7084e947eebceef2" value="">
<input type="hidden" name="addressbookid" value="574883" />
<input type="hidden" name="ReturnURL" value="">
<input type="hidden" id="ci_consenturl" name="ci_consenturl" value="">
            <div>
                <label class="wrap" for="FIRSTNAME">Imi&#281;: <span class="requiredfield">*</span></label>
                <input name="cd_FIRSTNAME" id="FIRSTNAME" type="text" data-parameter="firstname" class="text regex"  placeholder=""   data-regex="^.{1,}$" data-regex-message="Wpisz poprawne imie (przynajmniej jeden znak)"aria-required="false" />
            </div>
            <div>
                <label class="wrap" for="LASTNAME">Nazwisko: <span class="requiredfield">*</span></label>
                <input  name="cd_LASTNAME" id="LASTNAME" type="text" data-parameter="lastname" class="text regex" placeholder=""  data-parameter="lastname"aria-required="false" />
            </div>

            <div>
<label class="wrap" for="POSTCODE">Kod pocztowy:</label>
<input type="text" class="text regex" name="cd_POSTCODE" id="POSTCODE" aria-required="false" />
</div>


            <div>
                <label class="wrap" for="email">Adres e-mail: <span class="requiredfield">*</span></label>
                <input type="text" name="email" id="email" required aria-required="true" data-parameter="email" class="text regex">
            </div>

            <div class="newsletter text">

            <p>


            <input type="checkbox" name="ci_userConsentCheckBox" id="ci_userConsentCheckBox" data-parameter="doubleoptin" value="c">Consent text 1</p>

            <input type="checkbox" name="sprawdzanko" id="sprawdzanko" value="1"><span>Consent text 2</span>

            <p>Consent text 3</p>

            <p>Kliknięcie w przycisk "Wyślij" znajdujący się poniżej oznacza akceptację Regulaminu.</p>

            </div>





            <input type="submit" class="c-btn c-btn--secondary" onmousedown="doSubmitEvents();" name="btnsubmit" id="btnsubmit" value="Wyślij" disabled> <p><span class="requiredfield">*</span>Wymagane pola</p>


        </form>

發送JS：

  <script>
        jQuery( document ).ready(function() {

    const storeCode = "rg_pl";

    var site = {
        "url"       :  "https://reporting.example.com",
        "id"        :  "14555",
        "notify"    :  "examplesingleoptinwelcome"
    };

    var form = document.getElementsByTagName("form")[0];
    var loyaltyForm = form.classList.contains('loyalty-form') == true;

    jQuery("form.redeye-form .c-btn--secondary").click(function(e) {

        e.preventDefault();

        jQuery('.popup').remove();
        var validityErrors = 0;

        jQuery("input.required").each(function( index ) {
            jQuery(this).removeClass("invalid");
            if (!jQuery(this).val()) {
                jQuery(this).after("<div class='popup'>Please enter something here</div>");
                setTimeout(function() {
                    jQuery('.popup').remove();
                }, 7000);
                jQuery(this).addClass("invalid");
                validityErrors++;
            }
        });

        jQuery("select.required").each(function( index ) {
            jQuery(this).removeClass("invalid");
            if (!jQuery(this).val()) {
                jQuery(this).after("<div class='popup'>Please enter something here</div>");
                setTimeout(function() {
                    jQuery('.popup').remove();
                }, 7000);
                jQuery(this).addClass("invalid");
                validityErrors++;
            }
        });

        jQuery("input.regex").each(function( index ) {
            jQuery(this).removeClass("invalid");
            var patt = new RegExp(jQuery(this).data("regex"));
            var result = patt.test(jQuery(this).val());
            if (result !== true) {
                var message = jQuery(this).data("regex-message");
                jQuery(this).after("<div class='popup'>" + message + "</div>");
                setTimeout(function() {
                    jQuery('.popup').remove();
                }, 7000);
                jQuery(this).addClass("invalid");
                validityErrors++;
            }
        });

        if (validityErrors == 0) {

            var result = {};

            var location = (window.location != window.parent.location)
            ? document.referrer
            : document.location.href;

            result["form-location"] = location;

            var url = site.url + "/cgi-bin/rr/blank.gif";

            var formTitle = jQuery("form.redeye-form").data("form-id");

            result["subject"] = formTitle;

            url = url.concat("?nourl=" + encodeURI(formTitle));
            url = url.concat("&" + encodeURI(formTitle) + "=" + encodeURI(formTitle));

            jQuery("form.redeye-form input").each(function( index ) {
                if ( jQuery(this).is("input:text") ){
                    var parameter = jQuery(this).data("parameter");
                    var value = jQuery(this).val();
                }

                if ( jQuery(this).is("input:checkbox") ){
                    var parameter = jQuery(this).data("parameter");
                    var value = jQuery(this).is(':checked');
                }

                if ( jQuery(this).is("input:hidden") ){
                    var parameter = jQuery(this).data("parameter");
                    var value = jQuery(this).val();
                }

                result[parameter] = value;
                url = url.concat("&" + encodeURI(parameter) + "=" + encodeURI(value));
            });

            jQuery("form.redeye-form select").each(function( index ) {
                var parameter = jQuery(this).data("parameter");
                var value = jQuery(this).val();
                url = url.concat("&" + encodeURI(parameter) + "=" + encodeURI(value));
            });

            if (jQuery("input[data-parameter='doubleoptin']").is(":checked") == true) {
                url = url.concat('&notify=' + site.notify);
                url = url.concat("&emailpermit="  + "yes");
                url = url.concat("&newsletter=" + site.id);
            } else {
                url = url.concat("&emailpermit="  + "no");
                url = url.concat("&newsletter=" + site.id);
            }

            url = url.concat("&domain_id=" + site.id);

            var date = new Date();
            result["date"] = date.getFullYear() + '-' + ('0' + date.getDate()).slice(-2) + '-'
             + ('0' + (date.getMonth()+1)).slice(-2);

            result["url"] = window.location.href;

            result["storeCode"] = storeCode;

            var redEyeForm = jQuery( "form.redeye-form" );
            redEyeForm.replaceWith( "<div class='successmessage'>Dziękujemy za wysłanie formularza</div>" );

            // if (result["doubleoptin"] == "c") {
            //     result["doubleoptin"] = 1;
            // } else {
            //     result["doubleoptin"] = 0;
            // }


            if (loyaltyForm == true){
                console.log(result);
                jQuery.ajax({
                    type: "POST",
                    url: 'https://example.execute-api.eu-west-1.amazonaws.com/Deployment',
                    contentType: 'application/json',
                    data: JSON.stringify(result),
                    success: function(res){
                        redEyeForm.replaceWith( "<div class='successmessage'>Dziękujemy za wysłanie formularza</div>" );
                    },
                    error: function(){
                        redEyeForm.replaceWith( "<div class='successmessage'>Wystąpił błąd</div>" );
                    }
                });
            }
        }
    });
});

        </script>

編輯：這能完成我需要的嗎？

            if (loyaltyForm == true){
                console.log(result);

                    jQuery.ajax({
                    type: "POST",
                    url: 'https://h3uxa21uxf.execute-api.eu-west-1.amazonaws.com/Deployment',
                    contentType: 'application/json',
                    data: JSON.stringify(result),
                    success: function(res){

    var $form = $(#signup);

    $.ajax({
     type     : "POST",
     cache    : false,
     url      : $form.attr('action'),
     data     : $form.serializeArray(),
     success  : function(data) {

                        redEyeForm.replaceWith( "<div class='successmessage'>Dziękujemy za wysłanie formularza</div>" );
                    },

    });
 }

                    error: function(){

                        redEyeForm.replaceWith( "<div class='successmessage'>Wystąpił błąd</div>" );
                    }

                });



            }
        }
    });
});

Answer 1

我有幾個示例，您可以在此基礎上進行構建。

選項 1 - 您可以通過 ajax 提交到 URL 1，然后提交表單，就像用戶點擊了 URL 2 的按鈕一樣。

選項 2 - 提交到 URL 1，然后成功 - 提交到 URL 2 - 都通過 AJAX

// Option 1 - Ajax to submit first and then conduct default submit action for form
function ajaxAndSubmit(e){
e.preventDefault(); // Stop the default action of the submit button
  var formData = $('#sample-form').serialize(); // Serialize the data
  // Start ajax 1
  $.ajax( {
        type: "POST",
        url: 'some url',
        data: formData,
        success: function( response ) {
          console.log( response );
          //Mimic default action
          $('#sample-form').submit();
        }
   } );
}

// Option 2 - handle both in ajax
function ajaxAndSubmitWithAjax(e){
e.preventDefault(); // Stop the default action of the submit button
  var formData = $('#sample-form').serialize(); // Serialize the data
  // Start ajax 1
  $.ajax( {
        type: "POST",
        url: 'some url',
        data: formData,
        success: function( response ) {
          console.log( response );
          // Submit via ajax
          $.get('some-url.php?' + $('#sample-form').serialize()); // Using GET
                    $.post('some-url.php', $('#sample-form').serialize()); // Using POST
        }
   } );
}