jquery appending instead of an alert message

Question

I wan to display a message into a div rather than alert it, then hide it on click/blur The alert is popping up due to an error of typing. I need to display a message into a div and not an alert.

Something like:

$('form.form-calculator input').on('change click', function() {
        if ($(this).val() == 0) {
            var div = $("#AlertMessage");
            div = $("<div id='AlertMessage' onclick='$(this).hide();'></div>");
            $("body").prepend(div);
            this.value=0;
        }
        calc_total();
    });

With the Alert

 $(function () {
       $('.form input').on('change click focus', function () {
          if ($(this).val() == 0) {
            alert('HELLO');
            this.value = 0;
          }
          calc_total();
       });
    });

its very unclear what you are trying to do.. this is my best guess based on what you have (although it doesnt make much sense to me) http://jsfiddle.net/ccnch/ — Smern, Apr 11 '13 at 15:03
what loop? you have not indicated specifically what you want and what you don't want. — Smern, Apr 11 '13 at 15:14
The alert is popping up due to an error of typing. I need to display a message into a div and not an alert. — DD77, Apr 11 '13 at 15:16

score 0 · Answer 1 · answered Apr 11 '13 at 14:57

Assuming both pieces of your code work (since you didn't ask to troubleshoot those), you can just combine those into one like this:

 $(function () {
       $('.form input').on('change click focus', function () {
          if ($(this).val() == 0) {
            div = $("<div id='AlertMessage' onclick='$(this).hide();'>HELLO</div>");
            $("body").prepend(div);
            this.value = 0;
          }
          calc_total();
       });
    });

score 0 · Accepted Answer · edited Apr 11 '13 at 15:36

0

$(function () {
    $('.form input').on('focusout', function () {
        if ($(this).val() == 0) {
            showError('Hello');
        } else {
            $("#AlertMessage").remove();
        }
        calc_total();
    });

    function showError(text) {
        $("#AlertMessage").remove();
        $('<div/>', {
            id: 'AlertMessage',
            text: "Alert! It can't be 0"
        }).prependTo('body');
        // Close on click
        $('body').delegate('#AlertMessage', 'click', function () {
            $(this).hide();
        });
    }
});

edited Apr 11 '13 at 15:36

DD77

1,367
2
13
25

answered Apr 11 '13 at 15:00

Axel A. García

683
9
21

it should be integrated to my code. $('.form input').on('change click focus', function () { if ($(this).val() == 0) { alert('HELLO'); this.value = 0; } calc_total(); }); – DD77 Apr 11 '13 at 15:08

jquery appending instead of an alert message

2 Answers2