Search code examples
phpajaxformsajaxform

using one form for add and edit using php and ajax


I have created a form using ajax and php. From the main page the user can either edit the clients details, or add a new client. When the user clicks on the edit client button, the form is loaded using ajax, and the client details are inserted by using the id, and for adding a new client, no id is sent. What I want to know is, how do I alter the 'submit' button, for the add client, and an 'update' button for editing the client. The form markup is the same for both stages, but here is the jquery used to differentiate between the two:

Add:

$.ajax({
    dataType: "html",
    url: "ajax.php?action=client_form",
    beforeSend: function() {
        $('.error, .success, .notice').remove();
    },
    success: function(html) {
        $('#users-contain_t').html(html);
    }
});

and for the edit part I have created a function, like so:

function editClient(client_id){

    $('#users-contain_t').load('ajax.php?action=client_form&client_id='+client_id);

};

The markup for the edit button is:

<button class="editClient" type="button" onclick="editClient('.$client['client_id']. ')">Edit Client</button>

This brings up the details in the form. What I want to know, is how to load two different buttons on the same form, when editing, and when adding a new record, using php?

The markup for the two buttons would be something like:

<button id="updateList" type="button" >Update</button>
<button id="addClient" type="button" >Submit</button>

Solution

  • you can set default style of display in form is none like style="display:none" for update list

    but when you are calling editClient function you can add show() hide() effect to both button

    like

    $('#updateList').show();
    $('#addClient').hide();
    

    default for form like this

    <button id="updateList" type="button" style="display:none;" >Update</button>
    <button id="addClient" type="button" >Submit</button>