ajax，html和javascript

how can I make the both messages (good and bad) replaced ? let say if data in field is corrent display good and if not - display bad but than if I change it again so the message will change accordingly.

(Im new to all this)

$(document).ready(function () {
        $('#button').click(function(e){
            var result = true,
                ok = '<p>good</p>',
                failed = '<p>bad</p>',
                err;
            $('input').each(function(index,obj){
                var obj =   $(obj);
                if (obj.attr('id') == 'button'){
                    return false;
                }
                err =  validateInput(o);
                markInput(o,err);
                if (!err){
                    result = false;
                }
            });
            if (result){
                $('#myForm').after(good);
                $.ajax();
            }
            else{
                $('#myForm').after(bad);
                $.ajax();
            }

        });

Instead of using .after have an element that acts as a placeholder for the message and update its html:

<form>
    <!-- all your code -->
    <p id="message"></p>
</form>

// JavaScript
$("#myForm #message").html(good);
// also just `$("#message")` will work, and you can probably leave
// the `<p>` parts off of `good` and `bad`

Change:

 if (result){
                $('#myForm').after(good);
                $.ajax();
            }
            else{
                $('#myForm').after(bad);
                $.ajax();
            }

To:

 if (result){
                $('#myForm').after(ok);
                $.ajax();
            }
            else{
                $('#myForm').after(failed);
                $.ajax();
            }

You didn't use the vars you created, named "ok" and "failed", instead you put "good" and "bad" in your .after() which don't exist. Also consider using $('#messagePlaceHolder').replace(ok or fail) instead of .after where messagePlaceHolder is a .