Question

当我提交表单时，我希望隐藏提交按钮，然后显示带有消息的div。似乎很基本，但它不起作用;提交按钮不会消失，消息div也不会出现。

在提交表单之前，文档或dom中是否存在阻止这种情况发生的事情？或者我只是忽略了一些非常简单的事情？

<input class="btn btn-primary" id="submit" type="submit" value="Submit">

<div id="spin"></div>

<script>

$('#submit').click(function(e) {

    // hide the submit button
    $('#submit').hide();

    // replace the submit button with a "message" button"
    $('#spin').html('<button class="btn btn-success"><i class="fa fa-refresh fa-spin"></i>&nbsp; Saving...</button>');

});

</script>

Answer 1

工作正常，请检查是否添加了jQuery库

请参阅Demo fiddle

当同一个选择器在同一事件的主体中使用时，使用this是一个很好的做法。

$('#submit').click(function(e) {
  // hide the submit button
  $(this).hide();
  // replace the submit button with a "message" button"
  $('#spin').html('<button class="btn btn-success"><i class="fa fa-refresh fa-spin"></i>&nbsp; Saving...</button>');
});

Answer 2

你的代码工作正常只需检查你添加的jquery库

＆＃13;

$('#submit').click(function(e) {

    // hide the submit button
    $('#submit').hide();

    // replace the submit button with a "message" button"
    $('#spin').html('<button class="btn btn-success"><i class="fa fa-refresh fa-spin"></i>&nbsp; Saving...</button>');

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="btn btn-primary" id="submit" type="submit" value="Submit">

<div id="spin"></div>

＆＃13;

Answer 3

感谢您的回复，伙计们。我弄清楚发生了什么：我需要中断表单的提交 - 显示/隐藏内容 - 然后继续提交表单。

对于任何可能偶然发现这个问题的人来说，这就是诀窍：

    public static void SearchDetails()
    {
    Console.WriteLine("Enter ID Number");
    int Id = 0;
    int.TryParse(Console.ReadLine(), out Id);
 string[] lines = System.IO.File.ReadAllLines(@"C:\\file.txt");
            List<string> IdLines = lines.Where((x, i) => i % 4 == 0).ToList();
            int IdLine = IdLines.IndexOf(Id);
            if (IdLine != -1)
            { //then result found
                //Id is what user searched for or
               // string Id = lines[IdLine*4];
                //string[] results = lines.Where((x, i) => i > IdLine * 4 && i < IdLine * 4 + 4).ToArray();
           for(int i=IdLine*4;i<IdLine*4+4;i++)
            System.Console.WriteLine(lines[i]);
            }
            else
            {
                Console.WriteLine("no results!");
            } 

    }

完整示例

$('#form-post').unbind('submit').submit();

*根据Frayne Konok的建议将<form id="form-post"> <input id="submit" type="submit" value="Submit"> <div id="spin"></div> </form> <script> $('#submit').click(function(e) { $(this).hide(); $('#spin').html('<button class="btn btn-success"><i class="fa fa-refresh fa-spin"></i>Saving...</button>'); $('#form-post').unbind('submit').submit(); }); </script>更改为$('#submit')。

jQuery：隐藏/显示按钮和div提交

3 个答案: