HTML Form中button自动刷新页面

在html的form中定义button的时候,如果不加上type="button"属性,会出现执行完事件后自动刷新当前页面的情况,
比如这样的代码:
<form class="form form-horizontal" id="queryForm" >
            <div class="row cl">
                <label class="form-label col-sm-3">服务号码:</label>
                <div class="formControls col-sm-4">
                    <input type="text" class="input-text" placeholder="输入手机号码" id="cellNo" name="cellNo">
                </div>
            </div>
            <div class="row cl">
                <div class="formControls col-sm-4 col-sm-offset-3">
                    <button class="btn btn-success radius" id="queryBtn">查询</button>
                </div>
            </div>
        </form>
 其实用chrome开发工具调试的时候就发现了一个怪异的情况,点击完“查询”按钮后,在Sources页面会出现“query?cellNo=”这样开头的页面,这说明它把整个form表单提交了,而不是单单的一次按钮click。
解决办法就是加上type="button":
<button type="button" class="btn btn-success radius" id="queryBtn">查询</button>


发布了19 篇原创文章 · 获赞 17 · 访问量 1万+
展开阅读全文

页面自动刷新后不会发生表单重置

02-12

<div class="post-text" itemprop="text"> <p>I have a Iframe which has a form with text fields.This form is created by php script. The parent page refresh auto, continuously.</p> <pre><code><form id="form" method="post" action="test.php?vid='.$vid.'"> <table border="1" width="100%" style="border-collapse:collapse"> <tr> <th class="col-header list">Distance </th> <th class="col-header list">Service</th> <th class="col-header list">Recipient</th> </tr> <tr> <td > <input type="text" class="input" id="cdistance" name="cdistance" /> </td> <td nowrap class="list"> <input type="text" class="input" id="service" name="service" /> </td> <td nowrap class="list"> <input type="text" class="input" id="destination" name="destination" /> </td> </tr> <tr> <td width="100%" colspan="3" style="background:#e0e0e0;"> <input type="submit" class="btn" name="add" id="add" value="Add New"/> <input type="hidden" name="distance_unit" value="'.$distance.'" /> </td> </tr> </table> </form> </code></pre> <p>To avoid user entered data loosing ('before hit submit') I used query code in parent page to get those entered text in Iframe's form and add them back to text fields after page refreshed.</p> <p>My problem is when the user hit the submit button after page refreshed text fields are not cleared (form not reset) but data submitted successfully.So I tried to reset the form by <code>$('#form')[0].reset()</code>. This is the error I got </p> <blockquote> <p>Uncaught TypeError: Cannot read property 'reset' of undefined</p> </blockquote> <p>Also tried <code>$('#textVal').val('');</code> to empty text fields. But still the data remaining in text fields.</p> <p>Note: The form is reset if the user hit submit button before refreshed. Does anyone need more details please let me know. </p> <p>Any solution for this would be appreciated. </p> </div> 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览