SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Level 8 Chinese guy Archbob's Avatar
    Join Date
    Sep 2001
    Location
    Somewhere in this vast universe
    Posts
    3,741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can't figure out iframe element name in form after javascript function

    Ok, I have some code like this:

    Code:
    <script language="JavaScript" type="text/javascript" src="wysiwyg.js"></script> 
    <form name='action.php' name='form' method='post'><br>
    <textarea id='post' rows='6' name='post' cols='45'></textarea><br>
    <script language="JavaScript">
    generate_wysiwyg('post')
    <a onClick=\"addSmiley(':)')\"><img src='images/smile.gif'></a>
    <script language=\"JavaScript\" type=\"text/javascript\">
    function addSmiley(textToAdd);
    document.form.post.value += textToAdd;
    document.form.post.focus();
    </script>
    And here's the generate_wysiwyg() code
    Code:
    /* ---------------------------------------------------------------------- *\
      Function    : generate_wysiwyg()
      Description : replace textarea with wysiwyg editor
      Usage       : generate_wysiwyg("textarea_id");
      Arguments   : textarea_id - ID of textarea to replace
    \* ---------------------------------------------------------------------- */
    function generate_wysiwyg(textareaID) {
     
       // Hide the textarea 
     document.getElementById(textareaID).style.display = 'none'; 
     
      // Pass the textareaID to the "n" variable.
      var n = textareaID;
     
     // Toolbars width is 2 pixels wider than the wysiwygs
     toolbarWidth = parseFloat(wysiwygWidth) + 2;
     
      // Generate WYSIWYG toolbar one
      var toolbar;
      toolbar =  '<table cellpadding="0" cellspacing="0" border="0" class="toolbar1" style="width:' + toolbarWidth + 'px;"><tr><td style="width: 6px;"><img src="' +imagesDir+ 'seperator2.gif" alt="" hspace="3"></td>';
      
     // Create IDs for inserting Font Type and Size drop downs
     toolbar += '<td style="width: 90px;"><span id="FontSelect' + n + '"></span></td>';
     toolbar += '<td style="width: 60px;"><span id="FontSizes'  + n + '"></span></td>';
      
     // Output all command buttons that belong to toolbar one
     for (var i = 0; i <= buttonName.length;) { 
        if (buttonName[i]) {
         var buttonObj            = ToolbarList[buttonName[i]];
        var buttonID             = buttonObj[0];
         var buttonTitle          = buttonObj[1];
          var buttonImage          = buttonObj[2];
        var buttonImageRollover  = buttonObj[3];
         
       if (buttonName[i] == "seperator") {
          toolbar += '<td style="width: 12px;" align="center"><img src="' +buttonImage+ '" border=0 unselectable="on" width="2" height="18" hspace="2" unselectable="on"></td>';
       }
         else {
          toolbar += '<td style="width: 22px;"><img src="' +buttonImage+ '" border=0 unselectable="on" title="' +buttonTitle+ '" id="' +buttonID+ '" class="button" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' + buttonImageRollover + '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on" width="20" height="20"></td>';
         }
        }
        i++;
      }
      toolbar += '<td>&nbsp;</td></tr></table>';  
      // Generate WYSIWYG toolbar two
      var toolbar2;
      toolbar2 = '<table cellpadding="0" cellspacing="0" border="0" class="toolbar2" style="width:' + toolbarWidth + 'px;"><tr><td style="width: 6px;"><img src="' +imagesDir+ 'seperator2.gif" alt="" hspace="3"></td>';
     
      // Output all command buttons that belong to toolbar two
      for (var j = 0; j <= buttonName2.length;) {
        if (buttonName2[j]) {
         var buttonObj            = ToolbarList[buttonName2[j]];
        var buttonID             = buttonObj[0];
         var buttonTitle          = buttonObj[1];
          var buttonImage          = buttonObj[2];
        var buttonImageRollover  = buttonObj[3];
       
        if (buttonName2[j] == "seperator") {
          toolbar2 += '<td style="width: 12px;" align="center"><img src="' +buttonImage+ '" border=0 unselectable="on" width="2" height="18" hspace="2" unselectable="on"></td>';
       }
         else if (buttonName2[j] == "viewSource"){
          toolbar2 += '<td style="width: 22px;">';
        toolbar2 += '<span id="HTMLMode' + n + '"><img src="'  +buttonImage+  '" border=0 unselectable="on" title="' +buttonTitle+ '" id="' +buttonID+ '" class="button" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' +buttonImageRollover+ '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on"  width="20" height="20"></span>';
        toolbar2 += '<span id="textMode' + n + '"><img src="' +imagesDir+ 'view_text.gif" border=0 unselectable="on" title="viewText"          id="ViewText"       class="button" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' +imagesDir+ 'view_text_on.gif\';"    onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' +imagesDir+ 'view_text.gif\';" unselectable="on"  width="20" height="20"></span>';
           toolbar2 += '</td>';
       }
         else {
          toolbar2 += '<td style="width: 22px;"><img src="' +buttonImage+ '" border=0 unselectable="on" title="' +buttonTitle+ '" id="' +buttonID+ '" class="button" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' +buttonImageRollover+ '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on" width="20" height="20"></td>';
         }
        }
        j++;
      }
      toolbar2 += '<td>&nbsp;</td></tr></table>';  
     
      
     // Create iframe which will be used for rich text editing
     var iframe = '<table cellpadding="0" cellspacing="0" border="0" style="width:' + wysiwygWidth + 'px; height:' + wysiwygHeight + 'px;border: 1px inset #CCCCCC;"><tr><td valign="top">\n'
      + '<iframe frameborder="0" id="wysiwyg' + n + '"></iframe>\n'
      + '</td></tr></table>\n';
      // Insert after the textArea both toolbar one and two
      document.getElementById(n).insertAdjacentHTML("afterEnd", toolbar + toolbar2 + iframe);
     
      // Insert the Font Type and Size drop downs into the toolbar
     outputFontSelect(n);
     outputFontSizes(n); 
     
      // Hide the dynamic drop down lists for the Font Types and Sizes
      hideFonts(n);
     hideFontSizes(n);
     
     // Hide the "Text Mode" button
     document.getElementById("textMode" + n).style.display = 'none'; 
     
     // Give the iframe the global wysiwyg height and width
      document.getElementById("wysiwyg" + n).style.height = wysiwygHeight + "px";
      document.getElementById("wysiwyg" + n).style.width = wysiwygWidth + "px";
     
     // Pass the textarea's existing text over to the content variable
      var content = document.getElementById(n).value;
     
     var doc = document.getElementById("wysiwyg" + n).contentWindow.document;
     
     // Write the textarea's content into the iframe
      doc.open();
      doc.write(content);
      doc.close();
     
     // Make the iframe editable in both Mozilla and IE
      doc.body.contentEditable = true;
      doc.designMode = "on";
     
       // Update the textarea with content in WYSIWYG when user submits form
      var browserName = navigator.appName;
      if (browserName == "Microsoft Internet Explorer") {
        for (var idx=0; idx < document.forms.length; idx++) {
          document.forms[idx].attachEvent('onsubmit', function() { updateTextArea(n); });
        }
      }
      else {
       for (var idx=0; idx < document.forms.length; idx++) {
         document.forms[idx].addEventListener('submit',function OnSumbmit() { updateTextArea(n); }, true);
        }
      }
      
    };
    So the generate_wysiwyg() function replaces my textarea with an iframe textarea of another name, my clickable smiley, needs to focus on a textarea name, I can't figure out what the function changes my textarea name to, can anyone figure out what the textarea's name is now?

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <form name='action.php' name='form'
    1) Two name attributes?

    2)Don't use 'form' for a name. The inventor of js already used it, so it's taken.

    So the generate_wysiwyg() function replaces my textarea with an iframe textarea of another name
    There's no such thing as an "iframe textarea". An iframe is another browser window that is imbedded in your page, and like any browser window, it loads and displays html pages.

    my clickable smiley, needs to focus on a textarea name,
    The new iframe is not given a name attribute, however it is give an id:

    '<iframe frameborder="0" id="wysiwyg' + n

    Dig through the code and find the value for n, and the id will be wysiwyg + n.

  3. #3
    Level 8 Chinese guy Archbob's Avatar
    Join Date
    Sep 2001
    Location
    Somewhere in this vast universe
    Posts
    3,741
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The value of n is seven, I can't quite get it to focus right with the properties of the content window:

    Code:
    print "document.getElementById(\"wysiwyg\" + 7).contentWindow.value+= textToAdd;";
        print "document.getElementById(\"wysiwyg\" + 7).contentWindow.focus();\n";
    Ignore the prints, I'm using PHP to print out javascript/html.

    wysiwyg7 is the name, I've confirmed that. But however, when I click on the smiley, I don't get an error, but it doesn't add the smiley characters to the iframe.

    BTW: my code is actually form action= , not form name=, so the form actually has just one name.
    Last edited by Archbob; Mar 11, 2007 at 15:01.


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
  •