change maxlength depending of the option selected

Posted by tuner3000 on Stack Overflow See other posts from Stack Overflow or by tuner3000
Published on 2012-12-19T16:57:24Z Indexed on 2012/12/19 17:03 UTC
Read the original article Hit count: 228

Filed under:
|
|

I've seen similar questions posted and tried to change them to meet my needs but I don't know enough about javascript to do it. I need that when a user change the dropdown select, the "titre text field" maxlength is dynamically changed

a, b c and d max maxlength should be 40 and e maxlength should be 2

my code is below, I don't know why but it is not working correctly:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>title page</title>
    </head>
    <body>
<script type="text/javascript">
function changeValue(dropdown) {
    var option = dropdown.options[dropdown.selectedIndex].value,
    field = document.getElementById('titre');

    if (option == 'a' || option == 'b' || option == 'c' || option == 'd') {
        field.maxLength = 40;
    } else if (option == 'e') {
        field.value = field.value.substr(0, 2); // before reducing the maxlength, make sure it contains at most two characters; you could also reset the value altogether
        field.maxLength = 2;
    }
}?
</script>
        <form action="converter.php" method="post">
            <h2>Feel all field below:</h2>
            <div>
                Title: <input type="texte" name="titre" id="titre" maxLength="40"/>  Format: 
                <select id="format" name="format" onchange="changeValue(this);">
                    <option value="a">A</option>
                    <option value="b">B</option>
                    <option value="c">C</option>
                    <option value="d">D</option>
                    <option value="e">E</option>
                </select>
            </div>
            <div>
                <textarea name="texte" style="width: 415px; height: 155px;"></textarea>
            </div>
            <div>
                <input type="submit" value="OK" />
            </div>
        </form>
    </body>
</html>

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html