无法用JQuery替换提交按钮

时间:2013-07-17 09:19:23

标签: javascript jquery html

我正在尝试使用JQuery进行我的第一次测试,它似乎比我预期的更难。 我有一个简单的表单调用一些长操作。我想要的是在加载过程中显示进度条。我在以下代码中尝试执行的操作是在用户提交表单时用进度条替换提交按钮。下一页需要时间加载,他会看到一个漂亮的动画让他等待。

<html>
  <head>
    <title>Test form</title>
  </head>
  <body>
    <form id="myCuteLittleForm"><input type="submit" id="submit"/></form> 
    <br />
    <script src="http://code.jquery.com/jquery-1.9.1.js">
      $(document).ready(function() {
        $('#myCuteLittleForm').submit(function() {
          $("#submit").replaceWith('<progress value="" max="">Import en cours.</progress>');
        });
      });
    </script>
  </body>
</html>

然而,令我非常痛苦的是,它不起作用。我只是做坏事还是有根本的不理解?

1 个答案:

答案 0 :(得分:2)

在其他脚本标记中执行:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
      $('#myCuteLittleForm').submit(function() {
          $("#submit").replaceWith('<progress value="" max="">Import en cours.</progress>');
      });
  };
</script>