将提交按钮更改为关闭按钮答案

【问题标题】：Change submit button to close button将提交按钮更改为关闭按钮
【发布时间】：2014-07-22 11:05:45
【问题描述】：

如果表单提交成功，如何更改按钮的行为？

<form method="post" enctype="multipart/form-data" style="margin: 0;" id="frmGenerate">
    <div class="clearfix">
        <div class="input-group">
            <input type="text" placeholder="Customer Name:" name="CustomerName">
            <input type="text" placeholder="Generated Url:" name="CustomerUrl" readonly="readonly" />
        </div>
     </div>
     <div class="clearfix">
         <div class="input-group">
             <button type="submit" class="btn">Generate</button>
         </div>
     </div>
 </form>

这是我的 JS 代码：

 $('#frmGenerate').submit(function(e) {
        var clientName = $(this).find('input[name="CustomerName"]').val();
        $.ajax(
            {
                url: '@Url.Action("GenerateToken","Admin")',
                type: 'GET',
                data: { customerName: clientName },
                success: function(response) {
                    if (response.result) {
                        $('#frmGenerate').find('input[name="CustomerUrl"]').val(response.message).select();
                        $('#frmGenerate').find('button.btn').text('Close');
                    } else {
                        alert(response.message);
                    }
                }
            });
        e.preventDefault();
    });

这是模态窗口，我打开它来生成令牌。当它生成成功时，我在模态输入中设置生成的令牌并将按钮的文本更改为关闭，但我不知道如何更改按钮的行为。

【问题讨论】：

按钮的行为是什么意思？你能给我详细的吗？你想让按钮做什么？
@Mahder，我想首先使用模态窗口上的按钮来提交表单，然后当提交成功时，只需单击同一个按钮即可关闭模态窗口。这是使用 2 个按钮（一个用于提交，第二个用于关闭，只需切换它们）的解决方法。但是，如果有任何机会使用 1 个按钮进行 2 个选项，如果您明白我的意思。谢谢
我建议使用 $(".btn[type='submit']").hide() 隐藏此按钮并创建另一个用于关闭的按钮。

标签： javascript jquery ajax submit formclosing

【解决方案1】：

更好的方法是不更改现有按钮，而是将其隐藏并显示另一个。

HTML：

<div class="clearfix">
    <div class="input-group">
        <button type="submit" class="btn">Generate</button>
        <button type="button" class="btn btn-close hide">Close</button>
    </div>
</div>

JS：

$('#frmGenerate').find('.btn').hide();
$('#frmGenerate').find('.btn-close').show();

【讨论】：

谢谢，我知道这个解决方案，如果你认为这个更好，那么我会使用它）
这样更好，因为你有更多的灵活性。您可以轻松拥有不同的风格。 Javascript 代码不与表示混合。

【解决方案2】：

取决于您使用的按钮类型。按钮必须使用像：<button></button> 不像<button/>

然后使用：

 $(".btn").html('Close');

【讨论】：

我使用<button></button>

【解决方案3】：

你可以改变按钮的属性

 $('#frmGenerate').find('button.btn').attr('type', 'button');

然后：

$('#frmGenerate').find('button.btn').on('click', function(){ /*close function */});

【讨论】：

【解决方案4】：

我看到您在提交表单后将按钮的文本更改为“关闭”。所以剩下的部分就是处理按钮点击事件的jQuery了。

....

     $('.btn').click(function(){
         var buttonText = $(this).val();
         if(buttonText === 'Close'){
         //code when close button is clicked
         }else if(buttonText === 'Generate'){
            //code when Generate button is clicked...
         }
      });//end button.click function

我会使用 input type='button' 或 button 而不是 input type='submit'。为什么不也使用 ajax 提交表单？好多了。

希望这会有所帮助...

【讨论】：