Question

I made a form in my PHP / jQuery Mobile web application with this HTML.

<form action="<?= $_SERVER['REQUEST_URI'] ?>">

    <!-- data received from a previously submitted form -->
    <input type="hidden" name="firstName" value="<?= $firstName ?>" />
    <input type="hidden" name="lastName" value="<?= $lastName ?>" />
    
    <div data-role="fieldcontain">
        <label for="favoriteWord">Favorite Word:</label>
        <input type="text" name="favoriteWord" id="favoriteWord" value="" placeholder="Please tell us your favorite word." />
    </div>
    
    <input type="submit" name="submit" value="Submit Form" />
</form>

However, my submit button looks odd. It looks overlaid on itself (as my screen shot shows).

Why?

This is the HTML I see when I do use data-ajax="false" (The problem still persists with ajax off) and hit "View Source".

<form action="/submitFavoriteWord">

    <!-- data received from a previously submitted form -->
    <input type="hidden" name="firstName" value="David" />
    <input type="hidden" name="lastName" value="Faux" />

    <div data-role="fieldcontain">
        <label for="favoriteWord">Favorite Word:</label>
        <input type="text" name="favoriteWord" id="favoriteWord" value="" placeholder="Please tell us your favorite word." />
    </div>

    <input type="submit" name="submit" value="Submit Form" />
</form>

---

Update: I analyzed the page in Chrome Web Developer. Here is what the Elements tab suggests jQuery Mobile is generating.

Strangely, there is a <span> tag generated above my submit button.

Answer 1

This example seems to work fine: http://jsfiddle.net/shanabus/FG97U/

So maybe its a problem with an unclosed HTML element somewhere else on the page? This can be verified if you post more of your code, but I have seen this happen and checking the other HTML on the page may solve your problem.