使用Ajax验证表单时未定义

时间：2015-04-17 15:52:04

标签： javascript php html ajax forms

我有一个在通过PHP发送之前使用javascript验证的表单，并且由于某种原因，textarea字段始终返回为undefined。我也无法获得发送任何内容的复选框，它显示为空白。我对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

?>

2 个答案:

答案 0 :(得分：0)

你只需要使用jquery函数

  

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

或

  

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

就像你的情况一样：

给你的表单一个id。比

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

并使用ajax发送。 并且可能会将您的点击事件更改为提交事件，例如：

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

问候timmi

答案 1 :(得分：0)

您的查询字符串可能包含空格等禁用字符，会将其分开导致缩短字符串，以便在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());
相关问题
最新问题