Rename Button

by Dan Wright

HTML

<form action="" method="post" id="form1">
    <input class="area" type="button" name="key1" value="The_New_Expected_1_Performance" />
</form>

CSS

input, button {
    width:200px;
    height:60px;
}

JavaScript

var stringLength = $("#form1").click(function () {

    var value = $('.area').attr('value');
    //alert(value);
    var newValue = value.replace(/_/g, ' ');
    //alert(newValue);
    $('.area').attr('value', newValue);

    var maxChar = 15;
    //alert(maxChar);

    var newestValue = newValue;
    //alert(newestValue);
    
    if (newestValue.length > maxChar) {
        //alert('length of: ' + newestValue + ' over 20');
        var newInput = newestValue.slice(0, 15);
        //alert('newInput: ' + newInput);
        $('.area').attr('value', newInput);
    } else {
        alert('length of ' + newestValue + ' under 20');
    }

});