Why do my onsubmit event handlers only work once before requiring the page to be reloaded?

advertisements

The Start and Reset buttons trigger the input field text to change.
When I import: jquery.mobile-1.3.0.min.js
I have to reload the page for the buttons to events to be retriggered.

It works perfectly if I just use Jquery-1.8.2.

How do I stop the required reload with the Jquery mobile UI?

I'm using Firefox 19.02.

    <!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">   

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>  

</head>   

<body>   

<form id='testform' action="#">
    <fieldset>
        <label for="timer">
            <span>Event triggered</span>
            <input type='text' name='triggered'>
        </label>
    </fieldset>
    <fieldset>
     <input value="Start" type="submit">
     <input value="Reset" type="reset">
     </fieldset>
</form>
<script type="text/javascript">  

//bind a submit handler to the sample form
document.getElementById('testform').onsubmit = function()
{
   $("input[name='triggered']").val("Start button clicked.");  

    // cancel the normal submit
    return false;
};  

document.getElementById('testform').onreset = function()
{
    $("input[name='triggered']").val("Reset clicked.");  

    //cancel the normal rest
    return false;
};  

</script>
</body>
</html>


Working jsFiddle example: http://jsfiddle.net/Gajotres/GjU8e/

<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>  

</head>   

<body>
    <div data-role="page" id="index">
        <form id='testform' action="#" data-ajax="false">
            <fieldset>
                <label for="timer">
                    <span>Event triggered</span>
                    <input type='text' name='triggered'/>
                </label>
            </fieldset>
            <fieldset>
                <input value="Start" type="submit"/>
                <input value="Reset" type="reset"/>
             </fieldset>
        </form>
    </div>
<script type="text/javascript">  

// bind submit and reset event before page is shown
$(document).on('pagebeforeshow', '#index', function(){
    //bind a submit handler to the sample form
    $(document).on('submit', '#testform', function(){
        $("input[name='triggered']").val("Submit button clicked.");
        // cancel the normal submit
        return false;
    });
    //bind a reset handler to the sample form
    $(document).on('reset', '#testform', function(){
        $("input[name='triggered']").val("Reset button clicked.");
        // cancel the normal reset
        return false;
    });
});
</script>
</body>
</html>

Few comments:

  • Don't use vanila java script with jQuery. It will work but code looks dirty.
  • when using jQuery Mobile wrap your code inside a page. It can work without it but not fully correctly. jQM version 1.4 or 1.5 will full support page elements/widgets outside of page container.