Question

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

表格如下：

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

当用户点击"confirm order"时，系统会将其定向到confirmation.jsp。

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

问题：

当我点击＆gt; +＆lt;给定的部分显示，当我点击＆gt; - ＆lt;给定的部分隐藏但随后confirmation.jsp page加载，好像按钮充当该页面的链接，就像"confirmation order button"一样。我试图添加正常按钮，同样的事件发生。放在该表单上的每个按钮似乎都会自动格式化为＆＃34;确认订单按钮＆＃34;，无论我尝试什么。

按钮是这样的：

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

Answer 4

问题在于，当您在表单中放置按钮时，默认type为submit，除非您明确将其设置为button。

因此，您无意中提交了表单

更改为

 <button type="button"></button>

或者在javascript中，您也可以在点击处理程序中使用event.preventDefault()

如何删除表单中的按钮格式，以便按钮用作切换按钮？

4 个答案: