Performing an auto complete look-up and building a form

Question

I have written a jQuery function that is doing an auto complete look-up and then building the form for me.

This is working fine but I want to reuse the code so I can have the form rebuild after submitting the data to see the results. Here is the basic html and jquery script below. Right now the form is doing the look-up and adding my submit and edit buttons along with the other form elements.

HTML

<div id="topmain">
   <div>
      <span>USER ADMINISTRATION</span>
   </div>
   </div>
   <br />
   <div id="mainuserdiv">
      <label for="employeename">Employee:</label><input type="text" id="employeename" name="employeename"/>
      <br />
      <form method="get">
         <div id="hiddenstuff"></div>
         <br />
         <div id="buttondiv"></div>
         <br />
         <div id="formcontent"></div>
      </form>
</div>

jQuery

$(function(){
     var ans ={
            source:"../json/getpersonjson.php",
            select: function(e,u){
                $("#hiddenstuff").empty();
                $("#formcontent").empty();
                $("#buttondiv").empty();
                $("#buttondiv").append(
                    $('<input>').attr({
                    type: 'submit',
                    id:    'updateuserbutton',
                    name: 'updateuserbutton',
                    value: "Save"
                }).addClass("button rmargin5")
                ).append(
                     $('<input>').attr({
                        type: 'button',
                        id:    'edituserbutton',
                        name: 'edituserbutton',
                        value: "Edit"
                    }).addClass("button")    
                );
                $("#hiddenstuff").append(
                    $('<input>').attr({
                    type: 'hidden',
                    id: 'Mchnum',
                    name: 'Mchnum',
                    value: u.item.Mchnum
                })
                );
                $("#formcontent").addClass("incident").append(
                    $('<div>').append(
                         $('<label>').attr({
                            for: 'username'
                         }).text("User name:")
                         ).append(
                            $('<input>').attr({
                            type: 'text',
                            id: 'username',
                            name: 'username',
                            value: u.item.username
                            }).addClass("rmargin10")
                         ).append(
                            $('<label>').attr({
                                for: 'syadmin'
                            }).text("System Administrator")
                         ).append(
                            $('<input>').attr({
                                type: 'checkbox',
                                value: "1",
                                id: 'syadmin',
                                name: 'syadmin'
                            }).addClass("rmargin10")
                         ).append(
                            $('<label>').attr({
                                for: 'Activeuser'
                            }).text("Active User")
                         ).append(
                            $('<input>').attr({
                                type: 'checkbox',
                                id: 'Activeuser',
                                name: 'Activeuser',
                                value: "1" 
                            }).addClass("rmargin10")
                         ).append(
                             $('<label>').attr({
                                for: 'changepass'
                            }).text("Change Password").addClass("rmargin3")  
                         ).append(
                            $('<input>').attr({
                                type: 'checkbox',
                                id: 'changepass',
                                name: 'changepass',
                                value: "1" 
                            })   
                         )    
                )
                if(u.item.syadmin=="1"){$("#syadmin").prop('checked', true)};
                if(u.item.Activeuser=="1"){$("#Activeuser").prop('checked', true)};
                if(u.item.changepass=="1"){$("#changepass").prop('checked', true)};                  
                $("#formcontent *").attr('disabled',true);
                $("#edituserbutton").click(function(){
                    $("#formcontent *").removeAttr('disabled'); 
                });


            },
            minLength:1
        };
        $("#employeename").autocomplete(ans);

}

How do I separate out the form element into a separate function to be called, so that when I click on the submit save button, it rebuilds the form with the new results?

Answer 1

After thinking about it then tried several things I came up with the below solution to my problem. If anyone sees where I can improve it please put in your input. 1. I created the function to build the form then used it in my jquery autocomplete Here is the function to build the form

 function sysformbuild(earr){
$("#hiddenstuff").empty();
$("#formcontent").empty();
$("#buttondiv").empty();
$("#buttondiv").append(
$('<input>').attr({
        type: 'submit',
        id:    'updateuserbutton',
        name: 'updateuserbutton',
        value: "Save"
    })
).append(
    $('<input>').attr({
        type: 'button',
        id:    'edituserbutton',
        name: 'edituserbutton',
        value: "Edit"
    })
);
$("#hiddenstuff").append(
    $('<input>').attr({
        type: 'hidden',
        id: 'Mchnum',
        name: 'Mchnum',
        value: earr.item.Mchnum
    })
);
$("#formcontent").addClass("incident").append(
    $('<div>').append(
        $('<label>').attr({
            for: 'username'
            }).text("User name:")
    ).append(
        $('<input>').attr({
            type: 'text',
            id: 'username',
            name: 'username',
            value: earr.item.username
        })
    ).append(
        $('<label>').attr({
            for: 'syadmin'
        }).text("System Administrator")
                         )
if(earr.item.syadmin=="1"){$("#syadmin").prop('checked', true)};                
$("#formcontent *").attr('disabled',true);
$("#edituserbutton").click(function(){
$("#formcontent *").removeAttr('disabled'); 
});
}

Then I used the form build function in the autocomplete. I am assuming I will be able to use this form function in the form submit function.

$(function(){
var ans ={
source:"../json/getmchpersonjson.php",
select: function(e,u){
    sysformbuild(u);
    },
    minLength:1
};
$("#employeename").autocomplete(ans);       
});