Php 正确使用一个twitter引导模式表单来添加和更新信息

我正在使用bootstrap、jQuery、php和mySQL创建一个内容管理系统

我想知道我怎样才能使事情做得更好

现在，我有一个发票页面，上面有“添加服务…”按钮， 添加附件…'、“添加付款…”等

当用户单击按钮添加任何内容时，将显示引导模式窗体。Ajax与jQuery一起用于处理插入，然后发票表刷新，显示新的发票信息

如果用户单击发票表中的某个项目，则会显示相同的bootrap模式表单，并在表单中填充要查看的字段。“保存”按钮现在显示“更新”。如果信息发生更改，记录将自动更新到我的数据库中，发票表将刷新

我是如何做到这一点的：

发票表有一个脚本，用于查看是否单击了该项目。如果是这样，它会将“保存”按钮更新为“更新”。然后，当单击“更新”按钮时，invoice页面具有运行更新脚本的jQuery，然后将按钮更改回“保存”并重置表单

所有项目数据都存储在发票表单上隐藏的“data Anwhere”属性中。因此，当更新模态表单加载时，“data whatever”字段将逐个发送到模态表单的输入。我将其编码为将字段发送到相应的字段输入

我觉得这不太对

以下是invoice.php页面中包含的模式：

<!-- /.modal -->
<div class="modal fade" id="modal_form_invoice_payment" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title">Add/Update/View Payment...</h4>
        </div>
        <div class="modal-body">
             <!-- BEGIN FORM-->
                <form name="payment_form" id="payment_form" data-invid="<?php echo $invoice_id; ?>" method="POST" class="horizontal-form">
                    <div class="form-body">

                        <div class="alert alert-danger display-hide">
                            <button class="close" data-close="alert"></button>
                            You have some form errors. Please check below.
                        </div>
                        <div class="alert alert-success display-hide">
                            <button class="close" data-close="alert"></button>
                            Your form validation is successful!
                        </div>

                    <div class="row">

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label">Type</label>
                                    <select id="types_payments_id" name="types_payments_id" class="form-control">
                                    <option value="">Select One...</option>
                        <?php 
                    if($company->find_types_payments()) { 
                    $types_payments = $company->types_payments(); 
                    foreach ($types_payments as $types_payment_option) { 
                        echo '<option value="' .  $types_payment_option->id . '">' .  $types_payment_option->category . '</option>';
                         };
                    };
                ?>
                                 </select>
                                </div>
                            </div>

                            <div class="col-md-6">

                                <div class="form-group">
                                    <label class="control-label">Entered Date</label>
                                        <div class="input-icon right">
                                        <i class="fa"></i>
                                            <input type="text" id="entered_date" name="entered_date" class="datepicker form-control" value="">
                                        </div>
                            </div>
                        </div> 

                    </div>
                        <!--/row-->

                    <div class="row">      
                        <div class="col-md-6">
                            <div class="form-group">
                                    <label class="control-label">Amount Paid</label>
                                        <div class="input-icon right">
                                        <i class="fa"></i>
                                            <input type="text" id="amount_paid" name="amount_paid" class="currency_mask form-control" value="">
                                        </div>
                            </div>

                        </div>

                        <div class="col-md-6">

                            <div class="form-group">
                                    <label class="control-label">Note</label>
                                        <div class="input-icon right">
                                        <i class="fa"></i>
                                            <input type="text" id="note" name="note" class="form-control" value="">
                                        </div>
                            </div>

                        </div>

                    </div>
                        <!--/row-->



                    </div>
                    <input type="hidden" id="inv_payments_id" value="">
                    <input type="hidden" id="invoice_id" name="invoice_id" value="<?php echo $invoice_id; ?>">
                    <input type="hidden" id="contact_id" name="contact_id" value="<?php echo $contact->data()->id; ?>">
                    <input type="hidden" id="company_id" name="company_id" value="<?php echo $company->data()->id; ?>">
                    <div class="modal-footer form-actions right">
                        <button id="cancelPayment" type="button" class="btn default" data-dismiss="modal">Cancel</button>
                        <button id="submitPayment" type="submit" class="btn blue">Save</button>
                    </div>

                </form>
                <!-- END FORM-->
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

if($invoice->find_items_refunds()) { 

$db = $invoice->items_refunds();

 foreach($db AS $result) {

     echo '<tr>
            <td class="refund" data-inv_refunds_id="' . $result->id .'">
                 Refund
                 <br/><br/>
                 <div class="items_buttons" style="display:none">
                 <button type="button" data-deleteID="' . $result->id . '" data-table="invoice_refunds" class="edit_refund edit_button btn btn-xs default">
                 <i class="fa fa-pencil"></i>
                 </button>

                 <button type="button" data-deleteID="' . $result->id . '" data-table="invoice_refunds" class="delete_button btn btn-xs default">
                 <i class="icon-trash"></i>
                 </button>
                 </div>
            </td>
            <td>' . $result->description . '</td>
            <td id="refund_entered_date">' . $result->entered_date . '</td>
            <td>1</td>
            <td>

            </td>
            <td id="refund_amount_refunded">
                 $' . $result->amount_refunded . '
            </td>
            <td></td>
            <td id="types_payments_id" style="display:none">' . $result->types_payments_id . '</td>
            <td id="refund_note" style="display:none">' . $result->refund_note . '</td>
        </tr>';
 }

下面是处理表单验证的jQuery：

    //VALIDATE PAYMENT FORM
var form_payment = $('#payment_form');
var inv_id_payment = $('#payment_form').attr("data-invid");
var error_payment = $('.alert-danger', form_payment);
var success_payment = $('.alert-success', form_payment);

var validateAdjustment = $('#payment_form').validate({
    errorElement: 'span', //default input error message container
    errorClass: 'help-block help-block-error', // default input error message class
    focusInvalid: true, // do not focus the last invalid input
    ignore: "",  // validate all fields including form hidden input
    rules: {
        entered_date: {
            required: true
        },
        amount_paid: {
            required: true
        },
        types_payments_id: {
            required: true
        }
    },

    invalidHandler: function (event, validator) { //display error alert on form submit              
               success_payment.hide();
               error_payment.show();
               App.scrollTo(error_payment, -200);
    },

    errorPlacement: function (error, element) { // render error placement for each input type
                var icon = $(element).parent('.input-icon').children('i');
                icon.removeClass('fa-check').addClass("fa-warning");  
                icon.attr("data-original-title", error.text()).tooltip();
    },


    highlight: function (element) { // hightlight error inputs
                $(element)
                    .closest('.form-group').removeClass("has-success").addClass('has-error'); // set error class to the control group   
    },

    unhighlight: function (element) { // revert the change done by highlight

    },

    success: function (label, element) {
        var icon = $(element).parent('.input-icon').children('i');
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
        icon.removeClass("fa-warning").addClass("fa-check");
    },

    submitHandler: function(form_payment) {

        //remove blank inputs so they aren't passed into the db and are inserted as NULL
        var data = $("#payment_form").serialize();

        if($('#payment_form #submitPayment').text() == 'Save') { 
            //save
                    $.ajax({
                    url: "ajax_insert.php?table=invoice_payments",
                    type: form_payment.method,
                    dataType: 'json',
                    data: data,
                    success: function(response) {
                            //response here if data response
                        if (response) {

                            if(response.success) {
                                //reset form, hide it, and reload table and totals
                            $('#modal_form_invoice_payment').find('form')[0].reset();
                            error_payment.hide(); //if it's visible, hide it.
                            //remove checkmark from any field that was validation successfully and remove green outline from has-success validation
                            $('#modal_form_invoice_payment .fa').removeClass('fa-check');
                            $('#modal_form_invoice_payment .form-group').removeClass('has-success');
                            $('#modal_form_invoice_payment').modal('hide');
                            $('#invoice_table').load('content_invoice_table.php', { "inv_id": inv_id_payment});
                            $('#invoice_totals').load('content_invoice_totals.php', { "inv_id": inv_id_payment});
                            toastr.info('Payment entry recorded!');
                            } else { 
                             toastr.error('Error!');
                            }
                                }
                    }            
                });    


        } else {
            //get update id value from hidden field
            var inv_payments_id = $('#payment_form #inv_payments_id').val();

            //update
             $.ajax({
                    url: 'ajax_update.php?table=invoice_payments&id='+inv_payments_id,
                    type: form_payment.method,
                    dataType: 'json',
                    data: data,
                    success: function(response) {
                            //response here if data response
                        if (response) {

                            if(response.success) {
                                //reset form, hide it, and reload table and totals
                            $('#modal_form_invoice_payment').find('form')[0].reset();
                            error_payment.hide(); //if it's visible, hide it.
                            //remove checkmark from any field that was validation successfully and remove green outline from has-success validation
                            $('#modal_form_invoice_payment .fa').removeClass('fa-check');
                            $('#modal_form_invoice_payment .form-group').removeClass('has-success');
                            //restore form to Save mode
                            $('#modal_form_invoice_payment #submitPayment').html('Save');
                            $('#modal_form_invoice_payment').modal('hide');
                            $('#invoice_table').load('content_invoice_table.php', { "inv_id": inv_id_payment});
                            $('#invoice_totals').load('content_invoice_totals.php', { "inv_id": inv_id_payment});
                            toastr.info('Payment entry updated!');
                            } else { 
                             toastr.error('Error!');
                            }
                                }
                    }            
                });    


        };             

    }

 });   

---

你的javascript代码在哪里？我用javascript更新了这个问题。谢谢。我会走这条路线。。。使用

$（'exampleModal'）。on（'show.bs.modal'，function（event）{

事件将有助于简化您的代码我应该这样做吗？$（'modal#form_insurance_claim'）。on（'show.bs.modal'，function（e）{如果'UPDATE MODE'则从数据库获取所需数据，填写表单字段，将按钮表单“SAVE”更改为“更新”}）；你的javascript代码在哪里？我用javascript更新了这个问题。谢谢。我会按照这条路线……使用

$（'exampleModal'）。在（'show.bs.modal'，函数（event）{

事件将有助于简化你的代码我应该这样做吗？$（'modal#form_保险(索赔）'）。在（'show.bs.modal'，函数（e）{如果是“更新模式”，则从数据库获取所需数据，填写表单字段，将按钮表单“保存”更改为“更新”}）；

    //VALIDATE PAYMENT FORM
var form_payment = $('#payment_form');
var inv_id_payment = $('#payment_form').attr("data-invid");
var error_payment = $('.alert-danger', form_payment);
var success_payment = $('.alert-success', form_payment);

var validateAdjustment = $('#payment_form').validate({
    errorElement: 'span', //default input error message container
    errorClass: 'help-block help-block-error', // default input error message class
    focusInvalid: true, // do not focus the last invalid input
    ignore: "",  // validate all fields including form hidden input
    rules: {
        entered_date: {
            required: true
        },
        amount_paid: {
            required: true
        },
        types_payments_id: {
            required: true
        }
    },

    invalidHandler: function (event, validator) { //display error alert on form submit              
               success_payment.hide();
               error_payment.show();
               App.scrollTo(error_payment, -200);
    },

    errorPlacement: function (error, element) { // render error placement for each input type
                var icon = $(element).parent('.input-icon').children('i');
                icon.removeClass('fa-check').addClass("fa-warning");  
                icon.attr("data-original-title", error.text()).tooltip();
    },


    highlight: function (element) { // hightlight error inputs
                $(element)
                    .closest('.form-group').removeClass("has-success").addClass('has-error'); // set error class to the control group   
    },

    unhighlight: function (element) { // revert the change done by highlight

    },

    success: function (label, element) {
        var icon = $(element).parent('.input-icon').children('i');
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
        icon.removeClass("fa-warning").addClass("fa-check");
    },

    submitHandler: function(form_payment) {

        //remove blank inputs so they aren't passed into the db and are inserted as NULL
        var data = $("#payment_form").serialize();

        if($('#payment_form #submitPayment').text() == 'Save') { 
            //save
                    $.ajax({
                    url: "ajax_insert.php?table=invoice_payments",
                    type: form_payment.method,
                    dataType: 'json',
                    data: data,
                    success: function(response) {
                            //response here if data response
                        if (response) {

                            if(response.success) {
                                //reset form, hide it, and reload table and totals
                            $('#modal_form_invoice_payment').find('form')[0].reset();
                            error_payment.hide(); //if it's visible, hide it.
                            //remove checkmark from any field that was validation successfully and remove green outline from has-success validation
                            $('#modal_form_invoice_payment .fa').removeClass('fa-check');
                            $('#modal_form_invoice_payment .form-group').removeClass('has-success');
                            $('#modal_form_invoice_payment').modal('hide');
                            $('#invoice_table').load('content_invoice_table.php', { "inv_id": inv_id_payment});
                            $('#invoice_totals').load('content_invoice_totals.php', { "inv_id": inv_id_payment});
                            toastr.info('Payment entry recorded!');
                            } else { 
                             toastr.error('Error!');
                            }
                                }
                    }            
                });    


        } else {
            //get update id value from hidden field
            var inv_payments_id = $('#payment_form #inv_payments_id').val();

            //update
             $.ajax({
                    url: 'ajax_update.php?table=invoice_payments&id='+inv_payments_id,
                    type: form_payment.method,
                    dataType: 'json',
                    data: data,
                    success: function(response) {
                            //response here if data response
                        if (response) {

                            if(response.success) {
                                //reset form, hide it, and reload table and totals
                            $('#modal_form_invoice_payment').find('form')[0].reset();
                            error_payment.hide(); //if it's visible, hide it.
                            //remove checkmark from any field that was validation successfully and remove green outline from has-success validation
                            $('#modal_form_invoice_payment .fa').removeClass('fa-check');
                            $('#modal_form_invoice_payment .form-group').removeClass('has-success');
                            //restore form to Save mode
                            $('#modal_form_invoice_payment #submitPayment').html('Save');
                            $('#modal_form_invoice_payment').modal('hide');
                            $('#invoice_table').load('content_invoice_table.php', { "inv_id": inv_id_payment});
                            $('#invoice_totals').load('content_invoice_totals.php', { "inv_id": inv_id_payment});
                            toastr.info('Payment entry updated!');
                            } else { 
                             toastr.error('Error!');
                            }
                                }
                    }            
                });    


        };             

    }

 });