Web2py SQLFROM: putting the submit button into a bootstrap button

Question

I'm using bootstrap modal to popup a new SQLFORM.

I want to put the SQLFORM submit button into a bootstrap button. So when the bootstrap button is click, the form will be submit.

I'm not sure how to accomplish this.

Here is my code:

    <script type="text/javascript">
      $('#submit').on('click', function (e) {

     <?=tag_form.custom.submit?>

})
</script>
<div class="container">  
<div id="example" class="modal hide fade in" style="display: none; ">  
<div class="modal-header">  
<a class="close" data-dismiss="modal">×</a>  
<h5>New Tag</h5>  
</div>  
<div class="modal-body">  
<?=tag_form.custom.begin?>
<strong>Add Tag</strong>
<br/><strong>Tag:</strong><? =tag_form.custom.widget.Tag?><br/>
<br/><strong>Color</strong><? =tag_form.custom.widget.Color?><br/>
<br/><strong>Owner:</strong><? =tag_form.custom.widget.Owner ?><br/>              
</div>  
<div class="modal-footer">  
<a href="#" id="submit" class="btn btn-success">Call to action</a>
<a href="#" class="btn" data-dismiss="modal">Close</a>  
 <?=tag_form.custom.end?>   
</div>  
</div>  

<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-small">New Tag</a></p>  
</div>  
<script src="<?=URL('static','js/bootstrap-modal.js')?>"></script>

This one does NOT work.

I figure out a way that works:

     <div class="container">  
<div id="example" class="modal hide fade in" style="display: none; ">  
<div class="modal-header">  
<a class="close" data-dismiss="modal">×</a>  
<h5>New Tag</h5>  
</div>  
<div class="modal-body">  
<?=tag_form.custom.begin?>
<strong>Add Tag</strong>
<br/><strong>Tag:</strong><? =tag_form.custom.widget.Tag?><br/>
<br/><strong>Color</strong><? =tag_form.custom.widget.Color?><br/>
<br/><strong>Owner:</strong><? =tag_form.custom.widget.Owner ?><br/>              
</div>  
<div class="modal-footer">  
<a href="#"  class="btn btn-success"><?=tag_form.custom.submit?></a>
<a href="#" class="btn" data-dismiss="modal">Close</a>  
 <?=tag_form.custom.end?>   
</div>  
</div>  

<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-small">New Tag</a></p>  
</div>  
<script src="<?=URL('static','js/bootstrap-modal.js')?>"></script>

Yet the button is not pretty.

How could I do it in the right way? Thanks!!

Answer 1

Dont put the web2py submit tag inside the button block just put Submit and in type and value att put Submit form will work as intended. And why did you change your python delimiter thats a odd one.

<div><button type="submit" value="submit" class="btn btn-primary">Submit</button></div>

just make sure its before the custom.end