javascript - 使用 Ajax 验证表单时未定义

Question

我有一个在通过 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

?>

Answer 1

你只需要使用jquery函数

.serialize() // Encode a set of form elements as a string for submission.

或

.serializeArray() // Encode a set of form elements as an array of names and values.

如您的情况:

给你的表格一个ID。比

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

然后用ajax发送。 也许将您的点击事件更改为提交事件，例如:

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

问候提米