Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with dynamic edit box script

    Hey guys!

    I've written a script that will make a form field appear to be regular text until it is clicked on - then it becomes editable (by becoming a textarea with the same value) - then when the user is done editing the field, it will return to being normal text. (This is hard to word, so I'm sorry if it's confusing)

    Anyway, this script works fine. The problems come up when I am trying to make a function to make creating the dynamic fields a little easier. I have double checked my source code, and it seems right, but I'm still getting errors.

    My source code:
    Code:
    <html>
    <head>
    <script language="javascript">
    //Dynamic edit box generator
    //Coded by Carlton Cook
    
    
    function makeEditable(inputId,textId) //where inputId is the textbox and textId is the span
    {
    document.getElementById(inputId).style.display = 'inline';
    document.getElementById(inputId).value = document.getElementById(textId).innerHTML;
    document.getElementById(textId).style.display = 'none';
    document.getElementById(inputId).focus();
    }
    
    function backToNormal(inputId,textId)
    {
    document.getElementById(inputId).style.display = 'none';
    document.getElementById(textId).innerHTML = document.getElementById(inputId).value;
    document.getElementById(textId).style.display = 'inline';
    document.getElementById(inputId).style.display = 'none';
    document.getElementById(inputId).blur();
    }
    
    function addEditBox(boxId,boxTitle,initValue)
    {
    //if (boxId="") {return;} //A box with no ID will cause havoc on the page.
    //if (initValue="") {initValue="      "}; //A blank value can also cause problems selecting the box.
    
    
    document.write("<span id=\"" + boxId + "SpanContainer\" onMouseOver=\"makeEditable('" + boxId + "Text','" + boxId + "Span'\");"); //Write out the initial span tag
    document.write(" onMouseOut=\"backToNormal('" + boxId + "Text','" + boxId +"Span');\">" + boxTitle); //continue with the span tag...
    document.write("<input type=\"text\" id=\" " + boxId + "Text\" value=\"" + initValue + "\" style=\"display: none;\"><span id=\"" + boxId + "Span\" style=\"display: inline;\">" + initValue + "</span></span><br />");
    
    
    }
    
    
    </script>
    </head>
    <body>
    
    <script type="text/javascript">
    addEditBox('myName','Name: ','Carlton');
    addEditBox('myAge','Age: ','18');
    </script>
    
    </body>
    These are the errors I'm getting:
    (the first error is referring to the first uncommented line in addEditBox() )

    Error: missing ) after argument list
    Source File: file:///Z:/vcsweb%202007/graduation%20requirements/dynEdit.html
    Line: 1, Column: 37
    Source Code:
    makeEditable('myNameText','myNameSpan'


    Error: document.getElementById(inputId) has no properties
    Source File: file:///Z:/vcsweb%202007/graduation%20requirements/dynEdit.html
    Line: 18

    This really has me stumped. I've check my source code on the first error and there is definitely a ")" in the document.write. As for the second error, I'm really not sure what is causing that.

    Any help would be greatly appreciated!

    Thanks,
    Carlton

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi carlton, Welcome to Coding Forums!

    Note that you need "==" instead of "=" here:
    Code:
    //if (boxId=="") {return;} //A box with no ID will cause havoc on the page.
    //if (initValue=="") {initValue="      "}; //A blank value can also cause problems selecting the box.
    Also note my change in red here:
    Code:
    //  document.write("<span id=\"" + boxId + "SpanContainer\" onMouseOver=\"makeEditable('" + boxId + "Text','" + boxId + "Span'\");"); //Write out the initial span tag
      document.write("<span id=\"" + boxId + "SpanContainer\" onMouseOver=\"makeEditable('" + boxId + "Text','" + boxId + "Span')\""); //Write out the initial span tag
    Last edited by MikeFoster; 02-15-2007 at 09:08 PM.

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help, Mike!
    Now it seems the only thing keeping it from working is the

    Error: document.getElementById(inputId) has no properties
    Source File: file:///C:/Documents%20and%20Settings/Flare/My%20Documents/web/dynamicEditExternal.html
    Line: 12

    Firefox is saying the error is on this line:
    Code:
    document.getElementById(inputId).style.display = 'none';
    After some googling, I read that this error will happen when I try to reference to a null object.
    Is the problem that I'm not passing the textbox ID to the function correctly?

    Thanks,
    Carlton
    Last edited by carlton; 02-15-2007 at 10:53 PM.

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is the problem that I'm not passing the textbox ID to the function correctly?
    or that an "incorrect" ID is being passed.


  •  

    Posting Permissions

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