繁体   English   中英

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

[英]Remove button on submit (after validation) using jquery

我有一个使用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>

您可以尝试使用.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/

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM