Question

好的，这里的主要问题是如何只刷新字段id="phone"。插入记录并尝试添加新记录后，字段id="phone"不会刷新。我只需刷新字段id="phone"即可生成一个新代码，我将用它作为记录唯一ID。

如何仅刷新一个字段而不刷新整个页面以生成新的唯一代码？

感谢高级！

HTML

添加新记录打开modalbox中的表单

<input type="button" value="Add Record" id="add_new">

表格

<div class="entry-form">
    <form name="userinfo" id="userinfo"> 
    <table width="100%" border="0" cellpadding="4" cellspacing="0">
        <tr>
            <td colspan="2" align="right"><a href="#" id="close">Close</a></td>
        </tr>
        <tr>
            <td>First Name</td>
            <td><input type="text" name="fname"></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><input type="text" name="lname"></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="text" name="email"></td>
        </tr>
        <tr>
            <td>Phone Number</td>
            <td><input type="text" name="phone" id="phone" value="<?php echo $unique_id=strtotime('now')."".substr(str_shuffle("abcdefghijklmnopqrstuvwxyz"), 0, 5); ?>"></td>
        </tr>
        <tr>
            <td align="right"></td>
            <td><input type="button" value="Save" id="save"><input type="button" value="Cancel" id="cancel"></td>
        </tr>

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

脚本

<script>
$(document).ready(function(){

    $("#save").click(function(){
        ajax("save");
    });

    $("#add_new").click(function(){
        $(".entry-form").fadeIn("fast");    
    });

    $("#close").click(function(){
        $(".entry-form").fadeOut("fast");   
    });

    $("#cancel").click(function(){
        $(".entry-form").fadeOut("fast");   
    });

    $(".del").live("click",function(){
        if(confirm("Do you really want to delete this record ?")){
            ajax("delete",$(this).attr("id"));
        }
    });

    function ajax(action,id){
        if(action =="save")
            data = $("#userinfo").serialize()+"&action="+action;
        else if(action == "delete"){
            data = "action="+action+"&item_id="+id;
        }

        $.ajax({
            type: "POST", 
            url: "ajax.php", 
            data : data,
            dataType: "json",
            success: function(response){
                if(response.success == "1"){
                    if(action == "save"){
                        $(".entry-form").fadeOut("fast",function(){
                            $(".table-list").append("<tr><td>"+response.fname+"</td><td>"+response.lname+"</td><td>"+response.email+"</td><td>"+response.phone+"</td><td><a href='#' id='"+response.row_id+"' class='del'>Delete</a></a></td></tr>");   
                            $(".table-list tr:last").effect("highlight", {
                                color: '#4BADF5'
                            }, 1000);
                        }); 
                        $(".entry-form input[type='text']").each(function(){
                            $(this).val("");
                        });     
                    }else if(action == "delete"){
                        var row_id = response.item_id;
                        $("a[id='"+row_id+"']").closest("tr").effect("highlight", {
                            color: '#4BADF5'
                        }, 1000);
                        $("a[id='"+row_id+"']").closest("tr").fadeOut();
                    }
                }else{
                    alert("unexpected error occured, Please check your database connection");
                }
            },
            error: function(res){
                alert("Unexpected error! Try again.");
            }
        });
    }
});
</script>

Answer 1

当你说刷新输入时，我假设你想用ajax成功执行以下片段的结果替换它的值？

$unique_id=strtotime('now')."".substr(str_shuffle("abcdefghijklmnopqrstuvwxyz"), 0, 5);

您可以移动此逻辑客户端并在JavaScript中实现等效功能。然后简单地替换ajax成功回调中的输入值。

以下是在JavaScript中实现str_shuffle的示例：str_shuffle() equivalent in javascript?

Answer 2

成功回调

$("#phone").val (newValue);

其中newValue是您要显示的文字。

Answer 3

<script language='javascript"> 
    document.getElementById('phone').value='new value here'
</script>

使用jQuery

$("#phone").val("new value here");

Answer 4

你能试试吗，

在“ajax.php”中，添加$unique_id生成器代码，并返回phone唯一值。像

这样的东西

$unique_id=strtotime('now')."".substr(str_shuffle("abcdefghijklmnopqrstuvwxyz"), 0, 5);
echo json_encode(array("success"=>1, "phone"=>$unique_id));

在ajax脚本中

 success: function(response){
     if(response.success == "1"){

            if(action == "save"){
                    $(".entry-form").fadeOut("fast",function(){
                        $(".table-list").append("<tr><td>"+response.fname+"</td><td>"+response.lname+"</td><td>"+response.email+"</td><td>"+response.phone+"</td><td><a href='#' id='"+response.row_id+"' class='del'>Delete</a></a></td></tr>");   
                        $(".table-list tr:last").effect("highlight", {
                            color: '#4BADF5'
                        }, 1000);
                    }); 
                    $(".entry-form input[type='text']").each(function(){
                        $(this).val("");
                    });     

                    $("#phone").val(response.phone);//Here you can assign unique value again
                }
           ....

插入数据后刷新输入字段

4 个答案: