CODEWITHSUNDEEP
jquery
John the Ripper
John the Ripper

Reputation: 2439

Change the text in a div using jquery after form submit

Edit I realized my error shortly after posting this. The append should be html() or text()

Partial code:

<script type="text/javascript" language="javascript">
        $(document).ready(function(){
            $('#resetpassword').validate(
            {rules: {
                secretAnswer: {
                    required: true
                }
            },

            messages: {
                secretAnswer: {
                    required: "Please answer your security question"
                }
            },
            submitHandler: function(form){
                $.post("../BackgroundOperations/resetpassword.php",
                    $('#resetpassword').serialize(),
                    function(data){
                        if(data.status == 0){
                            $('#message').append("<span class='error'>Error: " + data.message + "</span>");
                        }
                        else{
                            $('.container').hide();
                            $('.short_explanation').hide();
                            $('#message').text(data.message);
                        }
                    },
                "json");
            }
            });
        });
    </script>
</head>
<body>

<!-- Form Code Start -->
<div id='fg_membersite'>
<form id='resetpassword' method='post' accept-charset='UTF-8'>
<fieldset >
<legend>Reset Password</legend>

<div class='short_explanation'>* required fields</div>
<input type='text'  class='spmhidip' name='<?php echo $vm->GetSpamTrapKey(); ?>' />

<div id="message"></div>
<div class='container'>
    <label for='emailAddress' >Email Address:</label><br/>
    <input type='text' name='emailAddress' id='emailAddress' maxlength="100" readonly="true" value="<?php echo $vm->GetEmailAddress() ?>" /><br/>
</div>
<div class='container'>
    <label for='secretQuestion' >Security Question:</label><br/>
    <input type='text' name='secretQuestion' id='secretQuestion' value='<?php echo $vm->GetSecretQuestion() ?>' maxlength="100" readonly="true" width="100" /><br/>
</div>
<div class='container'>
    <label for='secretAnswer' >Answer:</label><br/>
    <input type='text' name='secretAnswer' id='secretAnswer' maxlength="50" /><br/>
</div>
<div class='container'>
    <input type='submit' name='Submit' value='Submit' />
</div>

</form>

I'm testing invalid input (wrong security answer). When I put the wrong answer and submit the form the <div id="message"> gets updated with the error message, but if I keep submitting invalid data the <div id="message"> keeps the old error message with a new one added on the end instead of having just a single message.

Upvotes: 0

Views: 1269

Answers (1)

Ankur
Ankur

Reputation: 12774

Instead of 

$('#message').append("<span class='error'>Error: " + data.message + "</span>");

use 

$('#message').html("<span class='error'>Error: " + data.message + "</span>");

Upvotes: 2

Related Questions