Make Submit button not kill my dialog box

Question

I have a form and I'm trying to perform Ajax posts.

With the default submit button the dialog window closes, with the jQuery button, nothing happens. I want the dialog window to stay open so I can keep doing Ajax requests uninterrupted and only close when I press Esc or click the big "X". Thanks

<div id="formBox" style="display: hidden;">
   <form>
      <fieldset>
      <legend>File System Space Calculator</legend>
      <p>
         <label for="curr_alloc">Current Space Allocation:</label> 
         <br />
         <input type="text" size="5" name="curr_alloc" id="curr_alloc" />
         &nbsp;KB <input type="radio" name="curr_unit" value="KB" />
         &nbsp;MB <input type="radio" name="curr_unit" value="MB" />
         &nbsp;GB <input type="radio" name="curr_unit" value="GB" checked/>
         &nbsp;TB <input type="radio" name="curr_unit" value="TB" />
      </p>
      <p>
      <label for="curr_percent">Current Usage Percentage:</label> 
      <br />
         <input type="text" size="5" name="curr_percent" id="curr_percent" />
      </p>
      <p>
      <label for="desired_percent">Desired Usage Percentage:</label> 
      <br />
         <input type="text" size="5" name="desired_percent" id="desired_percent" />
      </p>
      <br />
      <p>
         <input type="submit" value="calculate"/></p>
      </fieldset>
   </form>
</div>

<div id="calcBox" style="display: none;"> </div>

<script>
$(document).ready(function() {
    $("#formBox").dialog({
      bgiframe: true,
  autoOpen: false, 
  height: 500,
  width: 500, 
  modal: false,
  closeOnEscape: true,
  title: "Calculator",
  closeText: 'Close',
  buttons: 
   {
   "Calculate": function()
/* form post */

$("#calcQuery").submit(function(){
        $.post("calc.php", $("#calcQuery").serialize(),
        function(data){
    if (data.length > 0)
    {
          $("#calcBox").html(data);
          $("#calcBox").show();
    }
    else
    {
          $("#calcBox").html("<h1>nuttin' here yet</h1>");
    }
        }, "html");

        return false;

    });

/* form post */
    }
   } 
    });

$('#calcButton').click(function(){
 $('#formBox').dialog('open');
 return false;
 });



  });

</script>

Answer 1

This works (except for form reset which is addressed in another post)

// form popup 
$(document).ready(function() 
{

    $("#formBox").dialog({
      bgiframe: true,
        autoOpen: false, 
        height: 600,
        width: 400, 
        modal: false,
        closeOnEscape: true,
        title: "Calculator",
        buttons:    {
            "Calculate": function() {

// form post
            $.ajax({
            type: "POST",
            url: "calc.php",
            data: $("#calcQuery").serialize(),
            dataType: "html",
            success: function(response)
                {
                $("#calcBox").html(response);
                $("#calcBox").show();   
                },
            error: function
                (xhr, ajaxOptions, thrownError)
                    {
                    alert(xhr.status); 
                    alert(thrownError);
                    }



    }).responseText;

// form post 

                }
            } 
    });

$('#calcButton').click(function(){
    $('#formBox').dialog('open');

    });

});

Answer 2

In your button method, just make the post. You shouldn't have to do anything else.

buttons:{
"Calculate":function(){
$.post("calc.php", $("#calcQuery").serialize(), function(data){ if (data.length > 0) {
             $("#calcBox").html(data);
             $("#calcBox").show();
       }
       else
       {
             $("#calcBox").html("<h1>nuttin' here yet</h1>");
       }
    }, "html");
});
}

I apologize for the formatting. I worked with what you gave me without opening an editor. You shouldn't need to return false in a jQuery-UI button.