javascript - 尝试编辑使用模板购买的表格，但我似乎无法让它发挥作用

Question

我已经编辑了 HTML、JS 和 PHP。编辑后的表格位于 http://lataeviaberry.com/donate.html 。填充表单并单击“提交”后，它只会刷新页面并显示此 URL“http://lataeviaberry.com/donate.html?name=test&address=test&city=test&state=test&zip=12356”未编辑的表单可在“LaTaeviabery.com”上使用原始字段，但我需要此捐赠页面表单来接受地址。

我已在下面添加了我的代码，提前感谢您的帮助!

HTML

  <div class="col-xs-12 col-md-6">
                    <form id="ajax-contact-form2">
                        <input type="text" name="name" class="form-text wow fadeInUp" value="" placeholder="Your name" />
                        <input type="text" name="address" class="form-text wow fadeInUp" value="" placeholder="Address" />
                        <input type="text" name="city" class="form-text wow fadeInUp" value="" placeholder="City" />
                        <input type="text" name="state" class="form-text wow fadeInUp" value="" placeholder="State"/>       
                        <input type="text" name="zip" class="form-text wow fadeInUp" value="" placeholder="Zip"/>   
                        <input type="submit" class="form-button wow fadeInUp" value="SEND"/>            
                    </form>
                    <div id="form-message"></div>               
                </div>

JavaScript

$("#ajax-contact-form2").submit(function() {
        var str = $(this).serialize();
        $.ajax({
            type: "POST",
            url: "php/donatecontact-form.php",
            data: str,
            success: function(msg) {
                if(msg == 1) {
                    result = '<div class="alert success fade in">Your message has been sent. Thank you!<a href="#" class="close-alert" data-dismiss="alert"></a></div>';
                    $("#ajax-contact-form2").hide();
                } else {result = msg;}
                $('#form-message').hide();
                $('#form-message').html(result);
                $('#form-message').fadeIn("slow");
                $('html, body').animate({ 
                    scrollTop: $('#form-message').offset().top - 130 
                },1500);
            }
        });

PHP

    <?
// Field Name
$name = $_POST['name'];
if(iconv_strlen($name) < 2){echo '<div class="alert error">Please enter your name.</div>';exit();}

// Field Address
$address = $_POST['address'];
if(iconv_strlen($address) < 2){echo '<div class="alert error">Please enter your address.</div>';exit();}
// Field City
$city = $_POST['city'];
if(iconv_strlen($city) < 3){echo '<div class="alert error">Please enter your city.</div>';exit();}
// Field State
$state = $_POST['state'];
if(iconv_strlen($state) < 3){echo '<div class="alert error">Please enter your state.</div>';exit();}
// Field Zip
$zip = $_POST['zip'];
if(iconv_strlen($zip) < 5){echo '<div class="alert error">Please enter your zip.</div>';exit();}

$headers = "From: $name \r\n";
mail('hello@lataeviaberry.com', $address, 'Name:'.$name."\n\nAddress: ".$address."\n\nCity: ".$city."\n\nState: ".$state."\n\nZip: ".$zip, $headers);
echo "1";
?>

Answer 1

在您的 JavaScript 中，更改

$("#ajax-contact-form2").submit(function() {

对此:

$("#ajax-contact-form2").submit(function(e) {
    e.preventDefault();
    // the rest stays the same

否则，您的表单将在触发 AJAX 调用之前以默认方式提交。阻止此行为的另一种方法是将 return false; 添加到 Submit() 处理程序的末尾。