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?