Put Span Within F.Submit

Put span within f.submit

Use button_tag and put the span within the button in that way

<%= button_tag(type: 'submit', class: "btn submit", id: 'validForm') do %>
 <span class="icon-envelope"></span> Send Message
<% end %>

Wrap span tags with f.submit

The f.submit is just an helper, based on submit_tag helper, that writes an HTML input tag. There is nothing special in there.

Likewise, the helper button_tag is designed to render a button, a submit button by default. You can use it or, even simpler, you can simply replace it with pure HTML.

<button type="submit">
<div class="ui-button button1">
  <span class="button-left">
    <span class="button-right"> Post your Answer </span>
  </span>
</div>
</button>

Whether it's a good idea to include all this markup inside a button... well, this is another story.

You cannot replace the button with a link a because there is no submit type for a link. You can simulate it via javascript, but it discourage you to follow this way.

span Inside form Tags

span are display: inline; by default and input type="submit" and are display: inline-block; so the floats in this case are unnecessary. Remove float from .leftBrace and .rightBrace and the content should display in one line.

input[type="submit"].evaluate {    background: none;    border: none;    color: #0000ff;    cursor: pointer;    padding: 0;}input[type="submit"].evaluate:hover {    text-decoration: underline;}.leftBrace {    color: #0000ff;}.rightBrace {    color: #0000ff;}

<form action="myAction" method="post">    <!-- hidden input forms here -->
    <span class="leftBrace">[</span>        <input type="submit" value="Evaluate" class="evaluate" />    <span class="rightBrace">]</span></form>

jQuery | Submit Form with Span

Your $(this) in your jQuery code is not referring to the form, but the <span> element itself. Therefore, you can use DOM transversal to seek/search for the parent <form> element:

$(document).ready(function(){
    var spanSubmit = $('.submit-span');

    spanSubmit.on('click', function() {
        $(this).closest('form').submit();
        // Will also work, but might fail if nesting is changed:
        // $(this).parent().submit();
    });
});

Here's a proof-of-concept fiddle, where I used an alert to listen to the submit event to verify that form submission is indeed called :)

Trying to set inner HTML on span element on submit of form - doesn't display

Use need to prevent default form behaviour, use event.preventDefault();

function calcTip(event) {    let billAmnt = document.getElementById('billAmount').value;    let tipPrcnt = document.getElementById('tipPercent').value;    let billAmntNum = parseFloat(billAmnt);    let tipPrcntNum = parseFloat(tipPrcnt);    let tipAmnt = billAmntNum * (tipPrcntNum / 100);    let billTotal = billAmntNum + tipAmnt;    //alert(tipAmnt);    //alert(billTotal);    event.preventDefault();    document.getElementById('displayTipAmount').innerHTML = tipAmnt;    document.getElementById('displayTotalAmount').innerHTML = billTotal;  }

<input type="submit" onclick= "calcTip(event)" name="submitButton" value="Calculate Tip">

How can I add a span element to a button rendered from WTForms?

You should be able to use MarkUp. Documentation here

import flask
submit_value = flask.Markup('<span class="lnr lnr-arrow-right"></span>')
submit_button = SubmitField(submit_value)

And in combination with your current code...

class SignupForm(Form):
    submit = submit_button 

The Markup function is needed to tell your form it's safe to render without escaping.

If you'd rather avoid this, there are other ways. Typically, you don't need to specify the submit button in your python, as you don't normally need to input any useful data. I'd add the submit button HTML into the template manually like you said:

<button class="primary-btn" type="submit">Register<span class="lnr lnr-arrow-right"></span></button>

How to add a html span to the SubmitField text argument?

From my reading of the wtforms code, the generic SubmitField renders an HTML element that looks like this:

<input type="submit" value="SOME TEXT LABEL">

The reason it does this is because SubmitField has the signature (you can trace the inheritance to see the HTML generation code):

class SubmitField(BooleanField):
    """
    Represents an ``<input type="submit">``.  This allows checking if a given
    submit button has been pressed.
    """
    widget = widgets.SubmitInput()

To output the HTML as you want you need to define a custom widget. Look up the documentation on this.

For example something like this (untested) might work:

class MySubmitWidget(widgets.SubmitInput): # note subclassing the original
    def __call__(self, field, **kwargs):  # but overriding the render
        return HTMLString('<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-envelope"></span> Envelope</button>')

class MySubmitField(SubmitField): # note subclassing the original
    widget = MySubmitWidget # but overriding the render widget

And in your form you just use MySubmitField instead. If you want to customise further or make the HTML dynamic you have to modify the __call__() method to generate HTML responsive to kwargs.

Note, however that <input type="submit"> elements have a particular default action that is to submit a form, when you render a generic <button> it wont automatically submit your form so you will most likely have to solve that problem next.

Cannot post span value by document.form.submit

span is not a form element. Form elements are inputs, selects, radios, textareas, etc. That is why it works when you change it to an input.

---

Related Topics