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>

score 1 · Answer 1 · edited May 23 '17 at 11:57

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?

score 0 · Answer 2 · edited Feb 27 '14 at 05:49

0

In your success callback

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

where newValue is the text you want to display.

edited Feb 27 '14 at 05:49

Farkhat Mikhalko

3,565
3
23
37

answered Feb 27 '14 at 05:42

Scary Wombat

44,617
6
35
64

How I can get the php unique id to pass in newvalue? – user3318208 Feb 27 '14 at 05:45
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 – Scary Wombat Feb 27 '14 at 05:49
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. – Scary Wombat Feb 27 '14 at 05:52
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. – turing_machine Feb 27 '14 at 05:54
@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. – Scary Wombat Feb 27 '14 at 06:00
@user2310289 Agreed. It should be done in the success block. That is also mentioned in my answer :-) – turing_machine Feb 27 '14 at 06:02

score 0 · Answer 3 · answered Feb 27 '14 at 05:43

0

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

With jQuery

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

answered Feb 27 '14 at 05:43

Farkhat Mikhalko

3,565
3
23
37

The new value is the php code. How I can connect that? – user3318208 Feb 27 '14 at 05:46

score 0 · Accepted Answer · answered Feb 27 '14 at 05:49

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

Refresh the input field after inserting data

4 Answers4