Submitting HTML form in JQuery dialog

Question

I am trying to convert an existing HTML form and make it appear in JQuery dialog. I am not sure how to change the code so the data is submitted after clicking the submit buton. My code is a follows:

Old form:

<form method="post" name="callbackrequest" id="ccallbackrequest" action="action.php" onsubmit="return validateThis(this)">

<button type="submit" class="submit">Submit Request</button>

New form:

buttons: {
                "Submit": function() {
if ( bValid ) {

        HERE GOES THE CODE!

        $( this ).dialog( "close" );
              }

Then there is the new form:

<form class="center" method="post" name="callbackrequest" id="ccallbackrequest" action="??">
 fields listed
no submit button
</form>

Any advice on how should I handle this?

Could you make a jsfiddle and show us what is breaking? I'm not sure what is breaking, or what behavior you want... jsfiddle.net — schizodactyl
– schizodactyl, Commented Apr 7, 2011 at 14:22
Nothing is braking, it is not working. I am just trying to submit the button and I don't know the code to do this in JQuery. In the HERE GOES THE CODE section there should be a call to submit the form, however i dont know how to do it. — Vonder
– Vonder, Commented Apr 7, 2011 at 14:30

bpeterson76 · Accepted Answer · 2011-04-07 14:52:59Z

12

Let's take it one step further...here's a dialog form submit with ajax!

<form id="modalform" style="display:none">
     <input type="text" name="something">
     <input type="text" name="somethingelse">
</form>




$("#modalform").dialog({                                                            //Shows dialog
        height: 250,
        width: 450,
        modal: true,
        buttons: {
            "Cancel": function() {
                $( this ).dialog( "close" );
            },
            "Save": function() {
                $.ajax({
                    url: "/url/to/submit",                   //
                    timeout: 30000,
                    type: "POST",
                    data: $('#modalform').serialize(),
                    dataType: 'json',
                    error: function(XMLHttpRequest, textStatus, errorThrown)  {
                        alert("An error has occurred making the request: " + errorThrown)
                    },
                    success: function(data){                                                        
                         //Do stuff here on success such as modal info      
                             $( this ).dialog( "close" );
            }
        }
    });

answered Apr 7, 2011 at 14:52

bpeterson76

12.9k6 gold badges51 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kyle Over a year ago

Although, I'm quite familiar with ajax, I was not sure how I was going to implement this with dialog. This was extremely helpful, thank you!

bpeterson76 · Accepted Answer · 2018-07-24 22:31:21Z

6

Try $('#ccallbackrequest').submit();. The submit method just submits whichever form is returned by the selector.

edited Jul 24, 2018 at 22:31

bpeterson76

12.9k6 gold badges51 silver badges82 bronze badges

answered Apr 7, 2011 at 14:35

Xr.

1,4091 gold badge13 silver badges23 bronze badges

Comments

schizodactyl · Accepted Answer · 2011-04-07 14:35:23Z

3

You just need to put in

 $("#FORM_ID").submit()

answered Apr 7, 2011 at 14:35

schizodactyl

1,4551 gold badge10 silver badges11 bronze badges

Collectives™ on Stack Overflow

Submitting HTML form in JQuery dialog

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related