Element from dialog cannot pass via a form

Element from dialog cannot pass via a form

Dear all,

First, allow me to explain what i intend to do:
I have a form. The forms allow user to enter their name, gender, age, and a dialog box to choose their hobbies (autoOpen=false)
User clicks 'Choose your hobby' button in order to open the dialog box and tick the hobbies.
After ticked, user close the dialog box, and press the submit button in the form.

However, I found that the hobby list element does not pass together when i submit the form.
Is all dialog behalf like this? Or I've missed something in my code?

My code as following:

  1. <form name="form" method=post id="form">
    <table>
        <tr>
            <td class=Label>
                Name
            </td>
            <td class=Data>
                <input type=text name=txtName  maxlength=16>
            </td>
            </td>
        </tr>
        <tr>
            <td class=Label>
                Gender
            </td>
            <td class=Data>
                <input type=text name=txtGender  maxlength=16>
            </td>
            </td>
        </tr>   
        <tr>
            <td class=Label>
                HOBBIES LIST
            </td>
            <td class=Data>       
            <script language="JavaScript" type="text/javascript">
             $(function()
             {
                $("#dialog").dialog("destroy");

                $("#4c4e7ecbe5200").dialog({
                    autoOpen: "0",
                    height: "350",
                    width: "300",
                    modal:"true"
                });

                $('#modhobby')
                    .click(function(){
                        $('#4c4e7ecbe5200').dialog('open');
                    });

             });
            </script>
            <div id="4c4e7ecbe5200" title="Pick your hobbies">
                <div style=" width:100%; height:220px;overflow-x:hidden;overflow-y:scroll;">
                <table class="TableList" width="100%">
                  <tr>
                    <td class=Data>
                        <input type=checkbox name=chkHobbyList[] id=chkHobbyList  class=Data value="0" >
                    </td>
                    <td class=Data>
                        Swimming
                    </td>
                  </tr>
                  <tr>
                    <td class=Data>
                        <input type=checkbox name=chkHobbyList[] id=chkHobbyList  class=Data value="1" >
                    </td>
                    <td class=Data>
                        Yoga
                    </td>
                  </tr>     
                  </table>
                </div>
            </div>
          </td>
        </tr>
        <tr>
            <td>
            <input type="button"   Name="btnSave" class=Button style="width:80px" value="Save" onClick="validate(this, form, 'save', '')"  target=_self>       
            </td>
        </tr>
    </table>
    </form>
    <input type="button" ID="modhobby" class=Button value="Choose you hobby"  target=_self>











































































Can I actually do this way? Appreciate your time and help!