表单提交jquerymobile后无法停止刷新答案

【问题标题】：Cannot stop refresh after form submit jquerymobile表单提交jquerymobile后无法停止刷新
【发布时间】：2013-11-20 01:27:58
【问题描述】：

我现在正在学习编写网络应用程序，并且已经构建了一个小型计算器。问题是我按下某个表单按钮后页面会刷新。

我尝试了几个标签中的 data-ajax="false" 无济于事。我已经在 and 标记中尝试过，但没有运气。

有什么想法吗？以下是我的代码：

<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>

【问题讨论】：

标签： javascript jquery ajax html jquery-mobile

【解决方案1】：

尝试添加return false；到您的 onClick 事件：

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

【讨论】：

【解决方案2】：

<input type="submit"> 按钮将始终将表单提交到服务器以进行处理。因为您没有进行任何服务器端处理，所以您可以使用 <input type="button"> 元素

请参阅 here，了解有关可用的不同类型的 input 的更多信息。

所以你的例子是

<input type="button" data-theme="b" onclick="addgst(this.form)" name="addGst" value="Add GST">+ GST</input>

附带说明，强烈建议不要像这样内联添加点击处理程序：onclick="addgst(this.form)" 通常最好在脚本本身中执行此操作，以正确分离显示代码和处理器代码.这是 Event Listeners

的链接

【讨论】：