jQuery if input value is default, prevent default on submit

Question

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.

Sorry, what are you trying to achieve here? Do you want to prevent the post if the value in the textbox hasn't changed? — Nikhil
– Nikhil, Commented Mar 1, 2011 at 11:46

Delan Azabani · Accepted Answer · 2011-03-01 11:51:33Z

7

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'))

edited Mar 1, 2011 at 11:51

answered Mar 1, 2011 at 11:43

Delan Azabani

81.8k30 gold badges174 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Kyle Over a year ago

@Delan; jsfiddle.net/Kyle_Sevenoaks/69HjD/1 I inserted your suggested code, now it doesn't display the alert. @Ryan: I did that also and it just changed the value as before.

Delan Azabani Over a year ago

Sorry, there's a minor syntax error in my answer. Try again now.

Delan Azabani Over a year ago

You've made an error copying my answer. You wrote if ($("#company").val('defaultValue'), but my answer is if ($("#company").val() == 'defaultValue')).

Kyle Over a year ago

Corrected but still no dice. :/ jsLint returned: Problem at line 2 character 47: Expected '{' and instead saw ')'. if ($("#company").val() == 'defaultValue'))

Delan Azabani Over a year ago

You copied my answer wrong again. Remove the last closing parentheses.

|

Matt · Accepted Answer · 2012-04-26 09:05:58Z

3

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/

edited Apr 26, 2012 at 9:05

Matt

75.4k26 gold badges156 silver badges181 bronze badges

answered Mar 1, 2011 at 11:54

Marcel

28.1k9 gold badges73 silver badges85 bronze badges

2 Comments

Kyle Over a year ago

Unfortunately I can't use this right now. Bosses and such. But thanks for the tip :)

Marcel Over a year ago

That's a shame, it's quite a beautiful thing.

Kyle · Accepted Answer · 2011-03-01 12:00:30Z

1

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?

edited Mar 1, 2011 at 12:00

Kyle

67.5k28 gold badges148 silver badges153 bronze badges

answered Mar 1, 2011 at 11:52

RyanP13

7,79328 gold badges102 silver badges172 bronze badges

Comments

Nikhil · Accepted Answer · 2011-03-01 12:46:02Z

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;
    }
});

Collectives™ on Stack Overflow

jQuery if input value is default, prevent default on submit

4 Answers 4

8 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related