1

我的页面中有 3 个按钮。它们是新按钮、删除和编辑。如果我单击新按钮将显示一个 add_new 表单,如果我单击以更改 edit_form 将出现。

我的问题是为什么在我的 edit_form 中单击提交或单击删除按钮删除数据后 new_form 没有出现。

我的代码是这样的

        <div  id="list_address">
        <table>
            <tr valign="top">
                <th>Name</th>
                <th>Address</th>
                <th>Action</th>
            </tr>
            <tr valign="top">
                    <td>Name 1</td>
                    <td>Adress 1</td>
                    <td>
                        <span><a href="#" onclick="javascript:show_editform(<?php echo $id_address;?>);">
                        Edit|</a></span><span><a href="#" 
                        onclick="javascript:deleteAddress(<?php echo $id_address;?>);">Delete</a></span>
                    </td>
            </tr>
            <tr>
                <td colspan="3"><span>
                    <button id="btn_add">Add New</button></span>
                </td>
            </tr>
        </table>
        <div>

        <div id="boxform">
             <div id="edit" style="display:none">
                    <form id="fm_edit" class="fm_address">
                        <input type="hidden"  value="1" name="submitted" id="submitted"/>
                        <input type="hidden"  id="id_address" name="id_address"/>
                        <fieldset>
                            <h3>Edit</h3>
                            <p>
                                <label>Address</label>
                                <input type="text" name="address1" id="address1" >
                                <sup>*</sup>
                            </p>
                            <p>
                                <label>Address (2)</label>
                                <input type="text" name="address2" id="address2" >
                            </p>
                            <p><input type="submit" value="Save"/></p>
                        </fieldset>
                    </form>
                </div>
            </div>
             <div id="add" style="display:none">
                    <form id="fm_add" class="fm_address">
                        <input type="hidden"  value="2" name="submitted" id="submitted"/>
                        <fieldset>
                            <h3>Edit</h3>
                            <p>
                                <label>Address</label>
                                <input type="text" name="address1" id="address1" >
                                <sup>*</sup>
                            </p>
                            <p>
                                <label>Address (2)</label>
                                <input type="text" name="address2" id="address2" >
                                <sup>*</sup>
                            </p>
                            <p><input type="submit" value="Save"/></p>
                        </fieldset>

                    </form>
                </div>
            </div>
        </div>

        <script>
        function getAddress(){
            $.ajax({
                type: "POST",
                url: "getAddress.php",
                success: function(response){
                $("#list_address").html(response);              
                }
            }); 
        }

        function clear_form() {
            $(".fm_address").find(':input').each(function() {
                switch(this.type) {
                    case 'password':
                    case 'select-multiple':
                    case 'select-one':
                    case 'text':
                    case 'textarea':
                    $(this).val('');
                    break;
                    case 'checkbox':
                    case 'radio':
                        this.checked = false;
                    }
            });
        }

        function show_editform(id){
            $("#add").hide();
            $("#edit").show();
            $("#id_address").val(id);
        }

        function show_insertform(){
            $("#edit").hide();
            $("#add").show();
        }

        $(document).ready(function() {  
            $("#btn_add").bind('click',function(){
                clear_form();
                show_insertform();
            });

        $("form#fm_edit").submit(function() {   
            var data = $("form#fm_edit").serialize();
                $.ajax({
                    type: "POST",
                    url: "address.php",
                    data: data,
                    success: function(response){
                        alert(response);
                        getAddress();
                    }   
                });
        return false;
        }); 

        $("form#fm_add").submit(function() {    
            var data = $("form#fm_add").serialize();
            alert(data);
            $.ajax({
                type: "POST",
                url: "address.php",
                data: data,
                success: function(response){
                    alert(response);
                    getAddress();
                }   
            });
        return false;
        }); 
    }); 

    </script>

请帮助我..谢谢。

4

1 回答 1

0

在尝试之后,您可以在getAddress.phpaddress.php等两个 ajax 页面中添加以下脚本。我相信它会起作用的。

您还有一件事要写list_address div。在 ajax 响应后,所有list_address div 数据都替换为 ajax 响应数据。

$("#list_address").html(响应);

 <script>
        function getAddress(){
            $.ajax({
                type: "POST",
                url: "getAddress.php",
                success: function(response){
                $("#list_address").html(response);              
                }
            }); 
        }

        function clear_form() {
            $(".fm_address").find(':input').each(function() {
                switch(this.type) {
                    case 'password':
                    case 'select-multiple':
                    case 'select-one':
                    case 'text':
                    case 'textarea':
                    $(this).val('');
                    break;
                    case 'checkbox':
                    case 'radio':
                        this.checked = false;
                    }
            });
        }

        function show_editform(id){
            $("#add").hide();
            $("#edit").show();
            $("#id_address").val(id);
        }

        function show_insertform(){
            $("#edit").hide();
            $("#add").show();
        }

        $(document).ready(function() {  
            $("#btn_add").bind('click',function(){
                clear_form();
                show_insertform();
            });

        $("form#fm_edit").submit(function() {   
            var data = $("form#fm_edit").serialize();
                $.ajax({
                    type: "POST",
                    url: "address.php",
                    data: data,
                    success: function(response){
                        alert(response);
                        getAddress();
                    }   
                });
        return false;
        }); 

        $("form#fm_add").submit(function() {    
            var data = $("form#fm_add").serialize();
            alert(data);
            $.ajax({
                type: "POST",
                url: "address.php",
                data: data,
                success: function(response){
                    alert(response);
                    getAddress();
                }   
            });
        return false;
        }); 
    }); 

    </script>
于 2012-09-09T08:56:12.713 回答