使用 Ajax 验证表单时未定义答案

【问题标题】：Getting undefined when using Ajax to validate form使用 Ajax 验证表单时未定义
【发布时间】：2015-06-24 14:03:14
【问题描述】：

我有一个表单，它在通过 PHP 发送之前使用 javascript 进行验证，并且由于某种原因，textarea 字段总是返回为未定义。我也无法让复选框发送任何内容，它是空白的。我对 Javascript 或 PHP 不是很有经验，所以我真的不知道我可能会错过什么，我已经尝试了一些解决类似问题的方法，但它们都没有解决任何一个问题。

这是我的 HTML 表单：

<form method="post" action="sendestimate.php">
         <p><label for="company">Company:</label> <input type="text" class="form-control" name="company" id="company" tabindex="1" /></p>
        <p><label for="firstname">First Name:*</label> <input type="text" class="form-control" name="firstname" id="firstname" tabindex="2" /></p>
        <p><label for="lastname">Last Name:*</label> <input type="text" class="form-control" name="lastname" id="lastname" tabindex="3" /></p>
        <p><label for="email">Email:*</label> <input type="text" class="form-control" name="email" id="email" tabindex="4"  /></p>
        <p><label for="phone">Phone:*</label> <input type="text" class="form-control" name="phone" id="phone" tabindex="5" /></p>
        <p><label for="street">Street Address:*</label> <input type="text" class="form-control" name="street" id="street" tabindex="6" /></p>
        <p><label for="city">City:*</label> <input type="text" class="form-control" name="city" id="city" tabindex="6" /></p>
        <p><label for="state">State:*</label> <input type="text" class="form-control" name="state" id="state" tabindex="6" /></p>
        <p><label for="zip">Zip:*</label> <input type="text" class="form-control" name="zip" id="zip" tabindex="6"  /></p>
        <p><label for="interest">Areas of Interest:*</label><br>

          <input type="checkbox" name="chk_group[]" value="A" /> Choice One<br>
            <input type="checkbox" name="chk_group[]" value="B" /> Choice Two<br>
            <input type="checkbox" name="chk_group[]" value="C" /> Choice Three<br>
            <input type="checkbox" name="chk_group[]" value="D" /> Choice Four<br>
            <input type="checkbox" name="chk_group[]" value="E" /> Choice Five<br>
            <input type="checkbox" name="chk_group[]" value="F" /> Choice Six<br>
             <input type="checkbox" name="chk_group[]" value="G" /> Choice Seven<br>
            <input type="checkbox" name="chk_group[]" value="H" /> Choice Eight<br></p>
            <p><label for="doors">Number of windows / Doors:</label> <input type="text" class="form-control" name="doors" id="doors" tabindex="6" /></p>

 <p><label for="hear">How did you hear about our company?</label> <textarea  class="form-control" name="hear" id="hear" cols="12" rows="6" tabindex="7"></textarea></p>           

        <p><label for="info">Additional Information:</label> <textarea class="form-control" name="info" id="info" cols="12" rows="6" tabindex="8"></textarea></p>

        <p><input name="estimatesubmit" type="submit" id="estimatesubmit" class="submit" value="Send" tabindex="9" /></p>

这是我的 javascript：

$(function() {
var paraTag = $('input#estimatesubmit').parent('p');
$(paraTag).children('input').remove();
$(paraTag).append('<input type="button" name="estimatesubmit" id="estimatesubmit" class="button radius medium" value="Submit"/>');

$('#estimateform input#estimatesubmit').click(function() {
$('#estimateform').append('<img src="images/ajax-loader.gif" class="loaderIcon" alt="Sending..." />');

   var company = $('input#company').val();
    var firstname = $('input#firstname').val();
    var lastname = $('input#lastname').val();
    var email = $('input#email').val();
    var phone = $('input#phone').val();
    var street = $('input#street').val();
    var city = $('input#city').val();
    var state = $('input#state').val();
    var zip = $('input#zip').val();
    var chk_group = $('input#chk_group').val();
    var doors = $('input#doors').val();
    var hear = $('textarea#hear').val();
    var info = $('textarea#info').val();


    $.ajax({
        type: 'post',
        url: 'sendestimate.php',
        data: 'company=' + company + '&firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&phone=' + phone + '&street=' + street + '&city=' + city + '&state=' + state + '&zip=' + zip + '&chk_group=' + chk_group + '&doors=' + doors + '&hear=' + hear + '&info=' + info,

        success: function(results) {
            $('#estimateform img.loaderIcon').fadeOut(1000);
            $('#sendstatus').html(results);

        }

    }); // end ajax
});
});

这是我的 php：

<?php


$company = filter_var($_POST['company'], FILTER_SANITIZE_STRING);
$firstname = filter_var($_POST['firstname'], FILTER_SANITIZE_STRING);
$lastname = filter_var($_POST['lastname'], FILTER_SANITIZE_STRING);
$email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$phone = filter_var($_POST['phone'], FILTER_SANITIZE_STRING);
$street = filter_var($_POST['street'], FILTER_SANITIZE_STRING);
$city = filter_var($_POST['city'], FILTER_SANITIZE_STRING);
$state = filter_var($_POST['state'], FILTER_SANITIZE_STRING);
$zip = filter_var($_POST['zip'], FILTER_SANITIZE_STRING);
$chk_group = filter_var($_POST['chk_group'], FILTER_SANITIZE_STRING);
$doors = filter_var($_POST['doors'], FILTER_SANITIZE_STRING);
$hear = filter_var($_POST['hear'], FILTER_SANITIZE_STRING);
$info = filter_var($_POST['info'], FILTER_SANITIZE_STRING);

$site_owners_email = 'myemail@email.com'; // Replace this with your own email address
$site_owners_name = 'My Name'; // replace with your name
$site_owners_name_from = 'Estimate Submission';

if (strlen($firstname) < 2) {
    $error['firstname'] = "Please enter your first name";
}

if (strlen($lastname) < 2) {
    $error['lastname'] = "Please enter your last name";
}

if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
    $error['email'] = "Please enter a valid email address";
}

if (strlen($phone) < 3) {
    $error['phone'] = "Please enter your phone number.";
}

if (!$error) {

    require_once('phpMailer/class.phpmailer.php');
    $mail = new PHPMailer();

    $mail->From = $email;
    $mail->FromName = $site_owners_name_from;
    $mail->Subject = "Estimate Form Submission";
    $mail->AddAddress($site_owners_email, $site_owners_name);
    $mail->IsHTML(true);
    $mail->Body = 'The estimate form on your website has been filled out.'. '<br/><br/>'. '<b>Company:</b> '. $company . '<br/><b>First Name:</b> '. $firstname . '<br/><b>Last Name:</b> '. $lastname .'<br/><b>E-mail:</b> '. $email .'<br/><b>Phone:</b> '. $phone .'<br/><b>Street Address:</b> '. $street .'<br/><b>City:</b> '. $city . '<br/><b>State:</b> '. $state . '<br/><b>Zip:</b> '. $zip . '<br/><b>Areas of Interest:</b> '. $chk_group . '<br/><b>Number of windows / Doors:</b> '. $doors . '<br/><b>How did you hear about our company?</b> '. $hear . '<br/><b>Additional Information:</b> '. $info;



    $mail->Send();

    echo "<div class='alert alert-success'  role='alert'>Thanks " . $firstname . ". Your message has been sent.</div>";

} # end if no error
else {

    $response = (isset($error['firstname'])) ? "<div class='alert alert-danger'  role='alert'>" . $error['firstname'] . "</div> \n" : null;
    $response .= (isset($error['email'])) ? "<div class='alert alert-danger'  role='alert'>" . $error['email'] . "</div> \n" : null;
    $response .= (isset($error['phone'])) ? "<div class='alert alert-danger'  role='alert'>" . $error['phone'] . "</div>" : null;

    echo $response;
} # end if there was an error sending

?>

【问题讨论】：

你格式化这个问题的方式更适合codereview.stackexchange.com。对于 stackoverflow 尝试将您的问题缩小到失败的地方或向我们提供错误消息等。
注意：你应该考虑 $('form').serialize();
请注意，ID 是唯一的，您永远不必这样做$('#estimateform input#estimatesubmit')
@PaulS。 - 虽然代码的格式在 Code Review 中很常见，但这里的实际问题是关于损坏的代码，所以这个问题，在它目前的非工作状态下，在那里会是题外话（我猜你确实知道那个，但我只是确保 curvetide 明白，代码审查的交叉帖子会因为离题而关闭）。
提示：没有匹配$('input#chk_group')的元素

标签： javascript php html ajax forms

【解决方案1】：

你只需要使用jquery函数

.serialize() // 将一组表单元素编码为字符串以进行提交。

或

.serializeArray() // 将一组表单元素编码为名称和值的数组。

就像你的情况：

给你的表单一个id。比

var formArray = $('#formId').serializeArray();

并使用 ajax 发送。也许将您的点击事件更改为提交事件，例如：

$('#formId').submit(function(){
    // code in here
});

你好，提米

【讨论】：

在我过去的案例中，它总是可以完成这项工作，而且您还可以同时使用一个不错的数组

【解决方案2】：

您的查询字符串可能包含诸如空格之类的禁止字符，这会将其分开导致缩短字符串，以便在 PHP 端的 $_POST 中不设置下一个键。

在构建此帖子字符串之前，只需对每个字符串值调用encodeURIComponent 函数，并在数组（多个输入值）上调用$.param：

var company = encodeURIComponent($('input#company').val());
var lastname = encodeURIComponent($('input#lastname').val());
var email = encodeURIComponent($('input#email').val());
var phone = encodeURIComponent($('input#phone').val());
var street = encodeURIComponent($('input#street').val());
var city = encodeURIComponent($('input#city').val());
var state = encodeURIComponent($('input#state').val());
var zip = encodeURIComponent($('input#zip').val());
var chk_group = $.param($('input#chk_group[]').val());
var doors = encodeURIComponent($('input#doors').val());
var hear = encodeURIComponent($('textarea#hear').val());
var info = encodeURIComponent($('textarea#info').val());

【讨论】：

我仍然收到 undefined 作为我的 textareas 的输出
@curvetide 尝试在input#chk_group[] 上使用$.param，就像我编辑的答案一样。