Refresh the input field after inserting data

Question

Okay the main problem here is how to refresh only the field id="phone". After I insert a records and tried to add new records the field id="phone" is not refreshing. I need to refresh only the field id="phone" to generate a new code which I'm going to use for my record unique id.

How to refresh only the one field without refreshing the whole page to generate new unique code?

Thanks in Advanced!

Html

Add new record open the form in modalbox

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

Form

<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

<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

Can you try this,

in "ajax.php", add $unique_id generator code, and return phone unique value. some thing like

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

in ajax script

 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
                }
           ....

Answer 2

In your success callback

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

where newValue is the text you want to display.

Answer 3

When you say refresh the input, I assume you want to replace it's value with the result of executing the following snippet on ajax success?

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

You could move this logic client-side and implement equivalent functionality in JavaScript. Then simply replace the value of the input inside of the ajax success callback.

Here is an example of implementing str_shuffle in JavaScript: str_shuffle() equivalent in javascript?

Answer 4

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

With jQuery

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