Question

Using jquery dialog I have created a popup box with a form.
I am writing php code and I want to use the least javaScript possible.
I would like to submit the form using php sending $GET variables (I have complex actions with the database to perform).
Is there a way to do this?
My code is:

         $( "#dialog-form" )
            .dialog({
                autoOpen: false,
                title: "Add Images",
                buttons: {"Ok": function() 
                                    //I want to submit a $GET variable }},
                draggable: false,
                resizable: false 
        });

        $("#addImage")
            .click(function() {
            $( "#dialog-form" ).dialog("open");
        });     


//form 
<div id="dialog-form">

    Xml::openElement( 'form', array(
            'action' => $action,
            'method' => 'get')). 
        );  

       Xml::radio('name=addimage', 'value', 'he') . 'Choose from Exisiting'.
           Xml::radio('name=addimage', 'value=go')  . 'Upload Image'
           //I want to have a XML::submit('ok') button to submit the form. I've tried putting this in but it doesn't do anything.                                               
               Xml::closeElement( 'form' );
         </div>
<button id="addImage">Add Image</button>

my complete code:
function fnAddImages(){
global $wgOut, $wgHooks, $wgUser;

 // import addimage javascript and css files
  $wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/addimages.js"></script>');
  $wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-1.7.1.min.js"></script>');
  $wgOut->addScript('<script type="text/javascript" src="extensions/AddImages/js/jquery-ui-1.7.3.custom.min.js"></script>');
  $wgOut->addScript('<link type="text/css" href="extensions/AddImages/css/blitzer/jquery-ui-1.7.3.custom.css" rel="Stylesheet" />');      
  $wgOut->addScript("<style>@import url( extensions/AddImages/style.css);</style>");

  //Add Image button with popup onclick
$wgOut->addScript('<script type="text/javascript"> 
    ( function($) {
        $(document).ready(function() {
        $( "#dialog-form" )
            .dialog({
                autoOpen: false,
                title: "Add Images",
                buttons: {"Okay": function() {$("#dialog-form form").submit(); }},
                //{"Cancel": function() { $(this).dialog("close"); }},
                draggable: false,
                resizable: false 
        });

        $("#addImage")
            .click(function() {
            $( "#dialog-form" ).dialog("open");
        });
        });     

    } ) ( jQuery );

</script>'); 
//form 


$wgOut->addHTML('<div id="dialog-form">'); 


$wgOut->addHTML(
    Xml::openElement( 'form', array(
            'action' => '..' ,
            'method' => 'get')). 
        Xml::hidden( 'wpEditToken', $wgUser->editToken() )
        );  

$wgOut->addHTML( 
             Xml::radio('name=addimage', 'value', 'he') . 'Choose from Exisiting'.
                   "<br />" .
                Xml::radio('name=addimage', 'value=go')  . 'Upload Image'.
                   "<br />" .
                // Xml::submitButton('Ok') .
               Xml::closeElement( 'form' )
            );
$wgOut->addHTML('</div>');
$wgOut->addHTML('<button id="addImage">Add Image</button>');


//retun true to run hook function  
return true;

}

I am running it on a mediawiki site.
I’m trying to create a ‘add image’ button that will give you a radio button form so you can choose to ‘upload your own image’ or ‘existing image’. I need to press ‘ok’ so I can code functions that will pull data from the database or show a new popup box for uploading images.
Thanks for your help.

Answer 1

I you want to perform an synchronous get request (AJAX):

Have a look at either get in combination with serialize.

Something like:

$.get(theUrl, $("#dialog-form form").serialize());

I’ve added a more complete example here:

http://jsfiddle.net/3uNyN/1/

Here’s the essence:

var form = $("#dialog-form form"); 
var url = form.attr('action');     // use the action URL of the form
var data = form.serialize();       // serialize form data to key=value&foo=bar.. form
$.get(url, data, function(){       // perform asynchronous get request to url
    alert('done');                 // the passed in function is called on success
});

If you simply want to submit the form synchronously (as if you’d normally press a submit button), simply call

$("#dialog-form form").submit();