【问题标题】:type submit vs type button输入提交与输入按钮
【发布时间】:2010-09-03 02:40:33
【问题描述】:

我有一个按钮,现在设置为“提交”类型。这会调用控制器,执行一些代码并返回视图。当我使用 jquery 隐藏按钮时,我看到当我单击按钮时,我所拥有的隐藏了按钮,但是一旦返回视图,按钮就不再隐藏了。而对于“按钮”类型,当我单击按钮时,这会隐藏按钮但不会执行控制器中的代码。有没有办法隐藏类型“提交”按钮,所以当视图返回时,按钮仍然隐藏?

 $('#btnAdd').click(function() {
            $('#btnAdd').hide();
        });

【问题讨论】:

标签: c# javascript jquery asp.net-mvc asp.net-mvc-2


【解决方案1】:

<input type='submit'> 创建一个将表单提交到服务器并触发您的服务器代码的按钮。如果您希望在页面返回时隐藏按钮,则需要向页面添加逻辑来执行此操作。如何执行此操作取决于您的服务器技术(php、.net 等)。

<button> 的行为不同的原因是<button>s 不提交表单(除非您添加更多代码来让他们这样做)......所以上面提到的事情永远不会发生。 <button> 保持隐藏与其说是页面从不更改/重新加载一样多。如果您将代码添加到 <button> 以使其刷新页面,它也会重新出现。

【讨论】:

    【解决方案2】:

    显示按钮是因为提交表单后新显示的页面。您单击并隐藏按钮的“旧”页面是历史记录。

    你想要什么?
    按下一个按钮,在服务器端做一些事情,不要改变你当前的页面
    使用button类型的按钮,使用ajax调用服务端。 或者使用提交类型的按钮,按照 Pablo 在服务器端 http://en.wikipedia.org/wiki/Post/Redirect/Get 所说的操作。

    按下一个按钮,在服务器端做一些事情,给用户反馈: 使用<form method="post" 标记您的表单。使用提交按钮调用服务器端。在服务器端隐藏提交按钮,如果它是通过方法 post 调用的(调用带有链接的页面或在地址字段中键入它是使用 method = get 调用它)。

    类型提交和类型按钮有什么区别? 提交按钮无需 javascript 即可向服务器端发送一些输入。周围的表单被发送到服务器并在浏览器中呈现响应。 一个按钮按钮需要一个 javascript onclick 处理程序,一个 javascript 函数。当用户按下按钮时调用 onclick 处理程序。

    【讨论】:

      【解决方案3】:

      由于页面将在按下提交按钮时重新加载,因此该按钮将重新出现。获得您想要的东西的一种快速而肮脏的方法是......

      首先,创建一个隐藏字段

      <input type="hidden" id="hidden" value="" />
      

      然后,当您按下提交时,在提交按钮的单击事件中,执行以下操作..

      $('#submit').click(function() {
        $('#hiddenField').val("1");
        $('#form').submit();
        return false;
      });
      

      现在在您的控制器中,使用 hiddenField 的值将一些变量传递给可以像这样使用的视图...

      <?php if($hidden == "1"): ?>
        <input type="submit" id="submit" value="Submit" />
      <?php endif; ?>
      

      就按钮不提交表单而言,它不会提交表单,直到您在按钮的点击事件上自己提交表单。像这样的...

      $('button').click(function() {
         $('#form').submit();
      });
      

      当然,正如我所提到的,这是实现所需功能的一种快速而肮脏的方法,还有更好的方法 - 使用 AJAX,实现也可以根据您使用的服务器端语言而改变(我在这里使用了 php )。

      【讨论】:

        【解决方案4】:

        当您的表单被提交并且您的控制器处理数据时,如果满足某些条件,您可以在服务器端代码中设置临时会话变量或 cookie。所以,基本上页面会在每次页面加载时检查这个变量。 PHP 中的示例:

        if( empty($_SESSION['temp']['hideSubmitButton']) ) {
            $submitButton = '<button type="submit">Normal Button</button>';
        } else {
            $submitButton = '<button type="submit" disabled="disabled">Disabled Button</button>';
            // or $submitButton = '';
        }
        

        但是您必须决定何时取消设置() $_SESSION['temp'] 或 $_COOKIE['temp'] 变量。

        【讨论】: