Question

我最近创建的表单存在问题。似乎它不能每次都按设计工作，并且在测试本身期间不一致。即使经过大量搜索并尝试重写JavaScript函数，我仍然无法确定问题所在。

希望在StackOverflow的帮助下，可以看到其中的错误并提供一些建议。

HTML表单：

//I am using jQuery
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>


<script>

// Processing hidden fields for campaign tracking information
    function getCamp(name) {
        var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
        return (results && results[1]) || undefined;
    }
    var camp = getCamp('utm_campaign');
    if (camp > '') {
        console.log( 'got it: ' + camp);
        document.getElementById('report-camp').value = camp;
    } else {
        console.log('campaign is missing');
    }

    var lpurl = document.location.href;
    document.getElementById('report-url').value = lpurl;



$(document).ready(function() {

    $('#contact-form').submit(function(event) {

        var formData = {
            'first-name'   : $('input[name=first-name]').val(),
            'last-name'    : $('input[name=last-name]').val(),
            'phone'        : $('input[name=phone').val(),
            'email'        : $('input[name=email]').val(),
            'report-phone' : $('input[name=report-phone').val(),
            'report-camp'  : $('input[name=report-camp').val(),
            'report-url'   : $('input[name=report-url').val()
        };

        // process the form
        $.ajax({
            type        : 'POST',
            url         : 'https://hooks.zapier.com/hooks/catch/xxxxxx/xxxx/', 
            data        : formData, // object
            encode      : true
        })
            // using the done promise callback
            .done(function(data) {
                console.log(data); 
                window.location = "/thank-you";
            });
        event.preventDefault();
    });

});
</script>

<form id="contact-form">
    <input type="hidden" name="report-phone" value="<?php echo $dynamic_phone; ?>">
    <input id="haa-camp" type="hidden" name="report-camp" value="organic">
    <input id="haa-url" type="hidden" name="report-url" value="n/a">
    <div class="form-icons">
        <h4>Form Headline</h4>
        <p>Why you should fill out the form</p>

        <div class="input-group">
                    <span class="input-group-label">
                        <i class="fa fa-user"></i>
                    </span>
            <input class="input-group-field" name="first-name" type="text" placeholder="First name" required>
        </div>

        <div class="input-group">
                    <span class="input-group-label">
                        <i class="fa fa-user"></i>
                    </span>
            <input class="input-group-field" name="last-name" type="text" placeholder="Last name" required>
        </div>

        <div class="input-group">
                    <span class="input-group-label">
                        <i class="fa fa-envelope"></i>
                    </span>
            <input class="input-group-field" name="email" type="email" placeholder="Email" required>
        </div>

        <div class="input-group">
                    <span class="input-group-label">
                        <i class="fa fa-phone"></i>
                    </span>
            <input class="input-group-field" name="phone" type="text" placeholder="Phone" required>
        </div>
    </div>


    <button class="button form-button" type="submit" value="Submit">
        <i class="fa fa-paper-plane"></i> &nbsp; Get Help Today
    </button>

</form>

在某些情况下，此功能可以完美运行，而在其他情况下，则导致将表单数据放入URL中，如下所示： https://example.com/?report-phone=123-456-7890&report-camp=Primay-Lead-Source-Mobile&report-url=https%3A%2F%2Fexample.com%2F%3Fgeo%3DPrimary%26utm_source%3DGAW%26utm_campaign%3DPrimary-Lead-Source-Mobilee&first-name=john&last-name=doe&email=jdoe%40testform.com&phone=123-000-0000

任何想法都将不胜感激，谢谢您的关注。

Answer 1

您尝试使用标准html提交（默认方法为“ GET”）以及ajax提交表单。我为您创建了一个示例fiddle，该示例仅使用ajax请求。在这种情况下，数据总是通过POST发送。

<button id="getHelpBtn"class="button form-button" type="button" value="Submit">
        <i class="fa fa-paper-plane"></i> &nbsp; Get Help Today
    </button>

$(document).ready(function() {

  $('#getHelpBtn').click(function(event) {

    // process the form
    $.ajax({
        type: 'POST',
        url: 'https://hooks.zapier.com/hooks/catch/xxxxxx/xxxx/',
        data: $('#contact-form').serialize(), // object
        encode: true
      })
      // using the done promise callback
      .done(function(data) {
        console.log(data);
        window.location = "/thank-you";
      });
  });

});

Ajax表单偶尔会将数据添加到URL而不是POST，然后重定向

1 个答案: