问问题
582 次
1

嗨真的需要一些帮助...

首先，我对 jQuery / javascript 知之甚少，一个月前我在专业构建网站后学习了基本的 CSS，然后是基本的 HTML，几天前我想我会用 jQuery 试试运气，但我完全是新手，所以如果您回答，请记住我对这些事情几乎一无所知 - 谢谢！

我一直在尝试制作一个新的联系表格，我使用了来自整个网络的一些代码（所以我知道代码可能非常混乱）无论如何，生成的表格在 Chrome 中似乎可以正常工作，但在 IE、FF 或 Safari 中在提交时它返回“抱歉，此表单存在问题”警报并且没有任何反应，我猜 PHP 脚本正在返回“1”以实现这一点，但老实说，我在我头上！

下面是jquery....

$(function(){
//original field values
var field_values = {
        //id        :  value
        'firstname'  : 'first name',
        'lastname'  : 'last name',
        'email'  : 'email address',
        'phone'  : 'phone number',
};

//inputfocus
$('input#lastname').inputfocus({ value: field_values['lastname'] });
$('input#firstname').inputfocus({ value: field_values['firstname'] });
$('input#email').inputfocus({ value: field_values['email'] }); 
$('input#phone').inputfocus({ value: field_values['phone'] }); 

//reset progress bar
$('#progress').css('width','0');
$('#progress_text').html('0% Complete');

//second_step
$('form').submit(function(){ return false; });
$('#submit_second').click(function(){
    //remove classes
    $('#second_step input').removeClass('error').removeClass('valid');

    var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
    var fields = $('#second_step input[type=text]');
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

            error++;
        } else {
            $(this).addClass('valid');
        }
    });

    if(!error) {
            //update progress bar
            $('#progress_text').html('66% Complete');
            $('#progress').css('width','226px');

            //slide steps
            $('#second_step').slideUp();
            $('#third_step').slideDown();     
    } else return false;

});

$('#submit_third').click(function(){
    //update progress bar
    $('#progress_text').html('100% Complete');
    $('#progress').css('width','339px');

    //prepare the fourth step
    var fields = new Array(
        $('#firstname').val() + ' ' + $('#lastname').val(),
        $('#email').val(),
        $('#phone').val(),
        $('#service').val(),
        $('#location').val(),
        $('#mirror').val(),
        $('#from').val()                         
    );
    var tr = $('#fourth_step tr');
    tr.each(function(){
        //alert( fields[$(this).index()] )
        $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
    });

    //slide steps
    $('#third_step').slideUp();
    $('#fourth_step').slideDown();            
});

$('#submit_fourth').click(function(){

//Get the data from all the fields
var firstname = $('input[name=firstname]');
var email = $('input[name=email]');
var lastname = $('input[name=lastname]');
var phone = $('input[name=phone]');

//organize the data properly
var data = 'firstname=' + firstname.val() + '&email=' + email.val() + '&lastname=' + lastname.val() + '&phone='  + phone.val() + '&service=' + $('select#service option:selected').val() + '&location=' + $('select#location option:selected').val() + '&mirror=' + $('select#mirror option:selected').val() + '&leadfrom=' + $('select#from option:selected').val();

//start the ajax
$.ajax({
    //this is the php file that processes the data and send mail
    url: "process.php", 

    //GET method is used
    type: "GET",

    //pass the data         
    data: data,     

    //Do not cache the page
    cache: false,

    //success
    success: function (html) {              
        //if process.php returned 1/true (send mail success)
        if (html==1) {                  
            //hide the form
            $('.summary').fadeOut('slow');                  

            //show the success message
            $('.success').fadeIn('slow');

            $('#submit_fourth').attr("disabled", true); 

            window.location = "http://www.stackoverflow.com"; 

        //if process.php returned 0/false (send mail failed)
        } else alert('Sorry, there has been a problem with this form. Thank you');              
    }       
});

//cancel the submit button default behaviours
return false;   
});
//back button

$('.back').click(function(){
    var container = $(this).parent('div'),
        previous  = container.prev();

switch(previous.attr('id')) {

    case 'first_step' : $('#progress_text').html('0% Complete');
                 $('#progress').css('width','0px');
                 break;

case 'second_step': $('#progress_text').html('33% Complete');
                     $('#progress').css('width','113px');
                         break;

    case 'third_step' : $('#progress_text').html('66% Complete');
                 $('#progress').css('width','226px');
                 break;
default: break;

}

$(container).slideUp();
$(previous).slideDown();
});
});

和HTML...

<div class="outer-formbody">
<div class="formbody">
    <a href="#" class="close">Close</a>
<div id="container">
    <form action="#" method="post">

        <!-- #second_step -->
        <div id="second_step">
            <h3>Book your appointment</h3>

            <div class="form">
                <input type="text" name="firstname" id="firstname" value="first name" />
                <label for="firstname">Your First Name.<span>*</span></label><!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input type="text" name="lastname" id="lastname" value="last name" />
                <label for="lastname">Your Last Name.<span>*</span></label><!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input type="text" name="email" id="email" value="email address" />
                <label for="email">Your email address (not shared).<span>*</span></label>   <!-- clearfix --><div class="clear"></div><!-- /clearfix -->   
                <input type="text" name="phone" id="phone" value="phone number" />
                <label for="email">Your contact number (not shared).<span>*</span></label>     
            </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
            <input class="submit" type="submit" name="submit_second" id="submit_second" value="" />
            </div>        



        <!-- #third_step -->
        <div id="third_step">
            <h3>Book your appointment</h3>

            <div class="form">
                <select id="service" name="service" class="required">
                    <option value="">Please Select</option>
                    <option>Power of Attorney</option>
                    <option>Property Trust</option>
                    <option>Disabled Trust</option>
                    <option>Discretionary Trust</option>
                    <option>Other Trust</option>
                    <option>Protection / Insurance</option>
                    <option>Other Service</option>
                </select>
                <label for="service">Select the service you require.<span>*</span></label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

                <select id="location" name="location" class="required">
                    <option value="">Please Select</option>
                    <option>Staffordshire</option>
                    <option>Shropshire</option>
                    <option>West Midlands</option>
                    <option>Shropshire</option>
                    <option>Leicestershire</option>
                    <option>Birmingham</option>
                    <option>Cheshire</option>
                    <option>Other</option>
                </select>
                <label for="location">Select your home county.<span>*</span></label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

                <select id="mirror" name="mirror" class="required">
                    <option value="">Please Select</option>
                    <option>Single</option>
                    <option>Couple</option>
                </select>
                <label for="country">Single or two documents (for a couple).<span>*</span></label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

                <select id="from" name="from" class="required">
                    <option value="">Please Select</option>
                    <option>NHS/School/Council</option>
                    <option>Friend/Family Member</option>
                    <option>Other Public Sector Employer</option>
                    <option>Private Sector Employer</option>
                    <option>Internet Advert</option>
                    <option>Google</option>
                    <option>Newspaper</option>
                    <option>NetMums</option>
                    <option>MumsNet</option>
                    <option>Other</option>
                </select>
                <label for="from">Where did you hear about us?<span>*</span></label> 
            </div><!-- clearfix --><div class="clear"></div><!-- /clearfix -->

            <input class="back" type="button" value="" />
            <input class="submit" type="submit" name="submit_third" id="submit_third" value="" />

            </div>       


        <!-- #fourth_step -->
        <div id="fourth_step">
            <h3>Book your appointment</h3>

            <div class="form">

                <div class="success">
                </br>
                </br>
                </br>
                </br>
                </br>
                <h3>Booking Submitted. <span>Please Wait . . .</span></h3>
               </div>
                <div class="summary">
                <h3>Summary</h3>
                <table class="table">
                    <tr><td>Name</td><td></td></tr>
                    <tr><td>Email</td><td></td></tr>
                    <tr><td>Phone</td><td></td></tr>
                    <tr><td>Service</td><td></td></tr>
                    <tr><td>Location</td><td></td></tr>
                    <tr><td>Single/Couple</td><td></td></tr>
                    <tr><td>From</td><td></td></tr>
                </table>
               </div>
            </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

            <input class="back" type="button" value="" />
            <input class="send submit" type="submit" name="submit_fourth" id="submit_fourth"value="" />  

        </div>

    </form>
</div>
<div id="progress_bar">
    <div id="progress"></div>
    <div id="progress_text">0% Complete</div>
</div>
<div></div> 
</div></div>
</div>

以及处理表单的 PHP 脚本....

<?php

//Retrieve form data. 
//GET - user submitted data using AJAX
//POST - in case user does not support javascript, we'll use POST instead
$firstname = ($_GET['firstname']) ? $_GET['firstname'] : $_POST['firstname'];
$email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
$lastname = ($_GET['lastname']) ?$_GET['lastname'] : $_POST['lastname'];
$phone = ($_GET['phone']) ?$_GET['phone'] : $_POST['phone'];
$service = ($_GET['service']) ?$_GET['service'] : $_POST['service'];
$location = ($_GET['location']) ?$_GET['location'] : $_POST['location'];
$mirror = ($_GET['mirror']) ?$_GET['mirror'] : $_POST['mirror'];
$leadfrom = ($_GET['leadfrom']) ?$_GET['leadfrom'] : $_POST['leadfrom'];

//flag to indicate which method it uses. If POST set it to 1
if ($_POST) $post=1;

//if the errors array is empty, send the mail
if (!$errors) {

//recipient
$to = 'Alex <clansey2004@yahoo.co.uk>'; 
//sender
$from = $firstname . ' <' . $email . '>';

//subject and the html message
$subject = 'Lead from ' . $firstname;   
$message = '
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
</Br>
<table>
    <tr><td>First Name</td><td>' . $firstname . '</td></tr>
    <tr><td>Lastname</td><td>' . $lastname . '</td></tr>
    <tr><td>Location</td><td>' . $location . '</td></tr>
    <tr><td>Email</td><td>' . $email . '</td></tr>
    <tr><td>Phone</td><td>' . $phone . '</td></tr>
    <tr><td>Service</td><td>' . $service . '</td></tr>
    <tr><td>Mirror</td><td>' . $mirror . '</td></tr>
    <tr><td>Lead From</td><td>' . $leadfrom . '</td></tr>
</table>
</body>
</html>';

//send the mail
$result = sendmail($to, $subject, $message, $from);

//if POST was used, display the message straight away
if ($_POST) {
    if ($result) echo 'Thank you! We have received your message.';
    else echo 'Sorry, unexpected error. Please try again later';

//else if GET was used, return the boolean value so that 
//ajax script can react accordingly
//1 means success, 0 means failed
} else {
    echo $result;   
}

//if the errors array has values
} else {
//display the errors message
for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
echo '<a href="form.php">Back</a>';
exit;
}


//Simple mail function with HTML header
function sendmail($to, $subject, $message, $from) {
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
$headers .= 'From: ' . $from . "\r\n";

$result = mail($to,$subject,$message,$headers);

if ($result) return 1;
else return 0;
}

?>

我确信我犯了一个愚蠢的错误 - 任何帮助将不胜感激！

谢谢

4

1 回答 1

1

我的猜测是您需要使用 encodeURIComponent() 对值进行 urlescape，尤其是那些内部带有斜线的值。

于 2012-06-05T12:03:26.510 回答