How do i submit a form with jqueryui dialog button,

I want to submit a form using jqueryui button. I had some code but it doesn’t work. Here is the code:

<script type="text/javascript">
function findUrls()
{
    var text = document.getElementById("text").value;
    var source = (text || '').toString();
    var urlArray = [];
    var url;
    var matchArray;

    // Regular expression to find FTP, HTTP(S) and email URLs.
    var regexToken = /b(http|https)?(://)?(S*).(w{2,4})b/ig;

    // Iterate through any URLs in the text.
    if( (regexToken.exec( source )) !== null )
    {
    show_box();// this will show jquery dialog..
    return false;
    }

}

</script>

<div id="dialog" title="Dialog Title">
<p>Dialog box text.....Dialog box text....Dialog box text</p>
<button id="formSubmit">Click me</button>
</div>

<form name="myForm" id="myForm" action="http://www.bing.com" method="post" onsubmit="return findUrls();"> 
<textarea id="text"></textarea>
<input type="submit" name="submit" value="send" />
</form>

<script type="text/javascript">
function show_box(){
$(document).ready(function(){
        
                $( "#dialog" ).dialog({
                autoOpen: false,
                width: 400,
                buttons: [
                    {
                        text: "Yes",
                        click: function() {
                            submit_form();
                            
                        }
                        },
                    {
                        text: "No",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $( "#dialog" ).dialog( "open" );
});
}

function submi_form(){
var myForm = document.forms['myForm'];

var formSubmit = document.getElementById('formSubmit');

formSubmit.onclick = function(){
    myForm.submit();
    }
}
</script>

When a person puts a link in text area and submit the form, the jQuery dialog box appear with three buttons, I want that when some one click the Yes button on dialog box, the form automatically submit. Everything is working fine, but When I click the button yes, it doesn’t work.

Answer

Your submit_form function is not actually trying to submit the form. It is currently adding a click event onto the “Click Me” button which if pressed will then submit your form.

If you want clicking the “Yes” button of your dialog to submit the form, try this:

function submit_form(){
    $('#myForm').submit();
}

Also make sure the name of your submi_form method is just a typo here rather than in your live code…you are missing a “t”.

Advertisement

Answer