# Performing an auto complete look-up and building a form

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>
</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"
).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({
}).text("User name:")
).append(
$('<input>').attr({ type: 'text', id: 'username', name: 'username', value: u.item.username }).addClass("rmargin10") ).append($('<label>').attr({
).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'
).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?

• I would first abstract all those id names into object properties that the user can set! – Callum Linington Dec 6 '14 at 14:57
• Melman I have in idea about what you are talking about but I am a neophyte in this arena. Do you know of any examples I can look at? – user1554967 Dec 6 '14 at 15:02
• wrap the code into a function (or functions) and you can call that function in multiple event handlers – charlietfl Dec 6 '14 at 15:09
• charlietfl that is my issue. I know in theory that is what I need to do but to get there is my struggle. – user1554967 Dec 6 '14 at 15:14

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',
})
).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);
});