Question

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

我在几个标签中尝试过data-ajax =“false”无济于事。我已经在和标签中试过但没有运气。

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

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

尝试添加return false;到你的onClick事件：

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

Answer 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

的链接

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

2 个答案: