Hi. so i have this div like so:

d69e97a4413c033f6390ecaea54c6c8d

see the "Add Spouse" link, when clicked will display another div:

99b4077223bdea75c7de5b15af9b634b

the edit spouse works by submitting the data wihtout refresh using $.post:

$(document).ready(function(){  
    $("#submitSp").live("click", function()
    {
        var id = $("#contactid").val();
        var ssalut = $("#spouse-salute").val();
        var sfname = $("#spouse-fname").val();
        var smname = $("#spouse-mname").val();
        var slname = $("#spouse-lname").val();
        var sdob = $("#spouse-dob").val();
        var shouseadd = $("#spouse-hadd").val();
        var sofficeadd = $("#spouse-oadd").val();
        var spersonalno = $("#spouse-pno").val();
        var shouseno = $("#spouse-hno").val();
        var sfaxno = $("#spouse-fno").val();
        var sofficeno = $("#spouse-offno").val();
        var spano = $("#spouse-pano").val();
        var spaname = $("#spouse-sec").val();
        var semailpa = $("#spouse-epa").val();
        var semailwork = $("#spouse-ework").val();
        var spersonalemail = $("#spouse-pemail").val();
        var session = $("#usersession").val();

        if(id=='' || ssalut==''|| sfname=='' || smname=='' || slname=='' || sdob=='' || shouseadd=='' || sofficeadd=='' || spersonalno=='' || shouseno=='' || sfaxno=='' || sofficeno=='' || spano=='' || spaname=='' || semailpa=='' || semailwork=='' || spersonalemail=='' || session =='')
        {
            alert("Insertion Failed, Some Fields are Blank!");      
        }
        else
        {
            // Returns successful data submission message when the entered information is stored in database.
            $.post("AddSpouseDetails.php",
            { 
                ids: id,
                ssaluts: ssalut,
                sfnames: sfname,
                smnames: smname,
                slnames: slname,
                sdobs: sdob,
                shouseadds: shouseadd,
                sofficeadds: sofficeadd,
                spersonalnos: spersonalno,
                shousenos: shouseno,
                sfaxnos: sfaxno,
                sofficenos: sofficeno,
                spanos: spano,
                spanames: spaname,
                semailpas: semailpa,
                semailworks: semailwork,
                spersonalemails: spersonalemail,
                sessions: session 
            },
            function(data) {
                alert("Spouse added!");
                $("#addspouseD").hide();
                $("#editD").show();
            });
        }
    });
});

so as u can c when data is submitted successfully an alert will appear and the "Edit Spouse" div will be hidden and "Edit Contact" div will be shown. Now, when the the data from edit spouse is saved i want the name of the spouse to be displayed replacing the "Add Spouse" like this:

f5f36da44150e6b0c51a542bd7a5b0ae

but because the submission is done without refresh the page needs to be refreshed manually to c the spouse's name displayed. so my question is how do i update the spouse's name without refreshing the page with the code that i already have? TIA

let me know if i need to elaborate more though i hope with the images its pretty much explained.

you can do this with jquery.ajax Ajax Docs

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $('#button').on('click', function(e){
                e.preventDefault();
                $.ajax({
                    url: 'path/to/script.php',
                    type: 'POST',
                    //Change the data below to match the data you want to send or
                    //You can send a serialized form
                    data: {user_id: $_SESSION['user_id'], liked: true, url_slug: $(location).attr('href')},
                    cache: false,
                    success: function(data){
                        alert(data);
                    }
                });
            });
        });
    </script>

you can send a serilized form object as well : $('form').serialize();

Serialize Docs

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.