Question

I have 2 jQuery snippets 1st is toggle readonly and the 2nd is a submit form.

Toggle readonly:

$('#lock').toggle( function () {
    $('#handle').attr('readonly', true).addClass('disabled');
return false;
 } , function() {
  $('#handle').attr('readonly', false).removeClass('disabled');
return false;
});

Submit form:

$('button').click(function() {
var handle     = $('#handle').val();
var msg        = $('#msg').val();
var dataString = 'handle='+ handle + '&msg=' + msg;

if(handle=='' || msg=='') {
$('.error').fadeOut(200).show();
} else {

$.ajax({
  type    : 'POST',
  url     : 'form.php',
  data    : dataString,
  success : function(){
$('#foo').load('page.php');
}}
 });
}
 return false;
});

What I am trying to achieve is

if readonly = true do not reset “handle” value

otherwise reset both, so I need to get the status of the 1st snippet (toggle readonly) and allow the 2nd (form) to distinguish whether its true or false.

I tried this in success: but it didn’t work.

if($('#handle').attr('readonly', true)){
    $('#msg').val('');
    }else{
    $('#handle, #msg').val('');

Answer 1

Try this code instead:

if ($('#handle').is('[readonly]')) {
    $('#msg').val('');
}
else {
    $('#handle, #msg').val('');
}

Also for use

​$('#handle').prop('readonly', true)

instead of

$('#handle').attr('readonly', true)