editing input fields together instead of separately

Question

Current Scenario :

Right now I have a form in which you can edit and save each records of input fields. i.e. firstName, lastName, email etc.. I do not get any errors and everything is working fine.

Requirement :

Now what I want to save & edit firstName and lastName input fields together instead is to edit and save firstName and lastName input field separately. Right now they are all different input id's.

Question :

How can I achieve this by calling the same class for firstName and lastName if I want to edit them at the same time with a button ?

Is this a way to do it ? Thanks...

Code :

$("#inputFirstName,#inputLastName,#inputEmailAddress,#inputPassword,#inputZipCode").on('keypress',function(e){
        if(e.which == 13) {
            var field = $(this).attr("id");
            var data = {};
            data['ajax']=true;
            data[$('#'+field).attr('name')]=$('#'+field).val();
            $.ajax({
                    method: "POST",
                    url: this.form.action,
                    data: data
                })
            .done(function( msg ) {
                if(msg['status']=='fail'){
                    $('#errormsg span').html(msg['msg']);
                    $('#errormsg').show();
                }
                if($('#'+field).attr('name')=='game_user_profile[userinfo][firstName]')  {
                    $('#userfirstname').text($('#'+field).val());
                }
                if($('#'+field).attr('name')=='game_user_profile[userinfo][lastName]')  {
                    $('#userlastname').text($('#'+field).val());
                }
            });
            $('#'+field+'-edit').show();
            $('#'+field+'-save').hide()
            $('#'+field).attr('disabled',true);
        }
    });

Answer 1

first of all. save on every keypress is bad and will exhaust your server. I recommennd you use onChange or make a submit button

submit button is a better solution.

lets assume that we have this html:

<form id="updateForm">
    <input type="text" id="firstN" name="firstName" data-val="Ris" value="Ris">
    .
    .
    .
    <input type="button" value="submit" id="goBtn">
</form>

first set a data-val equal to the value then in your javascript

$("#goBtn").click(function(){

    var data = {};
    data["ajax"] = true;
    $("#updateForm input").each(function(){
        var $this = $(this);
        var type = $this.attr('type');
        if(type != "button" && $this.val() != $this.attr("data-val"))
            data[$this.attr("name")] = $this.val();
    });

    if(data.length > 0){
             $.ajax({
                    method: "POST",
                    url: this.form.action,
                    data: data
                })
            .done(function( msg ) {
                if(msg['status']=='fail'){
                    $('#errormsg span').html(msg['msg']);
                    $('#errormsg').show();
                } else {
                    $.each(data, function(index, value){
                        $('updateForm input[name="'+index+'"]').attr("data-val", value);
                    });
                }
                // then do things
            });
    }

});

first it checks every input for changes (data-val is holding the original value) and it adds it to data if there is any changes at all it calls the ajax and if it was successful it updates the data-vals of each changed value else it leave it for another submission