CODEWITHSUNDEEP
javascriptjquery
user791187
user791187

Reputation: 717

property disabled and html

This seems like a fairly simple thing, but the issue has been giving me some trouble for a long time now. I have a submit button that is 'disabled' when a select list value is 'select'. What I want is to html('select an area')...but the button is disabled. Here is the code:

<script>
//setting the variable for first-shown select value
var selVar = $('#areaSel').val();
//disabling submit if first-shown value is 'select'
if(selVar == 'select'){
    $('#areaSubmit').prop('disabled',true);
}
//setting the variable if the selection changed & disabling submit if = 'select'
$('#areaSel').change(function(){
    var selVar = $('#areaSel').val();
    if(selVar == 'select'){
       $('#areaSubmit').prop('disabled',true);
    //removing 'disabled' submit if selection !== select
    }else{
        $('#areaSubmit').prop('disabled',false);
    }
});
    //giving the message to 'select an area
$('#areaSubmit').click(function(){
    var selVar = $('#areaSel').val();
    if(selVar == 'select'){
    $('#areaE').html('select an area');
    }
});
</script>

Im just trying to make the message 'select an area' appear instead of submitting when clicked. The problem is that the button is disabled when 'select' is selected. Thanks in advance for the help!

Upvotes: 0

Views: 73

Answers (2)

VIDesignz
VIDesignz

Reputation: 4783

Here you go, I believe this is what your after.

//giving the message to 'select an area
$('#areaSubmit').click(function(event){
    event.preventDefault();
    selVar = $('#areaSel').val();
    if(selVar == 'select'){
    $('#areaE').html('select an area');
    }else{$('#form').submit();
    }
});

Upvotes: 0

Hojat Jafari
Hojat Jafari

Reputation: 53

while the submit button is disabled click event won't fire;so the html of your tag won't change. move the code relative to changing the content of 'areaE' to some where else, may be the change event of your select

http://jsfiddle.net/QFWYE/1/

var selVar = $('#areaSel').val();
//disabling submit if first-shown value is 'select'
if(selVar == 'select'){
    $('#areaSubmit').prop('disabled',true);
}
//setting the variable if the selection changed & disabling submit if = 'select'
$('#areaSel').change(function(){
    var selVar = $('#areaSel').val();
    if(selVar == 'select'){
       $('#areaSubmit').prop('disabled',true);
         $('#areaE').html('select an area'); 
    //removing 'disabled' submit if selection !== select
    }else{
        $('#areaSubmit').prop('disabled',false);
         $('#areaE').html(''); 
    }
});
    //giving the message to 'select an area
$('#areaSubmit').click(function(){
    var selVar = $('#areaSel').val();
});

Upvotes: 1

Related Questions