如何提交jQuery步骤表单

时间:2017-07-20 00:24:11

标签: php jquery html forms

希望一切顺利。我真的非常需要帮助提交jQuery步骤向导表单。我确实得到了一个插件来帮助它,但它在jQuery中完成了大部分功能,而不是html。

目前我有: - 创建了数据库和必要的表 - 使用jquery步骤创建html表单 - 将表单连接到数据库 - 将数据库连接到html表以供显示

这是我的HTML代码:

                <div class="modal fade" id="pat_add_modal" tabindex="-1" role="dialog" aria-labelledby="add_patient_label">
                    <div class="modal-dialog modal-lg" role="document">
                         <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="add_patient_label">Add New Patient</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            </div>
                            <div class="modal-body">
                                <!-- PHP Form Processor -->                                    
                                <?php
                                    include 'db.php';
                                    if(isset($_POST['submit'])){
                                        $pat_sname = $_POST['pat_sname'];
                                        $pat_fname = $_POST['pat_fname'];                                            
                                        $pat_gender = $_POST['pat_gender'];
                                        $pat_dob = $_POST['pat_dob'];
                                        $pat_phone = $_POST['pat_phone'];
                                        $pat_email = $_POST['pat_email'];
                                        $insurance_companies = $_POST['insurance_companies'];
                                        $card_no = $_POST['card_no'];
                                        $pat_allergies = $_POST['pat_allergies'];
                                        $pat_history = $_POST['pat_history'];
                                        $pat_address = $_POST['pat_address'];
                                        $nok_name = $_POST['nok_name'];
                                        $nok_phone = $_POST['nok_phone'];
                                        $nok_email = $_POST['nok_email'];
                                        $pat_dependants = $_POST['pat_dependants'];
                                        $pat_work = $_POST['pat_work'];
                                        $pat_work_address = $_POST['pat_work_address'];
                                        $work_phone = $_POST['work_phone'];
                                        $work_email = $_POST['work_email'];
                                        $ins_sql = "INSERT INTO patients (surname, first_name, gender, dateofbirth, phone, email, insurance_co, insurance_card_no, allergies, medical_history, full_address, nok_name, nok_phone, nok_email, dependants, palce_of_work, work_full_address, work_phone, work_email) VALUES ('$pat_sname', '$pat_fname', '$pat_gender', '$pat_dob', '$pat_phone', '$pat_email', '$insurance_companies', '$card_no', '$pat_allergies', '$pat_history', '$pat_address', '$nok_name', '$nok_phone', '$nok_email', '$pat_dependants', '$pat_work', '$pat_work_address', '$work_phone', '$work_email')";
                                        $run_sql = mysqli_query($conn, $ins_sql);                                            
                                        echo "insertion success";
                                    }else{
                                        echo "insertion failed";
                                    }
                                ?>
                                <div class="card-block wizard-content">
                                    <form class="tab-wizard wizard-circle form-horizontal floating-labels" role="form" name"this" id"this" action="patients.php" method="post">
                                        <!-- Step 1 -->
                                        <h6><strong>Personal Info</strong></h6>
                                        <section>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <input type="text" class="form-control" name="pat_sname" id="pat_sname" required><span class="bar"></span><label for="pat_sname">Surname :</label>                                                    
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <input type="text" class="form-control" name="pat_fname" id="pat_fname" required><span class="bar"></span><label for="pat_fname">First Name :</label>                                                    
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <select class="form-control p-0" name="pat_gender" id="pat_gender" required>
                                                            <option value=""></option>
                                                            <option value="M">Male</option>
                                                            <option value="F">Female</option>
                                                            </select><span class="bar"></span>
                                                        <label for="pat_gender">Gender :</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <input type="date" class="form-control" name="pat_dob" id="pat_dob" required><span class="bar"></span><label for="pat_dob">D.O.B :</label>                                                    
                                                    </div>
                                                </div>   
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <input type="tel" class="form-control" name="pat_phone" id="pat_phone" required><span class="bar"></span><label for="pat_phone">Phone :</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <input type="email" class="form-control" name="pat_email" id="pat_email" required><span class="bar"></span><label for="pat_email">Email :</label>                                                    
                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                        <!-- Step 2 -->
                                        <h6><strong>Health Info</strong></h6>
                                        <section>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <select class="form-control p-0" name="insurance_companies" id="insurance_companies" required>
                                                            <option value=""></option>
                                                            <option value="AAR">AAR</option>
                                                            <option value="AIG">AIG</option>
                                                            <option value="Britam">Britam</option>
                                                            <option value="IAA">IAA</option>
                                                            <option value="ICEA">ICEA</option>
                                                            <option value="Goldstar">Goldstar</option>
                                                            <option value="Liberty">Liberty</option>
                                                            <option value="NIC">NIC</option>
                                                            <option value="Sanlam">Sanlam</option>
                                                            <option value="SWICO">SWICO</option>
                                                            <option value="UAP">UAP</option>
                                                        </select><span class="bar"></span>
                                                        <label for="insurance_companies">Insurance Co.</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <input type="text" class="form-control" name="card_no" id="card_no" required><span class="bar"></span><label for="card_no">Insurance Card No.</label>                                                    
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group m-t-20">
                                                        <textarea class="form-control" rows="1" id="pat_allergies" required></textarea>
                                                        <span class="bar"></span>
                                                        <label for="pat_allergies">Allergies :</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group m-t-20">
                                                        <textarea class="form-control" rows="1" id="pat_history" required></textarea>
                                                        <span class="bar"></span>
                                                        <label for="pat_history">Medical History :</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                        <!-- Step 3 -->
                                        <h6><strong>Home Info</strong></h6>
                                        <section>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <input type="text" class="form-control" name="pat_address" id="pat_address" required><span class="bar"></span><label for="pat_address">Full Address :</label>                                                    
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <input type="text" class="form-control" name="nok_name" id="nok_name" required><span class="bar"></span><label for="nok_name">Next of Kin :</label>                                                    
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <input type="tel" class="form-control" name="nok_phone" id="nok_phone" required><span class="bar"></span><label for="nok_phone">Phone :</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <input type="email" class="form-control" name="nok_email" id="nok_email" required><span class="bar"></span><label for="nok_email">Email :</label>                                                    
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group m-t-20">
                                                        <textarea class="form-control" rows="1" id="pat_dependants" required></textarea>
                                                        <span class="bar"></span>
                                                        <label for="pat_dependants">Dependants :</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                        <!-- Step 4 -->
                                        <h6><strong>Work Info</strong></h6>
                                        <section>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <input type="text" class="form-control" name="pat_work" id="pat_work" required><span class="bar"></span><label for="pat_work">Place of Work :</label>                                                    
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <input type="text" class="form-control" name="pat_work_address" id="pat_work_address" required><span class="bar"></span><label for="pat_work_address">Full Address :</label>                                                    
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <input type="tel" class="form-control" name="work_phone" id="work_phone" required><span class="bar"></span><label for="work_phone">Phone :</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group m-t-20">
                                                        <input type="email" class="form-control" name="work_email" id="work_email" required><span class="bar"></span><label for="work_email">Email :</label>                                                    
                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

这个我的脚本:

$(".tab-wizard").steps({
    headerTag: "h6"
    , bodyTag: "section"
    , transitionEffect: "fade"
    , titleTemplate: '<span class="step">#index#</span> #title#'
    , labels: {
        finish: 'Finish'

    },
    onFinished: function (event, currentIndex) {
    swal({
                type: "success",
                title: "Good Job!",
                text: "You have successfully added a new patient.",
            });
    var form = $(this);
        form.submit();                
    },        
});

下面是我的html表:

                <div class="row">
                <div class="col-12">
                    <div class="card">                            
                        <div class="card-block">
                            <div class="table-responsive">
                                <!--<div class="col-md-12 align-self-center">
                                    <button class="btn pull-right hidden-sm-down btn-danger m-l-5" id="deletebutton" type="button" data-toggle="modal" data-target="#adddoctormodal" data-original-title="View" data-whatever="@mdo"><i class="mdi mdi-delete"></i></button></a>
                                    <button class="btn pull-right hidden-sm-down btn-info m-l-5" type="button" data-toggle="modal" data-target="#adddoctormodal" data-original-title="View" data-whatever="@mdo"><i class="mdi mdi-pen"></i></button></a>
                                    <button class="btn pull-right hidden-sm-down btn-warning m-l-5" type="button" data-toggle="modal" data-target="#doc_view_modal" data-original-title="View" data-whatever="@mdo"><i class="mdi mdi-information-outline"></i></button></a>
                                    <button class="btn pull-right hidden-sm-down btn-primary m-l-5" type="button" data-toggle="modal" data-target="#adddoctormodal" data-original-title="View" data-whatever="@mdo"><i class="mdi mdi-cash-multiple"></i></button></a>
                                    <button class="btn pull-right hidden-sm-down btn-success m-l-20" type="button" data-toggle="modal" data-target="#adddoctormodal" data-original-title="View" data-whatever="@mdo"><i class="mdi mdi-calendar-plus"></i></button></a>
                                </div> -->                                   
                                <table id="patientstable" class="display nowrap table table-hover table-striped table-bordered m-t-20" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>                                                
                                            <th class="text-center">ID</th>
                                            <th>Surname</th>
                                            <th>First Name</th>
                                            <th class="text-center">D.O.B</th>
                                            <th class="text-center" >Gender</th>
                                            <th class="text-center">Phone</th>                                                
                                            <th style="width: 100px;"></th>                                                
                                        </tr>
                                    </thead>                                        
                                    <tbody>
                                        <?php                                            
                                            $sql = "SELECT * FROM patients";
                                            $run_sql = mysqli_query($conn,$sql);
                                                while ($rows = mysqli_fetch_array($run_sql)){
                                                    echo '
                                                    <tr>                                                            
                                                        <td class="text-center">'.$rows['id'].'</td>
                                                        <td>'.$rows['first_name'].'</td>
                                                        <td>'.$rows['surname'].'</td>                                                            
                                                        <td class="text-center">'.$rows['dateofbirth'].'</td>
                                                        <td class="text-center">'.$rows['gender'].'</td>
                                                        <td class="text-center">'.$rows['phone'].'</td>                                                            
                                                        <td id="actionicons">                                                        
                                                            <a href="user_id='.$rows['id'].'" data-toggle="modal" data-target="#pat_view_modal"> <i class="mdi mdi-information-outline text-warning"></i>
                                                            <a href="#" data-toggle="tooltip" data-original-title="Edit" <i class="mdi mdi-pen text-info"></i></a> 
                                                            <a href="#" data-toggle="tooltip" data-original-title="Delete"> <i class="mdi mdi-delete text-danger"></i>                                                                                                           
                                                        </td>
                                                    </tr>        
                                            ';}
                                        ?>                                            
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>                        
                </div>
            </div>  

我被困在现在必须提交表单但我无法通知我因为我无法使用姓名或ID来提交/引用结束提交,因为我无法分配表单。

请帮忙。感谢。

Brian Dx。

1 个答案:

答案 0 :(得分:0)

在您的patients.php中,您可以使用:

if ( $_SERVER['REQUEST_METHOD'] == 'POST' )

而不是:

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

因为你不能在jquery步骤中提交提交名称。