发送表单并禁用提交按钮时发出问题

时间:2015-09-02 20:44:31

标签: php jquery html5

我有这样的表格:

<form id="register-form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
    <label>Name <span style='color: red'>*</span><br/>
        <input type='text' name='user_name'/>
    </label>
    <label>Email <span style='color: red'>*</span><br/>
        <input type='text' name='user_email'/>
    </label>
    //Another form elements
    <button name='register' type='submit'>Register</button>
</form>

要处理表单,我使用:

if(isset($_POST['register']))
{
    //Process
}

我需要的是在用户点击它时禁用register按钮。我找到了这个解决方案:

$('#register-form').submit(function()
{
    $(this).find(":submit").attr('disabled', 'disabled');
});

使用这个jQuery代码,单击它时按钮被禁用,但PHP不处理表单。如何解决?

5 个答案:

答案 0 :(得分:1)

我通过使用一点点黑客找到了解决方案 怎么样?我在名为register的表单中创建了一个隐藏的输入。

<form id="register-form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<label>Name <span style='color: red'>*</span><br/>
    <input type='text' name='user_name'/>
</label>
<label>Email <span style='color: red'>*</span><br/>
    <input type='text' name='user_email'/>
</label>
//Another form elements
<input type='hidden' name='register'/>
<button id='register'>Register</button>
</form>

现在我用jQuery发送表单:

$('#register').click(function()
{
    $('#register-form').submit();
    $(this).prop('disabled', true);
});

使用此技巧不会禁用提交表单的按钮,只会禁用调用该功能的按钮。然后PHP可以处理表单:

if(isset($_POST['register']))
{
    //Process
}

答案 1 :(得分:0)

如果您使用的是jQuery 1.6或更高版本,则应使用.prop()方法修改属性:

$('#register-form').submit(function(){
    $(this).find(":submit").prop( "disabled", true );
});

这是example

答案 2 :(得分:0)

也许这可行。

HTML:

    function setWemo(status) {

    WinJS.xhr({ url: "<url>" }).then(function () {
        var userMessage = new voiceCommands.VoiceCommandUserMessage();

        userMessage.spokenMessage = "Light is now turned " + status;

        var statusContentTiles = [];

        var statusTile = new voiceCommands.VoiceCommandContentTile();
        statusTile.contentTileType = voiceCommands.VoiceCommandContentTileType.titleOnly;
        statusTile.title = "Light is set to: " + status;

        statusContentTiles.push(statusTile);

        var response = voiceCommands.VoiceCommandResponse.createResponse(userMessage, statusContentTiles);

        return voiceServiceConnection.reportSuccessAsync(response);

    }).done();

}

Jquery的:

 <form action="<?=$_SERVER['PHP_SELF']?>" method="post">
 <input name='register' type='submit' id="register-form" />Register
//I remove the **ID Attribute** from the form and put it in the button.

或者Jay Blanchard说如果版本是1.6

 $('#register-form').on('submit', function(){
   $(this).attr('disabled', true);
 });

答案 3 :(得分:0)

我认为你需要这个解决方案:

 <html> 
 <head> 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js">   </script> 
  <script src="http://malsup.github.com/jquery.form.js"></script> 

  <script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#register-form').ajaxForm(function() { 

            $('#register-form').find(":submit").prop( "disabled", true );

        }); 
    }); 
    </script> 
   </head> 

    <form id="register-form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
   <label>Name <span style='color: red'>*</span><br/>
   <input type='text' name='user_name'/>
   </label>
   <label>Email <span style='color: red'>*</span><br/>
   <input type='text' name='user_email'/>
   </label>
   //Another form elements
   <input type='hidden' name='register'/>
   <button id='register'>Register</button>
  </form>

我从这里得到了http://malsup.com/jquery/form/

请尝试将操作更改为目标页面,而不是同一页面,然后进行任何查询以插入这些帖子变量以确保它们被正确发布

答案 4 :(得分:0)

在您的表单中,将ID放在您的按钮和表单中。

<form class='Register-form' id="register-form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
    <button id='Register' name='register' type='submit'>Register</button>
</form>

在你的功能中

$('form.Register-form #Register').click(function(e){
    e.preventDefault();
    $('#register-form').submit();
    $(this).prop('disabled', true);
});