Question

我编辑了HTML，JS和PHP。已编辑的表格位于http://lataeviaberry.com/donate.html。填充表单并单击提交后，只需刷新页面并显示此URL＆＃34; http://lataeviaberry.com/donate.html?name=test&address=test&city=test&state=test&zip=12356＆＃34;未经编辑的表格适用于＆＃34; LaTaeviabery.com＆＃34;与原始字段，但我需要这个捐赠页面表单接受地址。

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

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（）处理程序的末尾。

尝试编辑使用模板购买的表单但我似乎无法使其运行

1 个答案: