Cannot trigger submit from JavaScript

Question

I am trying to create a popup for a search box and submit the keyword with a form. I browse similar questions on the internet but the only solution I applied is deleting submit element of the form. It didn't work out neither; any ideas?

Working on django and I can provide more details.

Some part of my JavaScript looks like this:

$( "#dialog-form" ).dialog({
   autoOpen: false,
   height: 200,
   width: 200,
   modal: true,
   buttons: {
       "Search": function() {
           var bValid = true;
           allFields.removeClass( "ui-state-error" );

           bValid = bValid && checkLength( keyword, "username", 2, 16 );

           bValid = bValid && checkRegexp( keyword, /^[a-z]([0-9a-z_])+$/i, "Keyword may consist of a-z, 0-9, underscores, begin with a letter." );

           if ( bValid ) {
               document.getElementById('searchForm_1_keyword').value =  keyword.val();
               document.getElementById('searchForm').submit(); //if I comment out this line it continues the next line, if not, it does not execute the next line
                                            

                $( "#testDiv" ).append( "<tr>" +
                "<td>" + keyword.val() + "</td>" +
                "</tr>" );

                 alert(keyword.val());
                 $( this ).dialog( "close" );
           }
       },
       Cancel: function() {
           $( this ).dialog( "close" );
       }
   },
   close: function() {
       allFields.val( "" ).removeClass( "ui-state-error" );
   }
});

and html looks like this:

<div class="searchBox">
     <form id='searchForm' method="POST" action="/dasdasasdas/" >{% csrf_token %}
        <input type="text" name="column_name" value='supplier_name'>
        <input type="text" name="keyword" id="searchForm_1_keyword" value=""/>
     </form>
</div>

and these are my jQuery files :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>

FOUND THE SOLUTION!

I made a rookie mistake. I had nested forms. When I correct that mistake, it does work.

Answer 1

Why are you using

document.getElementById('searchForm').submit()

when you have access to jQuery? You could do this instead:

$("#searchForm").submit()