Question

我在使用我编写的表单在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');
    });
*/
});

Answer 1

首先，删除所有的javascript并尝试它是否作为纯HTML + PHP解决方案。而不是重复提交按钮，我建议使用像<a href="#">Next Step</a>这样的东西，用于按钮的外观。这样您就不必关心表单提交，直到最后一步，成功填写表格后将显示/启用提交按钮。

另外，我建议使用现有的表单向导解决方案。使用已经完成并经过测试的东西变得更加容易 - 让您专注于更重要的开发部分。

Answer 2

您使用的是短开标签

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

不推荐使用，默认情况下会关闭。

确保您的表单获得表单

的操作价值

更改此

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

到这个

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

Answer 3

我在Jquery主要

中使用它正常工作

$('#submit').click(function(){
        //send information to server
        $('form').unbind('submit').submit();
    });

如何使用表单以PHP格式发送数据？

3 个答案: