SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ERROR when trying to change Form field type change in IE

    I have a function as below that changes the form field type when a a button is clicked. It works on Mozilla and all other browsers but not on IE, how do I get around it to work in IE?
    All I want is to show the fields only when MORE_CHECK button is clicked..

    Thanks very much..

    function formMoreCheck() {
    document.main.p_showCheck.type = "hidden";
    document.main.p_check2.type = "text";
    document.main.p_check_date2.type = "text";

    }

    <input type="button" name="p_showCheck" value="More_Check" onclick="javascript:formMoreCheck()";>


    <!-- THIS ARE THE FIELDS I WANT TO CHANGE THE TYPE DEPENDING ON BUTTON CLICKED -->
    <input type="text" name="p_check2" size="10" maxlength="10" value="Some_value">
    <input type="hidden" name="p_check_date2" size="10" maxlength="10" value="Some_value">

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE has all kinds of restrictions on changing any elements with a 'name' attribute.
    (IE8 promises to act like the other browsers)
    There is of course an IE specific hack- you have to replace the entire element with a createElement(string of innerHTML).

    It is usually simpler to have 'alternate' fields in the source with display set to 'none'-they won't get submitted with that display value.
    Then toggle the display of the fields you want to show or hide.

    Otherwise, google 'IE input name change'-

  3. #3
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your response..
    Tried to research based on your feedback..
    Can you give me an example based on my code how I would do that. I am not very big on advanced HTML..

    Thanks

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The type property is readonly, so this is one of the few instances where IE does the right thing while Firefox and Opera do not.

    You can change the type property of an input element as long as it doesn't have a parent. As soon as you use appendChild() or insertBefore() to add it as a child of another element, you can't change the type.

    Try removing the element, changing the type and adding it back again. (I'm on Linux at home, so I can't test in IE right now.)
    Birnam wood is come to Dunsinane

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That's interesting. What is the reasoning behind making it readonly once it's in the DOM tree?

  6. #6
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK You all are thinking that I have some good background on DOM , HTML stuff.. I am a back end developer with very little exposure to client side programming.. Keeping this in mind, can you give me a code example based on my original code.. I tried to do reading and I am still stuck on putting some element I supposedly created using createElement()..
    Please please help.. with example or code sample..


    Thanks very much

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Let us first clarify the desired behaviour here.

    You want the button to reveal more fields to be filled in, and for the button to then disappear.

    The first consideration is what occurs when there is no javascript. Should that be the case, there will be no use or need for the button, because you won't be able to action anything without scripting being available. You will also want those fields to be visible so that they can be filled in.

    This means that when there is javascript, it is the scripting itself that should provide the button and hide the fields, in preparation for when the button is clicked.

    Because the text fields should be visible when there is no scripting, they should not have a hidden type at all. Instead, they should have a normal text type, and use css to hide them from display until you're ready to show them.

    So what are we starting with? The fields as we want them to appear without javascript.

    Code html4strict:
    <input type="text" name="p_check2" size="10" maxlength="10" value="Some_value">
    <input type="text" name="p_check_date2" size="10" maxlength="10" value="Some_value">

    Now we need to add the More_Check button just before these fields, and while we're at it we're going to hide the input fields as well.

    This script should be placed at the end of the body, so that fancy techniques to access page elements aren't required to be used.

    Code javascript:
    var check2 = document.main.p_check2;
    var checkDate2 = document.main.p_check_date2;
    // create button
    var button = document.createElement('input');
    button.type = 'button';
    button.id = 'moreCheckButton';
    button.value = 'More_Check';
    button.onclick = formMoreCheck;
    check2.parentNode.insertBefore(button, check2);
    // hide input fields
    check2.className = 'hidden';
    checkDate2.className = 'hidden';

    When you click on the button, we want the button to go away, and for the hidden fields to reveal themself.

    Code javascript:
    function formMoreCheck() {
        var button = document.getElementById('moreCheckButton');
        var check2 = document.main.p_check2;
        var checkDate2 = document.main.p_check_date2;
        button.parentNode.removeChild(button);
        check2.className = '';
        checkDate2.className = '';
    }

    The full test code for this is as follows. Note that css and javscript should be placed in external files.

    Code html4strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <head>
    <style type="text/css">
    .hidden {
    	display: none;
    }
    </style>
    </head>
     
    <body>
    <form name="main">
    <input type="text" name="p_check2" size="10" maxlength="10" value="Some_value">
    <input type="text" name="p_check_date2" size="10" maxlength="10" value="Some_value">
    </form>
    <script src="js/morebutton.js"></script>
    </body>
    </html>

    js/checkbutton.js

    Code javascript:
    // anonymous function closure used to
    // prevent pollution of the global namespace
    (function () {
        var check2 = document.main.p_check2;
        var checkDate2 = document.main.p_check_date2;
        // create button
        var button = document.createElement('input');
        button.type = 'button';
        button.id = 'moreCheckButton';
        button.value = 'More_Check';
        button.onclick = formMoreCheck;
        check2.parentNode.insertBefore(button, check2);
        // hide input fields
        check2.className = 'hidden';
        checkDate2.className = 'hidden';
        function formMoreCheck() {
            var button = document.getElementById('moreCheckButton');
            var check2 = document.main.p_check2;
            var checkDate2 = document.main.p_check_date2;
            button.onclick = null;
            button.parentNode.removeChild(button);
            check2.className = '';
            checkDate2.className = '';
        }
    })();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    That's interesting. What is the reasoning behind making it readonly once it's in the DOM tree?
    You'll have to ask the W3C.
    I can imagine that it could be difficult for a user agent if a checkbox suddenly transformed into a text field, since the UI event handlers would be quite different (especially if the UA uses native OS widgets).

    Here's the IDL definition for the HTMLInput object in the DOM (HTML) Level 1 specification:
    Code:
    interface HTMLInputElement : HTMLElement {
               attribute  DOMString            defaultValue;
               attribute  boolean              defaultChecked;
      readonly attribute  HTMLFormElement      form;
               attribute  DOMString            accept;
               attribute  DOMString            accessKey;
               attribute  DOMString            align;
               attribute  DOMString            alt;
               attribute  boolean              checked;
               attribute  boolean              disabled;
               attribute  long                 maxLength;
               attribute  DOMString            name;
               attribute  boolean              readOnly;
               attribute  DOMString            size;
               attribute  DOMString            src;
               attribute  long                 tabIndex;
      readonly attribute  DOMString            type;
               attribute  DOMString            useMap;
               attribute  DOMString            value;
      void                      blur();
      void                      focus();
      void                      select();
      void                      click();
    };
    Birnam wood is come to Dunsinane

  9. #9
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That makes a lot of sense now. Clever lot, them at the W3C.

    Thanks Tommy.

  10. #10
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pmw57,
    I really appreciate your explanation and it is very clear .Thank you.!!
    But does not work in IE 7. It works on other browser like FireFox.. Any suggestions?

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Works for me on Firefox, IE7 and IE8

    Is it my test code that doesn't work for you? If the test code works then it's something else that's causing the problem.

    If it's something else, we will need to see what's happening to be able to help.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pmw57,
    I apologize, It was when I tried to include it inside table tag and somehow the stylesheet could not be found by the js script that made it not work.. I followed your example code and works in all browsers.. Very thank you so much for your help..
    If I can ask you one more questions, I would need to provide inputs as many as the user needs, i.e. keeping the button on in stead of disappearing it and continue creating the input fields as long as the user clicks on it. The trick is the value field is a dynamic java field that I persisted in a database like this. I can create a method name that is incremental which can be picked up by the loop counter, If you could just give me an example to modify the script you gave me to build a loop with DOM that when a button is clicked, the input fields show up and continue to do so as long as clicked, I would greatly appreciated it..

    <tr>

    <td><input type="text" name="p_check2" value="<%=HTML.getHtmlString(rb.getCheckNo2())%>">
    </td>

    <td ><input type="text" name="p_check_date2" value="<%= HTML.getHtmlStringDate(rb.getCheckDate2())%>"></td>

    <td><input type="text" name="p_check_amount2" value="<%=HTML.getHtmlStringMoney(rb.getCheckAmount2())%>">
    <script language="JavaScript" SRC="../include/checkButton.js"></script>
    </td>

    </tr>


    This is the original JS as you build it
    checkbutton.js

    (function () {
    var check2 = document.main.p_check2;
    var checkDate2 = document.main.p_check_date2;
    // create button
    var button = document.createElement('input');
    button.type = 'button';
    button.id = 'moreCheckButton';
    button.value = 'More_Check';
    button.onclick = formMoreCheck;
    check2.parentNode.insertBefore(button, check2);
    // hide input fields
    check2.style.display = 'none';
    checkDate2.style.display = 'none';
    //check2.className = 'hidden';
    //checkDate2.className = 'hidden';
    function formMoreCheck() {
    var button = document.getElementById( 'moreCheckButton' );
    var check2 = document.main.p_check2;
    var checkDate2 = document.main.p_check_date2;
    button.onclick = null;
    button.parentNode.removeChild(button);
    //check2.className = '';
    //checkDate2.className = '';
    check2.style.display = 'block';
    checkDate2.style.display = 'block';
    }
    })();

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    It seems that the server is providing custom values for the fields.
    What you're asking shouldn't be too difficult if the new fields are to have the same values.

    BTW, I see that you're setting styles explicitly from javascript. This tends to be a poor idea for interoperable considerations. It's much safer to keep the HTML, CSS and JavaScript separated and use id and class names to do things, rather than interacting with them directly.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •