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>

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

Solution 2

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?

Comments

[user3318208]

How I can get the php unique id to pass in newvalue?

[user3318208]

The new value is the php code. How I can connect that?

[Scary Wombat]

Not sure if I am following you but the basic way is 1) click on an action b) Use jquery to listen to event 3) use jquery ajax to POST (or GET) data to serverside 4) serverside will return data 5) use data in success block to update HTML

[turing_machine]

@user3318208 See my answer.

[Scary Wombat]

If you want some php unique id put in the phone field then generate this value serrverside and return this value using the HTTP response.

[Farkhat Mikhalko]

@user2310289 no problem sir)))

[turing_machine]

So long as the result of the php snippet does not depend on anything that is specific to the server side, you could duplicate the php functionality client-side with javascript. See my answer.

[Scary Wombat]

@turing_machine I agree, either or. For the OP's benefit I would like to mention that this could be done in the ajax success block.

[turing_machine]

@user2310289 Agreed. It should be done in the success block. That is also mentioned in my answer :-)