Leon
Leon

Reputation: 6544

Disabled button on click with jquery mobile

html:

    <script src="http://zurb.com/playground/javascripts/plugins/jquery.textchange.min.js"></script>
<form>
        <input type="text" name="comment" id="comment" placeholder="Comment" maxlength="140" value=""/>
      <div id="charactersLeft"></div>
        <input type="submit" id="commentButton" data-icon="edit" data-inline="true" data-mini="true" data-theme="b" value="Send" disabled="disabled"/>
    </form>
    <div id="actionList">
    </div>

js:

$('#comment').bind('hastext', function () {
  $('#commentButton').button('enable');
});

$('#comment').bind('notext', function () {
  $('#commentButton').button('disable');
});

$('#comment').bind('textchange', function (event, previousText) {
  $('#charactersLeft').html( 140 - parseInt($(this).val().length) );
});

  $('#commentButton').click(
    function(){
        $('#actionList').prepend('<p class="item">' + $('input[name=comment]').val().trim() + '</p>');
        $('#commentForm').each (function(){ this.reset(); });
        //document.getElementById('commentForm').reset();
        $(this).button('disable');
    }
);

On Fiddle its works another, that on my machine. So, test local. The problem is: when I write a comment, than I click on the button, comment apears in #actionList, the button blocked. Nice. But. If I want to write a new comment, the button will be disabled. I have text in input, but I cant click button. I deleted my new text in input, and than I can write something and button finally enabled.

Its very strange, how to fix it? Thanks.

Upvotes: 0

Views: 409

Answers (1)

Nev
Nev

Reputation: 1568

I added the line, to remove comment once posted:

$('#comment').val("");

I also replaced your hastext and notext functions with this code, added in the textchange function:

var tb_value = this.value;
if (tb_value == "") {
    $('#commentButton').button('disable');
} else {
    $('#commentButton').button('enable');
}

See the Fiddle.

Upvotes: 1

Related Questions