Cannot stop refresh after form submit jquerymobile

I am learning to write web apps at the moment and have built a small calculator. The problem is that the page refreshes after I press one of the form buttons.

I have tried the data-ajax=”false” in several of the tags to no avail. I have tried it in the and tags but no luck.

Any ideas? Below is my code:

<html>
<head>
<title>GST Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />  
<!-- FontAwesome - http://fortawesome.github.io/Font-Awesome/ -->
<link rel="stylesheet" href="css/font-awesome.min.css" />

<!-- jQueryMobileCSS - original without styling -->
<link rel="stylesheet" href="css/jquerymobile.css" />

<!-- nativeDroid core CSS -->
<link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />

<!-- nativeDroid: Light/Dark -->
<link rel="stylesheet" href="css/jquerymobile.nativedroid.light.css"  id='jQMnDTheme' />

<!-- nativeDroid: Color Schemes -->
<link rel="stylesheet" href="css/jquerymobile.nativedroid.color.blue.css" id='jQMnDColor' />

<!-- jQuery / jQueryMobile Scripts -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

<script language="javascript" type="text/javascript">
// GST Calculator Script
function addgst(form) {
    var dollarAmount = new Number(form.dollarAmount.value);
    var subtotal = new Number(dollarAmount);
    var gst = new Number(dollarAmount * 0.1);
    var total = new Number(dollarAmount * 1.1);
    form.subtotal.value = subtotal.toFixed(2);
    form.gst.value = gst.toFixed(2);
    form.total.value = total.toFixed(2);

}

function subtractgst(form) {
    var dollarAmount = new Number(form.dollarAmount.value);
    var gst = new Number(dollarAmount / 11);
    var subtotal = new Number(dollarAmount - gst);
    var total = new Number(dollarAmount);
    form.subtotal.value = subtotal.toFixed(2);
    form.gst.value = gst.toFixed(2);
    form.total.value = total.toFixed(2);

}

</script>

</head>



<body>
<div data-role="page" data-theme='b'>


    <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
        <a href="index.html" data-ajax="false"><i class='icon-ellipsis-vertical'></i>    </a>
        <h1>GST Calculator</h1>
    </div>

    <div data-role="content">   


        <form>
            <ul data-role="listview" data-inset="true">

                <li data-role="fieldcontain">
                    <label for="dollarAmount2">Amount:</label>
                    <input type="tel" name="dollarAmount" id="dollarAmount2" value="" data-clear-btn="true" placeholder="">
                </li>
                <li>
                    <fieldset class="ui-grid-a">
                            <div class="ui-block-a"><button type="submit" data-theme="b" onclick="addgst(this.form)" name="addGst" value="Add GST">+ GST</button></div>
                            <div class="ui-block-b"><button type="submit" data-theme="b" onclick="subtractgst(this.form)" name="subtractGst" value="Subtract GST" >- GST</button></div>
                    </fieldset>
                </li>
                <li data-role="fieldcontain">
                    <label for="subtotal2">Sub Total:</label>
                    <input type="text" name="subtotal" id="subtotal2" value="" data-clear-btn="true" placeholder="">
                </li>
                <li data-role="fieldcontain">
                    <label for="gst2">GST:</label>
                    <input type="text" name="gst" id="gst2" value="" data-clear-btn="true" placeholder="">
                </li>
                <li data-role="fieldcontain">
                    <label for="total2">Total:</label>
                    <input type="text" name="total" id="total2" value="" data-clear-     btn="true" placeholder="">
                </li>

            </ul>
        </form>

    </div>

</div>    


</body>
</html>

Answer

Try adding return false; to your onClick event:

onclick="addgst(this.form); return false" 

Leave a Reply

Your email address will not be published. Required fields are marked *