2
\$\begingroup\$

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?

\$\endgroup\$

migrated from stackoverflow.com Dec 6 '14 at 16:21

This question came from our site for professional and enthusiast programmers.

  • 1
    \$\begingroup\$ I would first abstract all those id names into object properties that the user can set! \$\endgroup\$ – Callum Linington Dec 6 '14 at 14:57
  • \$\begingroup\$ 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? \$\endgroup\$ – user1554967 Dec 6 '14 at 15:02
  • \$\begingroup\$ wrap the code into a function (or functions) and you can call that function in multiple event handlers \$\endgroup\$ – charlietfl Dec 6 '14 at 15:09
  • \$\begingroup\$ charlietfl that is my issue. I know in theory that is what I need to do but to get there is my struggle. \$\endgroup\$ – user1554967 Dec 6 '14 at 15:14
1
\$\begingroup\$

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);       
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.