CODEWITHSUNDEEP
javascripthtmlinternet-explorercross-browser
Marm
Marm

Reputation: 873

HTML - I cannot write in some textboxes shown dynamically by javascript in internet explorer

I have 2 forms on my page.

The first one is always visible and the second one is hidden at first.

When the user clicks a specified radio option, the second form shows up.

In Chrome and Firefox, everything is fine, but in IE, the form shows, but I cannot write inside the textboxes fields.

The wierdest thing is that I can erase everything inside the textboxes but I cannot add anything.

Here is some code:

The first form:

<form name="calendar" action="" method="post">
    <input type="text" name="n" />
    <input type="radio" name="t" value="0" onclick="showSecondForm();" />Option 1
    <input type="radio" name="t" value="1" onclick="showSecondForm();" />Option 2
    <input type="radio" name="t" value="2" onclick="showSecondForm();" />Option 3
    <input type="submit" name="submit" value="Submit" onclick="onSubmitAction();return false;">
</form>

The function showSecondForm() checks if option 3 is checked and if so, it shows the second form.

The second form is:

<div id="customForm" style="display: none;">
    <form name="custom" action="" method="post">
        <input type="text" name="a" />
        <input type="text" name="b" />
        <input type="text" name="c" />
        <input type="text" name="d" />
        <input type="text" name="e" />
    </form>
</div>

The forms will never submit because everything I have to do is in javascript and I can reach both forms easilly. All my code is working fine except for the typing in textboxes in ie.

My javascript

<script type="text/javascript">
    function showSecondForm() 
    {
        if(document.calendar.t[2].checked)
        {
            document.getElementById('customForm').style.display = 'block';
        }
        else
        {
            document.getElementById('customForm').style.display = 'none';
        }
    }
</script>

Upvotes: 1

Views: 2454

Answers (2)

Marm
Marm

Reputation: 873

In browsers like Google Chorme and Mozilla Firefox, when you put a maxlenght of 0 on a text input field, the textbox lenght is "unlimited". In Internet Explorer, it is really 0, so you cannot write anything in it.

So the code must be:

<div id="customForm" style="display: none;">
    <form name="custom" action="" method="post">
        <input type="text" name="a" maxlength="255" />
        <input type="text" name="b" maxlength="255" />
        <input type="text" name="c" maxlength="255" />
        <input type="text" name="d" maxlength="255" />
        <input type="text" name="e" maxlength="255" />
    </form>
</div>

Upvotes: 2

Mike
Mike

Reputation: 381

Try this:

<script type="text/javascript">
    function showSecondForm() {
        document.getElementById('customForm').style.display='block';
    }
</script>

Upvotes: 0

Related Questions