How do i submit a form with jqueryui dialog button,

Question

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 1

okay the very first of all code is very tangled and really badly organized, sorry for saying this. Some tips for improvement:

1: keep javascirpt into separate js file, try to avoid embedded code as much as it possible. But yet it does not mean do not use embeds at all. in this case it is better keep it more organized.

2: make sure you call load event into the code where it is needed, in your case document ready was used inside show_box() which is totally unnecessary.

3: function submi_form() is not called from anywhere, so at this point you may better use document ready to handle click event

4: findUrls(), sorry was not able to get what you trying to accomplish in this part, so just bypass it. Make sure you keep things simple and happiness will come)

Was tried to fix code keeping your style as close as it possible, so here we are http://jsbin.com/idetub/1/edit

and just javascript for your consideration

function findUrls() {
  show_box(); // this will show jquery dialog..
  return false;

  // some broken logic below ...
  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;
  }
}

 function show_box() {
   //$(document).ready(function(){ // no needs for that
   $("#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");
   //});
 }
$(document).ready(function(){
  //function submi_form() { remove this as no accual call for submit_form nowhere
    var myForm = document.forms['myForm'];
    var formSubmit = document.getElementById('formSubmit');
    formSubmit.onclick = function () {
      myForm.submit();
    };
  //}
});

UPD: and yes, looks like you get reccursive logic here, which unabled to make form submitted.

Answer 2

Try this:

$("#myForm").submit(function() {

    var text = $('#text').val;
    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..
        alert('ss');
        return false;
    }
    return false;
});​

Also remove the onsubmit="return findUrls();" from the form and add the findUrls() code inside the $("#myForm").submit() method above. Fiddle

Answer 3

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".