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.

Sandro · Accepted Answer · 2012-04-03 14:12:08Z

2

Why are you using

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

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

$("#searchForm").submit()

answered Apr 3, 2012 at 14:12

Sandro

4,7711 gold badge36 silver badges41 bronze badges

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

4 Comments

cirik Over a year ago

tried that one. executes the next line but didn't trigger the submit()

Sandro Over a year ago

Do you have an event handler attached to the form when it is submitted? Maybe something else is canceling the form?

cirik Over a year ago

I don't have an event handler. should I have one?

Sandro Over a year ago

Not at all, just wondering if anything was canceling the form from being submitted. Are you sure searchForm is a unique id for this form? And there is only one form on the current page with that unique id?

Collectives™ on Stack Overflow

Cannot trigger submit from JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related