|
JavaScript - Having A Popup Window With The User's Input From A Textarea
I have a textarea with two buttons on it on the main page. When the user types into the textbox and hits the first button, a new window appears with the html language the user typed into the box. the other button closes the window. I cannot get the user's input to show up in the new window... Here is my code so far
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
</head>
<body>
<form name = "form1">
<br>
Type your HTML code below:
<br>
<textarea name = "userInput" cols = "70" rows = "30"></textarea>
<br>
<input type = "button" value = "Preview" name = "preview" onclick = "write2new()">
<input type = "button" value = "Close Preview" name = "closePreview" onclick = "w.close()">
</form>
<script language="JavaScript" type="text/javascript">
<!--
function write2new()
{
var t = document.form1.userInput.value;
var w = open("");
w.document.write(t);
w.document.close();
}
//-->
</script>
</body>
</html>
Similar TutorialsI guess this case applies to both popup windows opened by window.open() and by showModalWindow(). I have two buttons in popup window, "Cancel" and "Save". If the user clicks either button, there is a "process" at parent window before close() at popup being called. The problem now is, if the user click the "X" sign at top right corner of that popup window, how to trigger the "process"? I think I can do nothing in popup window since the closure is unexpected programmatically. Can I put some kind of listener in parent window to detect if popup is closed? I have the code below in my popup window which currently brings up a blank page in the background as the main window. Instead I want the popup to come up but the original page I left is in the background as the main window. Does anyone know how I can do that with the code I currently have. Code: <html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function poponload()
{
testwindow = window.open("", "mywindow", "location=0,status=0,scrollbars=0,width=350,height=400");
testwindow.moveTo(0, 0);
testwindow.document.write('<h1>Get outta here!</h1><a href="javascript:void(0);" onclick="window.opener.history.go(-1); self.close();">Parent back button</a>');
testwindow.focus();
}
</script>
<body onload="javascript: poponload()">
</body>
</html>
Hi all can someone guide me (total JS newbie) on this presumably pretty easy task? I have a "parent" page with some text inputs in it (a form). This is what I am after: -when the user clicks a link it pops open a new window via JS - "child" (this is working). -in the "child" window there are also some text inputs (another form) (done). -when the user changes the value for 'testChild_textInput_4' in the child window, then I want it to automatically set this same value, to effectively overwrite, what is currently in 'testParent_textInput_2' in the parent window. Presumably this involves an onChange event, but it is also OK with me if the needful (the text input's value in the parent window being overwritten) happens upon the child window's form submit. If anyone can show me either trick, I would be thrilled! I set up a test page to make this all easy to talk about: http://www.yellow-turtle.com/testDumpMe_parent.html Please let me know! Thanks! -John Hi Guys, It's probably something trivial i have forgotten to do lol, all i'm trying to do is preview some html code in a textare in a javascript popup what i have done so far is: 1) page1.php PHP Code: <input type="submit" onClick="return popUpPreview();" value="Preview" /> The textarea is in the form is like: PHP Code: <textarea name="txtProductDescription" id="txtProductDescription" rows="20" cols="60" /><?php echo isset($_POST['txtProductDescription'])?$_POST['txtProductDescription']:''; ?></textarea> When preview is clicked the javascript function kicks in: PHP Code: function popUpPreview() { // Display a new browser for the user var w = screen.availWidth / 2 - 450; var h = screen.availHeight / 2 - 320; var win = window.open('preview.php', 'payPopupMain', 'width=900,height=650,left='+w+',top='+h+',scrollbars=1'); } preview.php PHP Code: <html> <head> <link rel="stylesheet" type="text/css" href="css/fcs.css" /> <script type="text/javascript" src="js/fcs.js"></script> <title>Preview</title> </head> <body> <script type="text/javascript">document.write(document.formAddProduct.txtProductDescription.value)</script> </body> </html> So far this prints nothing, i have probably made it more complicated than it needs to be lol any help would be appreciated thanks guys Graham I am using the following code to pop up a help balloon when the mouse hovers over an input element: Code: function eltMouseOver()
{
// if there is already a help division displayed, hide it
if (helpDiv)
{
helpDiv.style.display = 'none';
helpDiv = null;
}
// in some cases the mouseover event is against the table cell
// containing the input element. Locate the first element node
// under the cell to display help for
if (this.nodeName == 'TD')
{ // mouseover defined for the cell containing the element
for (var i = 0; i < this.childNodes.length; i++)
{ // loop through children of this
var cNode = this.childNodes[i];
if (cNode.nodeType == 1)
{ // element
helpElt = cNode;
break;
} // element
} // loop through children of this
} // mouseover defined for the cell containing the element
else
helpElt = this;
helpDelayTimer = setTimeout(popupHelp, 2000);
} // eltMouseOver
function popupHelp()
{
displayHelp(helpElt);
} // popupHelp
function displayHelp(elt)
{
var helpDivName = "";
try {
// the help division name may be supplied by an explicit private
// attribute "helpDiv"
if (elt.helpDiv)
helpDivName = elt.helpDiv;
else
if (elt.name && elt.name.length > 0)
{ // element has a name
if (elt.name.substring(elt.name.length - 2) == "[]")
{ // multiple selection
helpDivName = elt.name.substring(0, elt.name.length - 2);
} // multiple selection
else
{ // ordinary element
helpDivName = elt.name;
} // ordinary element
} // element has a name
else
{ // try id attribute
helpDivName = elt.id;
} // try id attribute
} catch(e)
{ // exception thrown trying to get help division name
var attrList = "";
for(attr in elt)
attrList += attr + ", ";
alert("keyDown: exception=" + e + ", elt=" + attrList);
} // exception thrown trying to get help division name
// to ensure unique id values, the supplied name is
// prefixed with "Help". However some forms have not been
// updated to use this convention
helpDiv = document.getElementById("Help" + helpDivName);
if (!helpDiv)
{ // first choice not found
// strip off trailing decimal digits if any representing
// a row number
for (var l = helpDivName.length; l > 1; l--)
{ // find last non-numeric character
if (helpDivName[l - 1] < '0' ||
helpDivName[l - 1] > '9')
{ // non-digit
helpDivName = helpDivName.substr(0, l);
helpDiv = document.getElementById("Help" + helpDivName);
break;
} // non-digit
} // find last non-numeric character
// if cannot find division with name prefixed with 'Help'
// then try without
if (!helpDiv)
helpDiv = document.getElementById(helpDivName);
} // first choice not found
if (helpDiv && (helpDiv != elt))
{ // have a help division to display
// If presentation style requires capitalization,
// report it in help
var textTransform = "";
if (elt.currentStyle)
{ // browser supports IE API
textTransform = elt.currentStyle.textTransform;
} // browser supports IE API
else
if (window.getComputedStyle)
{ // browser supports W3C API
var style = window.getComputedStyle(elt, null);
textTransform = style.textTransform;
} // browser supports W3C API
if (textTransform == "capitalize")
{
if (!helpDiv.capitalized)
{ // add text to help
helpDiv.appendChild(document.createTextNode(
"Text entered in this field is automatically capitalized."
));
helpDiv.capitalized = true;
}
}
// if the field has automatic abbreviation expansion
// describe it
addHelpAbbrs(helpDiv, elt.abbrTbl);
// display the help balloon in an appropriate place on the page
var cell = elt.parentNode;
var row = cell.parentNode;
var tbody = row.parentNode;
var table = tbody.parentNode;
//alert("helpDiv=" + tagToString(helpDiv));
helpDiv.style.left = Math.max(Math.min(getOffsetLeft(elt) - 50, table.offsetWidth - Math.floor(window.innerWidth/2)), 2) + 'px';
helpDiv.style.top = (getOffsetTop(elt) + 20) + 'px';
helpDiv.style.display = 'block';
// so key strokes in balloon will close window
helpDiv.onkeydown = keyDown;
} // have a help division to display
else
alert("Cannot find <div id='Help" + helpDivName + "'>");
} // displayHelp
I activate support for this on every element in the page by means of the following code in the onload handler: Code: for(var i = 0; i < document.forms.length; i++)
{
var form = document.forms[i];
for(var j = 0; j < form.elements.length; j++)
{
var element = form.elements[j];
// pop up help balloon if the mouse hovers over a field
// for more than 2 seconds
if (element.parentNode.nodeName == 'TD')
{ // set mouseover on containing cell
element.parentNode.onmouseover = eltMouseOver;
element.parentNode.onmouseout = eltMouseOut;
} // set mouseover on containing cell
else
{ // set mouseover on input element itself
element.onmouseover = eltMouseOver;
element.onmouseout = eltMouseOut;
} // set mouseover on input element itself
} // loop through elements in form
} // iterate through all forms
For an example see this page. This works for every input element on the page except the <textarea>. If I move the mouse over the text area you can see the mouse blink after 2 seconds, but the help balloon does not appear unless you first give the <textarea> the focus by clicking the mouse in the area. I have verified by adding alerts that the mouseover and popup functions are called the same way on the <textarea> as on the other input elements. This is on Firefox 3.6.23 on Ubuntu 10.04. Is this just a quirk of Firefox? Hi, I'm kinda hoping this is possible but haven't found any reference to it... I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser. Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup? Any assistance would be appreciated. :-) so I am creating a silly word ;irate word interpreter page, and I need some logic behind how to add text to a textarea each time I click on a button. Each time the user clicks on the button, the value is inserted into the text area. You should be able to click on multiple buttons to add to the last text that appears. Then I have a delete translation button when I want to clear the textarea field. A good example would be if the user clicks on the button with the value "sir", than "matey" will appear in the textarea. Now, if the user clicks on the button with the value "your", then "yer" will come up after matey. It's like creating a sentence on your own, and then deleting it when your done. Code: <body> <div id="page"> <div> <img style="float:left" src="slue.gif" width="205" height="190" alt=""> <div> <h1>Pirate Translator</h1> <p>Simply click on the buttons to translate words and/or phrases from English to pirate talk</p> </div> </div><br /> <hr /> <form name="pirate"> <div> <fieldset> <legend><b>Greetings:</b></legend> <input type="button" id="greeting" value="hello" /> <input type="button" id="greeting" value="pardon me" /> <input type="button" id="greeting" value="excuse me" /> <input type="button" id="greeting" value="" /> <input type="button" id="greeting" value="" /> <input type="button" id="greeting" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>People:</b></legend> <input type="button" id="people" value="sir" /> <input type="button" id="people" value="madam" /> <input type="button" id="people" value="miss" /> <input type="button" id="people" value="stranger" /> <input type="button" id="people" value="officer" /> <input type="button" id="people" value="" /> <input type="button" id="people" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Questions:</b></legend> <input type="button" id="question" value="where is" /> <input type="button" id="question" value="can you help me" /> <input type="button" id="question" value="is that" /> <input type="button" id="question" value="how far is it to" /> <input type="button" id="question" value="" /> <input type="button" id="question" value="" /> <input type="button" id="question" value="" /> <input type="button" id="question" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Articles:</b></legend> <input type="button" id="article" value="the" /> <input type="button" id="article" value="my" /> <input type="button" id="article" value="your" /> <input type="button" id="article" value="" /> <input type="button" id="article" value="" /> <input type="button" id="article" value="" /> <input type="button" id="article" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Adjectives:</b></legend> <input type="button" id="adject" value="old" /> <input type="button" id="adject" value="attractiv" /> <input type="button" id="adject" value="happy" /> <input type="button" id="adject" value="" /> <input type="button" id="adject" value="" /> <input type="button" id="adject" value="" /> <input type="button" id="adject" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Places:</b></legend> <input type="button" id="places" value="restroom" /> <input type="button" id="places" value="restaurant" /> <input type="button" id="places" value="mall" /> <input type="button" id="places" value="hotel" /> <input type="button" id="places" value="pub" /> <input type="button" id="places" value="" /> <input type="button" id="places" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Desires:</b></legend> <input type="button" id="desire" value="I would like to" /> <input type="button" id="desire" value="I desire" /> <input type="button" id="desire" value="I wish I knew how to" /> <input type="button" id="desire" value="my mother told me to" /> <input type="button" id="desire" value="my campanion tells me to" /> <input type="button" id="desire" value="" /> <input type="button" id="desire" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Actions:</b></legend> <input type="button" id="action" value="find" /> <input type="button" id="action" value="take a nap" /> <input type="button" id="action" value="kill" /> <input type="button" id="action" value="hurt you" /> <input type="button" id="action" value="beat you up" /> <input type="button" id="action" value="go to the bathroom" /> <input type="button" id="action" value="" /> </fieldset> </div> <div> <p id="output"><textarea id="task_list" rows="5" cols="130"></textarea></p> <p id="output"><input type="button" id="" value="Delete Traslations" /></p> </div> </div> </form> <script src="js/translate.js"></script> </body> </html> Hi All How popup windows are made using Javascript? I am not talking about the popups cretaed using window.open. I am talking about the window which appears to display some advertisements in most of the sites. Charles Hey there everybody! I'm learning javascript, and I am having trouble figuring out how to do this. Maybe you guys can help me out. What I need is for my main page to have a text field. Above the text field there should be a set of images for bold, italics, underline, etc; when you click on them it inserts the html code <b></b> at the cursor point. Next I want there to be a link, that when clicked will open a popup box with smileys. When you click on one of the smiley images it should insert the smiley code (example :smile: ) into the parent window text field. And would it be possible to make that work with pages of emotes? Or perhaps a second popup window? I hope I explained that without it sounding confusing. I would really appreciate any help. Here is my basic code, it does not include a popup code however. Code: <html>
<script type="text/javascript">
function insert(el,ins) {
window.lstText={};
if (el.setSelectionRange){
el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
}
else if (document.selection && document.selection.createRange) {
el.focus();
var range = document.selection.createRange();
range.text = ins + range.text;
}
}
</script>
<body>
<form>
<textarea rows="20" cols="100" name="txt1" onfocus="window.lstText=this;">
This is sample text, click anywhere in here then
choose on of the buttons above to see text inserted.
</textarea><br /><br />
<img src="http://i570.photobucket.com/albums/ss141/vwcorrado/Docs_smiley.jpg" onclick="insert(window.lstText,'hello')">
<input type="button" value="hi" onclick="insert(window.lstText,'hi')">
<br />
</form>
</body>
</html>
Hello there, I am having trouble with a javascript snippet that adds text to a textarea when you click on the link. Problem is that when you regularly type into the textarea, the links no longer add text. Here is the links: Code: <a href="javascript:insertText('<b></b> ','textIns');" onClick="void(0)">Bold</a>
Here is the javascript Code: <script type="text/javascript">
function insertText(val,e) {
document.getElementById(e).innerHTML+=val;
}
</script>
Any ideas or suggestions? If anyone could please help me with this basic feature, I would much appreciate it! I have this function: Code: function popupWin(href)
{
window.open(href, "popup", "width=770,height=675");
return;
}
but when I run it, it opens in the same window. I'm really new to Javascript, and I'm sure it's a basic fix, I just can't seem to figure it out. Thank you!! Hi, I desperately need help after hours of reading 1000s of forums just to be able to have a thumbnail which will enlarge in a new window. I've found this script in one of the forums, and I am trying to apply it to my page. But when I click on a thumbnail, although it's opening a pop-up window, it also enlarges the image in the current browser. How should I fix this? I also need to do the same thing with a .swf file. How can I have a flash movie enlarge when clicked? Any help is appreciated thanks in advance!! <HTML> <Head> <Script type="text/javascript"> var largerView = ""; var winToggle = false; function openFullSize(Pix,isDesc){ if (winToggle){largerView.close()} document.getElementById('nullIMG').src = Pix; var wStr = document.getElementById('nullIMG').width; var offsetW = wStr; wStr = wStr+20; wStr = "width="+wStr; var hStr = document.getElementById('nullIMG').height; var offsetH = hStr; hStr = hStr+20; hStr = "height="+hStr; var lStr = (screen.width-50-offsetW)/2; lStr = "left="+lStr; var tStr = (screen.availHeight-50-offsetH)/2; tStr = "top="+tStr; largerView = window.open(Pix,"FullSize","toolbar=0,status=0,"+tStr+","+lStr+","+wStr+","+hStr+""); largerView.document.title = isDesc; winToggle = true; } function buildSupport(){ var styleStr = "<style>.thumb{cursorointer;border:solid blue 2px}</style>" var divStr = "<Div style='Position:Absolute;Top:-2000'><IMG ID='nullIMG'> </Div>" document.write(divStr); document.write(styleStr); } buildSupport(); window.onunload=function(){ if (winToggle && !largerView.closed){largerView.close()} } </Script> </Head> <Body> <Img Src='1/Any.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is a description')" alt='Click to enlarge'> <Img Src='1/Some.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is another description')" alt='Click to enlarge'> <!-- The following line must be the LAST line in the Body --> <Script> document.getElementById('nullIMG').src = document.images[1].src </Script> </Body> </HTML> I've changed the last part to: <Img Src='images/Any.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is a description')" alt='Click to enlarge'> <Img Src='images/Some.jpg' width='120' height='90' class='thumb' onclick="openFullSize(this.src,'This is another description')" alt='Click to enlarge'> <!-- The following line must be the LAST line in the Body --> <Script> document.getElementById('nullIMG').src = document.images.src </Script> </Body> </HTML> I have a problem in centering my popup window. I want it centered in the page when it pops up. The problem is in the code that is red. Here's a part of my script: if (counter == 0) { var myRes = "<html><head>\n"; myRes += "<title>Popup Window</title>\n"; myRes += "</head><body>\n"; myRes += "<div style='text-align:center'>\n"; myRes += "<p>Search character '<b>" + searchChar + "</b>' not found in text string!</p>\n"; myRes += "<input type='button' value='Close Window' onclick='window.close()'>\n"; myRes += "</div>\n"; myRes += "</body>\n</html>"; var popup = window.open("", "Popup", "top=10,left=300,width=300,height=100"); popup.focus(); popup.document.write(myRes); popup.document.close(); Hello , everyone. Was wondering if you can put a single popup that could appear to many visitors to a site at the same time , regardless of the page you 're browsing . Is there a chance to do it in JavaScript or another language ? How could i do it? Iappreciate the help .
Hopefully someone can help a newbie with this. I have a map with onclick areas. When you click these areas, a popup window displays a text file. This is rather cumbersome, so I thought of using a popup box instead of a window and linking this to an onmouseover and onmouseout event. The only problem I have is trying to find out how to dump the contents of the text file into the popup box using the simplest means. The URL of the map I am trying to do this with is: http://www.intercitycharters.com/Weather/Summary.php Any suggestions? In my page i have to open the popup window when i do on click. one place it is opening correctly. but in another case not able to open. Can you give me the solution on this one. In the following html code i am able to open the popup window. Code: <td colspan=2 width=90% background="graphics/barbkg.gif" class=fcCalMonthDay_gren height=16 align=center>
<div id=fcContentLegned style="display:block;"><a href=# onClick="javascript:OZ_openBrWin4('ozLOVNoteCenter.jsp')">Daily Notes Center</a></div>
</td>
but in the following javascript method not able to open the popup window when i do onclick. Code: var currContentView = 'calDailyNotes'; // calOrg, calPsn, calOpp
function selectContent( curr )
{
if ( fcCalRefreshInProgress == 1 )
return;
currContentView = curr;
document.getElementById('calDailyNotes').className='';
document.getElementById('calOrg').className='';
document.getElementById('calPsn').className='';
document.getElementById(curr).className='genTblContentCellCal';
if ( curr == 'calDailyNotes' ) document.getElementById('fcContentLegned').innerHTML = '<a href="#" onClick="javascript:OZ_openBrWin4(ozLOVNoteCenter.jsp)">Daily Notes Center</a>'; // Here i am not able to open the popup window.
else if ( curr == 'calOrg' ) document.getElementById('fcContentLegned').innerHTML = 'Recent Organizations';
else if ( curr == 'calPsn' ) document.getElementById('fcContentLegned').innerHTML = 'Recent Contacts';
fc_refresh_content_view('<%=submitUrlNotes%>&refreshview=Y&view='+curr, '<%=ozDay.renderDayKey(_ahsPage)%>' );
}
thanks in advance... Hello everyone... I need "No-Block PopUp Window" for my web site.. for example if users open my sites another sites show or opens for them.. even a full page site like full pages ads.. and it be like One time per hour or more.. I found some script like that but some of them being blocked by IE or other browsers.. if anyone has kinda this JS code.. Please share it.. Thanks a lot I was wanting to know if it was possible to use eventlistener on a popup window? What i am wanting to do is this. My script runs functions then uses window.open to open a specified url when the window opens i want it to alert a message for useage of said url.
Hi I want to create a popup that is completely contained within the page (so i guess its not really a popup). I'm looking for something where if a button is clicked, a small box will come up in the current window and become the active window, while the original window is visible but not active. It's hard to explain, but its a popup that is contained in the same window. And when the user presses okay or cancel on the "popup" window. They return to where they were in the original window. Is this possible? How would I do it? Thanks |
|||||||