CODEWITHSUNDEEP
phpjavascriptiframe
Will
Will

Reputation: 3044

Posting a php script in a iframe using javascript

I have followed a tutorial on how to make a wysiwyg input text area. The text area works fine. The problem I am having is that I want to be able to give the user the option edit the information posted by the text area.

The information is stored in my DB and have queried the DB and put the information in a variable called $details. I want to put this inside the iframe.

Here is my form code. 

<body onLoad="iFrameOn();" >
<form action="inventory_edit.php" enctype="multipart/form-data" name="myForm" id="myform" method="post">
<div id="wysiwyg_cp" style="padding:8px; width:700px;">
              <input type="button" onClick="iBold()" value="B"> 
              <input type="button" onClick="iUnderline()" value="U">
              <input type="button" onClick="iItalic()" value="I">
              <input type="button" onClick="iFontSize()" value="Text Size">
              <input type="button" onClick="iForeColor()" value="Text Color">
              <input type="button" onClick="iHorizontalRule()" value="HR">
              <input type="button" onClick="iUnorderedList()" value="UL">
              <input type="button" onClick="iOrderedList()" value="OL">
              <input type="button" onClick="iLink()" value="Link">
              <input type="button" onClick="iUnLink()" value="UnLink">
              <input type="button" onClick="iImage()" value="Image">
            </div>
            <!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it -->
            <textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"><?php echo $details; ?> blah blah </textarea>

            <iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;" ></iframe>



      <input type="submit" name="button" id="button" value="Make Changes" onClick="javascript:submit_form();"/>
</form>

This is the javascript file 

function iFrameOn(){ 
    richTextField.document.designMode = 'On';               
}
function iBold(){
    richTextField.document.execCommand('bold',false,null); 
}
function iUnderline(){
    richTextField.document.execCommand('underline',false,null);
}
function iItalic(){
    richTextField.document.execCommand('italic',false,null); 
}
function iFontSize(){
    var size = prompt('Enter a size 1 - 7', '');
    richTextField.document.execCommand('FontSize',false,size);
}
function iForeColor(){
    var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '');
    richTextField.document.execCommand('ForeColor',false,color);
}
function iHorizontalRule(){
    richTextField.document.execCommand('inserthorizontalrule',false,null);
}
function iUnorderedList(){
    richTextField.document.execCommand("InsertOrderedList", false,"newOL");
}
function iOrderedList(){
    richTextField.document.execCommand("InsertUnorderedList", false,"newUL");
}
function iLink(){
    var linkURL = prompt("Enter the URL for this link:", "http://"); 
    richTextField.document.execCommand("CreateLink", false, linkURL);
}
function iUnLink(){
    richTextField.document.execCommand("Unlink", false, null);
}
function iImage(){
    var imgSrc = prompt('Enter image location', '');
    if(imgSrc != null){
        richTextField.document.execCommand('insertimage', false, imgSrc); 
    }
}
function submit_form(){
    var theForm = document.getElementById("myform");
    theForm.elements["myTextArea"].value = window.frames['richTextField'].document.body.innerHTML;
    theForm.submit();
}

I have spent hours trying to find a fix. This is what I added to try and add my php var to the iframe.

This is added to the iFrameOn() function 

var theForm = document.getElementById('myform');
window.frame['richTextField'].document.body.innerHTML = theForm.elements['myTextArea'].value;

Sorry if this is a lot of code. thanks

Edit: Here is what the text editor looks like. WYSIWYG

I want to be able to pre-populate the iFrame with content already in the database so the user can edit it.

Upvotes: 1

Views: 755

Answers (1)

Ryan Julyan
Ryan Julyan

Reputation: 11

I sorted this out with an external file that was created dynamically and then called into the iframe. I could not find another way to do it with the Iframe.

This does however seem to sometimes give issues with multiple users - Luckily my project seemed to allow me to get away with this by creating a folder and file. Maybe think of using session variables to create it (As it will be unique) and on exit use JS to delete the file?

Hope that helps

Upvotes: 1

Related Questions