CODEWITHSUNDEEP
jqueryhtmlinputdefault-value
Kyle
Kyle

Reputation: 67194

jQuery if input value is default, prevent default on submit

I have a form, I want to disable the submit function if the input's value is default.

<input id="company" name="companyname" value="company">
<input type="submit" class="button">

I tried this jquery: 

$(".button").click(function(e){
    if($("#company").attr('value', 'defaultValue'))
       {
           alert("Please fill out the contact form."); 
           e.preventDefault();
       }
   });

But it doesn't work as expected, it fires and brings up the alert as intended but also changes the value of the input to "defaultValue."

I am stumped :) What am I doing wrong?

You can see it in action here.

Upvotes: 1

Views: 9839

Answers (4)

Marcel
Marcel

Reputation: 28087

If the default value is simply there as a prompt to change the value, if possible consider using the new HTML5 placeholder attribute. You can even use jQuery to help browsers that don't support it yet. This way you don't need to bother checking if it is a default value.

Demo: http://jsfiddle.net/Marcel/pKBMu/

Upvotes: 3

Nikhil
Nikhil

Reputation: 3384

Right I know this has been answered but I had some time so I wrote up a quick framework that would let you track changes easily. Basically what this will do is to monitor all input elements that you have on the form and will visually track their changes by giving them a special class when the value is changed. Thus at a glance the user can see what they have changed. Further this small framework would also stop you from posting the form back if none of the input elements have changed. You can expand this framework to include more elements by changing the selector!

.changedValue
{
    border-bottom: 1px solid #0c5403 !important;
    background: #e1fedd !important;
}

<input id="company" name="companyname" value="company"/>
<input type="submit" class="button"/>

$('input').live('focusin', function() {
    var tx = this,
        jqt = $(tx);

    //store the original value if we don't already have it
    if (typeof(tx.defaultValue) == 'undefined') {
        tx.defaultValue = tx.value;
    }

})
//control change
.live('focusout', function() {
    var t = this,
        jqThis = $(t);
    jqThis[t.defaultValue != t.value ? 'addClass' : 'removeClass']('changedValue');


});


$(".button").click(function(e) {
    if ($("input.changedValue").length == 0) {
        alert("Please fill out the contact form.");
        e.stopPropagation();
        e.preventDefault();
        return false;
    }
});

Upvotes: 1

RyanP13
RyanP13

Reputation: 7743

Try this with .val():

http://jsfiddle.net/69HjD/2/

You're probably going to want to extend this further so perhaps look at a validation plugin for jQuery?

Upvotes: 1

Delan Azabani
Delan Azabani

Reputation: 81384

With

if ($("#company").attr('value', 'defaultValue'))

You're setting the value to defaultValue. Do this instead:

if ($("#company").attr('value') == 'defaultValue'))

Thanks Ryan: it's probably better to use .val() instead of .attr('value') in case the current value has changed since the value specified in the HTML attribute, and jQuery doesn't handle that specially.

Do this:

if ($("#company").val() == 'defaultValue'))

Upvotes: 7

Related Questions