使用jquery删除提交(验证后)按钮

时间:2014-01-14 13:21:32

标签: javascript jquery forms

我有一个使用jquery验证的表单。只有在经过验证后才能提交按钮吗?因此,只有在执行帖子时才将其删除。

知道要添加什么吗?

我尝试了.hide(),但它没有删除按钮。

谢谢!

我的代码:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">

<meta charset="utf-8">
<title>Form</title>
</head>
<script type="text/javascript" src="js/validate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){

    // initialisatie formulier validatie. (zie http://rickharrison.github.io/validate.js)
    var validator = new FormValidator('form', [{
        name: 'voornaam',
        display: 'Voornaam',    
        rules: 'required'
    }, {
        name: 'achternaam',
        display: 'achternaam', 
        rules: 'required'
    },{
        name: 'telefoonnummer',
        display: 'telefoon', 
        rules: 'required|numeric'
    },{
        name: 'email',
        display: 'email', 
        rules: 'required|valid_email'
    }], function(errors, event) {
        var berichten = document.getElementById('fout');

        berichten.innerHTML = '';

        // als er fouten zijn:
        if (errors.length > 0) {
            for (var i = 0, l = errors.length; i < l; i++) {
                berichten.innerHTML += errors[i].message + '<br>';
            }
        // als de validatie goed gegaan is:
        } else {
            var voornaam = $('#voornaam').val();
            var achternaam = $('#achternaam').val();
            var telefoonnummer = $('#telefoonnummer').val();
            var email = $('#email').val();

            $.post('action.php',{action: "button", voornaam:voornaam, achternaam:achternaam, telefoonnummer:telefoonnummer, email:email},function(res){
                $('#result').html(res);
            });
            document.getElementById('goed').innerHTML = 'Verstuurd!';   
        }

        // voorkom ten allertijde dat het formulier daadwerkelijk ge-submit wordt!
        event.preventDefault();
    });
});
</script>
<body>
<div id="wrap">
<table>
<td>
    <form name="form">
        <tr>
        <p class="names">Voornaam:</p> <p><input type="text" name="voornaam" id="voornaam"></p>
        </tr>
        <tr>
         <p class="names">Achternaam:</p> <p><input type="text" name="achternaam" id="achternaam"></p>
        </tr>
        <tr>
         <p class="names">Telefoonnummer:</p> <p><input type="text" name="telefoonnummer" id="telefoonnummer"></p>
        </tr>
        <tr>
         <p class="names">Emailadres:</p> <p><input type="text" name="email" id="email"></p>
        </tr>
        <tr>
          <input class="knop" type="submit" name="insert" value="Opsturen" id="insert">
        </tr>
    </form>
</td>
</table>
<br>
<div id="fout"></div>
</div>
<div id="goed"></div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

您可以尝试使用.remove()方法。我不知道你是否想要它在帖子的成功回复中。

        // ...
        var email = $('#email').val();

        $('#insert').remove();

        $.post('action.php',{action: "button", voornaam:voornaam, achternaam:achternaam, telefoonnummer:telefoonnummer, email:email},function(res){
        // ...

jQuery.remove:http://api.jquery.com/remove/