如何删除窗体中形成的按钮，以便将按钮用作切换按钮？

Question

我构建了一个结帐页面，并有一个表单来获取用户数据。

表格是这样写的：

<form method="post" action="purchase" name="checkout"></form

当用户单击"confirm order"时，它们正按假定的方式被定向到confirmation.jsp。

在该表单中，我添加了按钮作为切换效果，以隐藏和显示表单的给定部分。

问题是：

• 当我单击>+<给定部分显示时，当我单击>-<给定部分时隐藏，但是confirmation.jsp page加载时就好像按钮充当到该页面的链接一样，就像"confirmation order button"一样。我试着添加普通按钮，同样的事件也会发生。该表单上的每个按钮似乎都被自动格式化为“确认订单按钮”，不管我尝试了什么。

按钮是这样的：

<button id="show" class="toggle_button" value=$("#show").click action=$("#show").click >+</button>
<button id="hide" class="toggle_button" value=$("#hide").click action=$("#hide").click>-</button> 

以及标题中的脚本：

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#hide").click(function(){
            $("p").hide();
        });
        $("#show").click(function(){
            $("p").show();
        });
    });
    </script>
        </head>

谢谢你的帮忙!

Answer 1

试试这个：

<input type="button" id="show" class="toggle_button" onclick="doAction('show')" value="+" />
<input type="button" id="hide" class="toggle_button" onclick="doAction('hide')" value="-" />

<script>
    $("#show").click(function( event ) {
        event.preventDefault(); 
    });
    $("#hide").click(function( event ) {
        event.preventDefault();
    });

    function doAction(action) {
       if(action=="hide") {
           $("p").hide();
       } else {
          $("p").show();    
       }
    }
</script>

Answer 2

表单中按钮的默认类型是type="submit“。试着在每个按钮上添加“type=”按钮。

<button type="button" id="show" class="toggle_button" value=$("#show").click action=$("#show").click >+</button>
<button type="button" id="hide" class="toggle_button" value=$("#hide").click action=$("#hide").click>-</button> 

希望这能有所帮助。

Answer 3

试试这个CSS：

.btn {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family: Arial;
  color: #000;
  font-size: 60px;
  background: #ffffff;
  padding: 0px 0px 0px 0px;
  text-decoration: none;
}

以及HTML：

<button id="show" class="toggle_button btn" value=$("#show").click action=$("#show").click >+</button>
<button id="hide" class="toggle_button btn" value=$("#hide").click action=$("#hide").click>-</button>