Hide modal forum default: jqgrid - pop up Options

[publicGenome]

Hi HTML-ers,

Thanks for the forum. I'm a noob in HTML, and web development. Pardon my naive questions, and apologies should I violated any forum rule.

I'm trying to create a modal form. I've jqgrid. in Jqgrid, on click of a button a dialog box fires up, with abc details, form.

That is div id - dialog-analysis

CODE

<div id="dialog-analysis" title="Add Analysis">
<form >

<form>
<fieldset>
          <div>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all"></br>
      </div>
       <div>
      <label for="email">Email</label>
      <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all"></br>
      </div>
       <div>
      <label for="password">Password</label>
    
      <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all"></br>
      </div>

      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
  </form>

</form>
</div>

My java script looks like:

CODE

document.getElementById("dialog-analysis").style.display="none";

        $("#grid_illume").navButtonAdd('#pager_illume',{
                caption:"Add Analysis",
                onClickButton: function()
                {
                        var dialog = $("#dialog-analysis").dialog({
                              autoOpen: false,
                              height: 300,
                              width: 350,
                              modal: true,
                              buttons: {
                                  'Cancel': function() {
                                      dialog.dialog( "close" );
                                    },
                                    'Confirm': function(){
                                      
                                    }
                              }
                              
                        });
                         dialog.dialog("open");
                }
              
        });

However, I've to write:

document.getElementById("dialog-analysis").style.display="none"; at the top to not to display the form until the button is clicked. Upon clicked, fine windows pops out.

I was wonder if there's any other way to hide?
I used the sample from:

http://jqueryui.com/dialog/#modal-form

And here, the code doesn't use (or similar):
document.getElementById("dialog-analysis").style.display="none";

That is what interests me.

Kindly help.
Again, thank you for your help in advance!

[CharlesEF]

I'm not sure I understand the question. What does this mean: 'Upon clicked, fine windows pops out.'? Or do you mean five windows open up? I also see you are defining a form inside a form. You don't need to do that, only 1 form is needed.

To make the form hidden upon page load you need to use CSS. You can create a CSS rule for 'dialog-analysis' which has 'display: none;' in it. Or you can use the style attribute if you don't want to use a CSS rule. This will make the div, which contains the form, hidden when loaded. Then your button click only needs to show the div when clicked, 'display: block;'.