-1

作成したフォームを使用してPHPでデータを送信するのに問題があります。なんらかの理由で送信ボタンをクリックしても何も起こりません。

問題は、送信クリック領域のJquery.main、HTMLフォームの送信、または$_SERVER['PHP_SELF']の使用にあると思います。

私はlocalhost、apacheを使用して、自分のコンピューターを使用してテストしています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Create New Account</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.inputfocus-0.9.min.js"></script>
    <script type="text/javascript" src="js/jquery.main.js"></script>
</head>
<body>

<?php

/**
 * @author Emile Jobity
 * @copyright 2012
 * @abstract displays a form, inserts data from the form to the database
 * @example http://webexpedition18.com/articles/how-to-create-a-multi-step-signup-form-with-css3-and-jquery/
 */

if (isset($_POST['submit'])):

  $username = "root";
$password = "xxxx";

//connection to the database
try {
    $pdo = new PDO('mysql:host=localhost;dbname=cwalcott_ei2', $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    echo 'ERROR: ' . $e->getMessage();
}

  $username = $_POST['username'];
  $password = $_POST['password'];
  $firstname = $_POST['firstname'];
  $lastname = $_POST['lastname'];
  $email = $_POST['email'];
  $company = $_POST['company'];
  $phone = $_POST['phone'];
  $country = $_POST['country'];

 try{ 
  $stmt = $pdo->prepare('INSERT INTO user (username, password,firstname,lastname,email,company,phone,country,register_date) 
                            VALUES(:username,:password,:firstname,:lastname,:email,:company,:phone,:country,:register_date)');
  $stmt->execute(array(
    ':username' => $username,
    ':password' => $password,
    ':firstname' => $firstname,
    ':lastname' => $lastname,
    ':email' => $email,
    ':company' => $company,
    ':phone' => $phone,
    ':country' => $country,
    ':register_date' => NOW()
  ));
  # Affected Rows?
  echo $stmt->rowCount(); // 1
} catch(PDOException $e) {
  echo 'Error: ' . $e->getMessage();
}

?>

<p><a href="<?=$_SERVER['PHP_SELF']?>">Create an Account</a></p>

<?php
  else: // Allow the user to enter a new data
?>

<div id="container">
        <form action="<?=$_SERVER['PHP_SELF']?>" method="post">

            <!-- #first_step -->
            <div id="first_step">
                <h1>SIGN UP FOR A FREE <span>GOLDENICON</span> ACCOUNT</h1>

                <div class="form">
                    <input type="text" name="username" id="username" value="username" />
                    <label for="username">At least 4 characters. Uppercase letters, lowercase letters and numbers only.</label>

                    <input type="password" name="password" id="password" value="password" />
                    <label for="password">At least 4 characters. Use a mix of upper and lowercase for a strong password.</label>

                    <input type="password" name="cpassword" id="cpassword" value="password" />
                    <label for="cpassword">If your passwords aren’t equal, you won’t be able to continue with signup.</label>
                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
            </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->


            <!-- #second_step -->
            <div id="second_step">
                <h1>SIGN UP FOR A FREE <span>GOLDENICON</span> ACCOUNT</h1>

                <div class="form">
                    <input type="text" name="firstname" id="firstname" value="first name" />
                    <label for="firstname">Your First Name. </label>

                    <input type="text" name="lastname" id="lastname" value="last name" />
                    <label for="lastname">Your Last Name. </label>

                    <input type="text" name="email" id="email" value="email address" />
                    <label for="email">Your email address. We send important administration notices to this address. </label>       

                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_second" id="submit_second" value="" />
            </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->


            <!-- #third_step -->
            <div id="third_step">
                <h1>SIGN UP FOR A FREE <span>GOLDENICON</span> ACCOUNT</h1>

                <div class="form"> 
                    <input type="text" name="company" id="company" value="company" />
                    <label for="company">Your Comapny Name. </label>

                    <input type="text" name="phone" id="phone" value="phone" />
                    <label for="phone">Your Phone No.#. </label>

                    <select id="country" name="country">
                        <option>Trinidad and Tobago</option>
                        <option>United States</option>
                        <option>United Kingdom</option>
                        <option>Canada</option>   
                        <option>Caribbean</option>                     
                    </select>
                    <label for="country">Your country. </label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_third" id="submit_third" value="" />

            </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->


            <!-- #fourth_step -->
            <div id="fourth_step">
                <h1>SIGN UP FOR A FREE <span>GOLDENICON</span> ACCOUNT</h1>

                <div class="form">
                    <h2>Summary</h2>

                    <table>
                        <tr><td>Username</td><td></td></tr>
                        <tr><td>Password</td><td></td></tr>
                        <tr><td>Email</td><td></td></tr>
                        <tr><td>Name</td><td></td></tr>
                        <tr><td>Company</td><td></td></tr>
                        <tr><td>Phone</td><td></td></tr>
                        <tr><td>Country</td><td></td></tr>
                    </table>
                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="send submit" type="submit" name="submit" id="submit" value="" />            
            </div>

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

<?php endif; ?>
</body>
</html>

Jquery.main

$(function(){
    //original field values
    var field_values = {
            //id        :  value
            'username'  : 'username',
            'password'  : 'password',
            'cpassword' : 'password',
            'firstname'  : 'first name',
            'lastname'  : 'last name',
            'company' : 'company',
            'phone'  : 'phone',
            '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#company').inputfocus({ value: field_values['company'] });
    $('input#phone').inputfocus({ value: field_values['phone'] });
    $('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(),
            $('#company').val(),
            $('#phone').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').click(function(){
        //send information to server
        alert('Submitting Data press Ok');
    });
*/
});
4

3 に答える 3

0

まず、すべてのJavaScriptを取り除き、純粋なHTML+PHPソリューションとして機能するかどうかを試してください。繰り返し送信ボタンの代わりに、<a href="#">Next Step</a>ボタンの外観に合わせたのようなものを使用することをお勧めします。そうすれば、フォームへの入力が成功した後に送信ボタンが表示/有効化される最後のステップまで、フォームの送信について気にする必要はありません。

また、フォームウィザードには既存のソリューションを使用することをお勧めします。ほとんどの場合、実行およびテストされたものを使用する方が簡単です。これにより、開発のより重要な部分に集中できます。

于 2012-12-12T12:06:52.357 に答える
0

短い開始タグを使用しています

<form action="<?=$_SERVER['PHP_SELF']?>" method="post">

これは推奨されておらず、デフォルトではオフになります。

あなたのフォームがフォームのアクションの価値を得ていることを確認するため

これを変える

<form action="<?=$_SERVER['PHP_SELF']?>" method="post">

これに

<form action="<?php echo $_SERVER['PHP_SELF']?>" method="post">
于 2012-12-12T12:37:08.460 に答える
0

Jqueryメインでこれを使用して正しく動作しました

$('#submit').click(function(){
        //send information to server
        $('form').unbind('submit').submit();
    });
于 2012-12-16T02:12:04.740 に答える