如何在bootstrap表单中使用不同的按钮

时间:2015-08-04 11:50:44

标签: javascript php jquery html twitter-bootstrap

我使用过Bootstrap并创建了form.my表单,看起来像

<form action="default_results.php"   method="post" class="calculator"  name="frmCalculator">  

我在代码的开头和页面的末尾使用了这段代码我用了三个按钮看起来像

              <div class="row">

                            <button id="button2" class="dont-compare shadow-inset" value="reset" >
                                    Reset</button>
                            <button id="button3" data-toggle="pop" class="dont-compare shadow-inset" class="update" >
                                    Update MI</button>
                            <button id="Button4"  class="dont-compare shadow-inset" class="calculator" >
                                    Calculate Scenarios</button>
              </div>

我有另一个页面,名为default_ results.php页面。我想在单击Calculate Scenarios按钮时加载该页面。我已使用href tag作为该按钮。但是那三个按钮也加载了default_results页面。

如何设置特定按钮?请问有什么想法吗?

3 个答案:

答案 0 :(得分:1)

你的问题不是关于bootstrap,而是HTML。按钮的默认类型是提交。如果您只想提交表单,请将其添加到表格type="submit",并向其他人添加type="button"。 例如,button4将提交表单,其他重定向点击。

<button type="button" onclick="location.href = '/some_page_1.php';" id="button2" class="dont-compare shadow-inset" value="reset" >Reset</button>
<button type="button" id="button3" data-toggle="pop" class="dont-compare shadow-inset" class="update" >Update MI</button>
<button type="submit" id="button4" class="dont-compare shadow-inset" class="calculator" >Calculate Scenarios</button>

或更优雅的重定向方式:

<script>
   document.getElementById("button3").onclick = function () {
        location.href = "/some_page_2.php";
    };
</script>

答案 1 :(得分:0)

这是因为您的按钮位于

形式

你可以(在Jquery或Javascript中):

$('#Button').click(function(e){
   e.preventDefault();
});

避免表格发布。

在制作之后:

window.location.href('your_url');

将浏览器重定向到您的网址

答案 2 :(得分:-1)

如果条件

,请使用此css类通过php按钮
colModel