Cant detect input box when nothing is entered

Question

I have the following form and input box. However, when there is nothing in the input box, the javascript doesn't execute. I need to detect if someone clicked "submit" without filling in the form. I have tried many things I've found on SO and none have worked. When there is an input value, everything works perfectly to execute the js. However, when there is nothing, the console.log(bidz) doesn't produce anything and it appears as if the script quits. From what I've read, I understand that the input box doesn't exist without a value in it. But then I tried to say if it doesn't exist, then something, but that also didn't work.

Perhaps this has to do with the fact that I give it a placeholder value of "enter something?"

 <form action="" method="post">
        <div id="<?php echo $this->item['id']; ?>">
            <div class="ab">
                <label for="ab_input"><?php echo $this->translate('To get the auction started, you must enter a starting bid.'); ?></label>
            <span class="auction_bid_container">
                <input id="ab_input" type="text" maxlength="12"
                       class="middle nmr event-clear-focus"
                       name="bidz" value="Enter something" />
                <input id="updateBidButton" type="submit"
                       class="button grey-button num-items-button"
                       name="bidz" 
                       value="<?php echo $this->translate('submit'); ?>"/>
            </span>
            </div>
        </div>
    </form>
    <div class="clear mb20"></div>

and here is my js function. I have tried all kinds of things but it appears "this.value" results in an error if there is no value:

    $('input[name="bid_amount"]').live('change', function () {
        var bidz = this.value;

        console.log(bidz);

        $.ajax({
            type: 'post',
            url: "?module=is&controller=index&action=syy",
            dataType: "text",
            data: 'bid=' + bid_amount + '&id=' + id,
            beforeSend: function () {
                $('.ab').animate({
                    'backgroundColor': '#ffdead'
                }, 400);
            },
            success: function (result) {
                if (result == 'ok') {
                    console.log(bid_amount);

                    $('.ab').animate({
                        'backgroundColor': '#A3D1A3'
                    }, 300);
                } else {
                    $('.ab').animate({
                        'backgroundColor': '#FFBFBF'
                    }, 300);
                }
            }
        });
    });

Answer 1

You are submitting the form either way, that's why! So, what you have to do is to stop the form from being submitted. How?

You can add onsubmit=" return false; " to your form

<form action="" method="post" onsubmit=" return false; ">
</form>

submit.addEventListener("submit", form, function(){
    e.preventDefault(); /* This will prevent the form from being sent until you explicitly send it. */
});

If you are sending the form through ajax there is no need to submit the actual form (meaning form.submit() )