0

http://webexpedition18.com/download/signup_form_WebExpedition18/

嗨,大家好,

上面的多阶段联系表非常适合我自己的项目。它看起来很棒并且可以解决问题,但是当我试图获取通过电子邮件提交的信息时,我感到很困惑。

所以我有一个漂亮的表格,但它不会发送任何信息,所以对我来说毫无用处。即使我只是从教程站点上传未修改的演示文件,它仍然无法正常工作。

这是我的html:

<div id="container">
 <form action="contact.php" method="post">
    <div id="first_step">
        <div class="form">
            <label for="full-name">Full Name:</label> <input id="username"
            name="full-name" style="margin-bottom:10px;" type="text" value=
            ""> <label for="telephone">Telephone:</label> <input id=
            "username" name="telephone" style="margin-bottom:10px;" type=
            "text" value=""> <label for="email-address">Email
            Address:</label> <input id="username" name="email-address"
            style="margin-bottom:10px;" type="text" value="">
        </div>

        <div class="clear"></div><input class="submit" id="submit_first"
        name="submit_first" type="submit" value="Next">
    </div>

    <div class="clear"></div>

    <div id="second_step">
        <div class="form">
            <label for="company-name">Company Name (if you have
            one):</label> <input id="username" name="company-name" style=
            "margin-bottom:10px;" type="text" value=""> <label for=
            "existing-website">Existing Website (if you have one):</label>
            <input id="username" name="existing-website" style=
            "margin-bottom:10px;" type="text" value=""> <label for=
            "existing-domain">What domain would you like the new website to
            be on?</label> <input id="username" name="existing-domain"
            style="margin-bottom:10px;" type="text" value="">
        </div>

        <div class="clear"></div><input class="submit" id="submit_second"
        name="submit_second" type="submit" value="Next">
    </div>

    <div class="clear"></div>

    <div id="third_step">
        <div class="form">
            <label for="which-package">Which package would you
            like?:</label>

            <p><label><input id="RadioGroup1_0" name="RadioGroup1" type=
            "radio" value="Standard"> Standard</label> <label><input id=
            "RadioGroup1_1" name="RadioGroup1" type="radio" value=
            "Business"> Business</label> <label><input id="RadioGroup1_2"
            name="RadioGroup1" type="radio" value="Professional">
            Professional</label></p><label for="which-template">Which
            template would you like?:</label>

            <p><label><input id="RadioGroup2_0" name="RadioGroup2" type=
            "radio" value="1"> 1</label> <label><input id=
            "RadioGroup2_1" name="RadioGroup2" type="radio" value=
            "2"> 2</label> <label><input id="RadioGroup2_2"
            name="RadioGroup2" type="radio" value="3">
            3</label></p>

            <div class="clear"></div>
        </div>

        <div class="clear"></div><input class="submit" id="submit_third"
        name="submit_third" type="submit" value="Next">
    </div>

    <div class="clear"></div>

    <div id="fourth_step">
        <div class="form">
            <h2>All done ...</h2>

            <p style="margin-top:30px;">Press 'Submit' and we'll send you
            everything you need to get you up and running.</p>
        </div>

        <div class="clear"></div><input class="send submit" id=
        "submit_fourth" name="submit_fourth" type="submit" value="Submit">
    </div>
</form>
</div>
</div>

提交按钮只是没有做任何事情。我在我的contact.php 文件中尝试了许多不同的php 表单处理程序代码,但我仍然一无所获。

非常感谢任何帮助。经过6个小时的尝试,我现在变得非常绝望。

谢谢你。

demo自带的JS文件是:

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


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




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

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

    //ckeck if inputs aren't empty
    var fields = $('#first_step input[type=text], #first_step input[type=password]');
    var error = 0;
    fields.each(function(){
        var value = $(this).val();
        if( value.length<4 || value==field_values[$(this).attr('id')] ) {
            $(this).addClass('error');
            $(this).effect("shake", { times:3 }, 50);

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

    if(!error) {
        if( $('#password').val() != $('#cpassword').val() ) {
                $('#first_step input[type=password]').each(function(){
                    $(this).removeClass('valid').addClass('error');
                    $(this).effect("shake", { times:3 }, 50);
                });

                return false;
        } else {   
            //update progress bar
            $('#progress_text').html('33% Complete');
            $('#progress').css('width','113px');

            //slide steps
            $('#first_step').slideUp();
            $('#second_step').slideDown();     
        }               
    } else 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(
        $('#username').val(),
        $('#password').val(),
        $('#email').val(),
        $('#firstname').val() + ' ' + $('#lastname').val(),
        $('#age').val(),
        $('#gender').val(),
        $('#country').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(){
    //send information to server
    alert('Sent. Thank you!');
});

});

我的contact.php文件中使用的php是:

<?php 
$errors = '';
$myemail = 'yourname@website.com';//<-----Put Your email address here.
if(empty($_POST['name'])  || 
empty($_POST['email']) || 
empty($_POST['message']))
{
$errors .= "\n Error: all fields are required";
}

$name = $_POST['name']; 
$email_address = $_POST['email']; 
$message = $_POST['message']; 

if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", 
$email_address))
{
$errors .= "\n Error: Invalid email address";
}

if( empty($errors))
{
$to = $myemail; 
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n Email: $email_address \n Message \n $message"; 

$headers = "From: $myemail\n"; 
$headers .= "Reply-To: $email_address";

mail($to,$email_subject,$email_body,$headers);
//redirect to the 'thank you' page
header('Location: contact-form-thank-you.html');
} 
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

" http://www.w3.org/TR/html4/loose.dtd ">

<html>
<head>
<title>Contact form handler</title>
</head>

<body>
<!-- This page is displayed only if there is some error -->
<?php
    echo nl2br($errors);
    ?>
</body>
</html>
4

1 回答 1

0

$('form').submit(function(){ return false; });告诉提交应该返回 false

于 2013-04-05T22:17:57.323 回答