Textarea in popup not accepting input - javascript

I am attempting to create a HTA application with the following functionality
1) the user clicks a button
2) a popup containing multiple textareas pops up
3) the user then enters information into the textareas
4) the user then clicks a 'Do something' button in the popup window (not incl in code)
5) the JavaScript in the application does something with the data (not incl in code)
I stuck on the third point. The show_popup function uses .innerHTML to place the inputText div element inside the popup window.
However when it does this, it brings the textarea through in a read only type fashion where it will not allow me to input text.
It would be greatly appreciated if anyone has any input as to how to fix this.
my code is as follows
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<HTA:APPLICATION/>
<script type="text/javascript">
function show_coords(event)
{
var x=event.screenX + document.body.parentNode.scrollLeft - window.screenLeft;
var y=event.screenY + document.body.parentNode.scrollTop - window.screenTop;
document.getElementById('coordVarX').value = x;
document.getElementById('coordVarY').value = y;
}
function show_popup(divId,winWidth,winHeight)
{
var p=window.createPopup();
var pbody=p.document.body;
var x = document.getElementById('coordVarX').value;
var y = document.getElementById('coordVarY').value;
pbody.style.border="solid black 1px";
pbody.innerHTML=divId.innerHTML;
p.show(x,y,winWidth,winHeight,document.body);
}
</script>
</head>
<body onmousedown="show_coords(event)">
<textarea id="coordVarX" name="coordVarX" value="" style="display:none;"></textarea>
<textarea id="coordVarY" name="coordVarY" value="" style="display:none;"></textarea>
<button onclick="show_popup(inputText,150,30)">Enter text</button>
<div id="inputText" style="display:none;">
<span>
<form>
<input type="textarea" value=""></input>
</form>
</span>
</div>
</body>
</html>
Many thanks!

You need <textarea></textarea> - not input type=textarea

Related

Generating HTML Link From Given Values in Form

I'm trying to generate a link from given values in a form that will allow the user that follows the resulting link to go directly to a certain area of a website based on the information they enter. However, when I try my current method, the web application kicks out the user when they follow the link because the span tag is being left behind in the link and it perceives it as malicious.
Here's what I have as of now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head lang="en">
<title>Example Link Generator</title>
<meta charset="UTF-8">
<script language="JavaScript">
function showInput() {
document.getElementById('displaycust').innerHTML =
document.getElementById("cust").value;
document.getElementById('displayjob').innerHTML =
document.getElementById("job").value;
document.getElementById('displaysite').innerHTML =
document.getElementById("site").value;
document.getElementById('displayname').innerHTML =
document.getElementById("name").value;
}
</script>
</head>
<body>
<form>
<legend><b>Example Link Generator</b></legend>
<br>
<br>
CustId= (Cengage is default):<br>
<input type="text" name="cust" maxlength="40" id="cust" value="AC2BB2C8AD16284FA51A8D42D7D1D526">
<br><br>
JobId=:<br>
<input type="text" name="job" maxlength="40" id="job" value="">
<br><br>
Site (07 is Offset, 13 is Digital):<br>
<input type="number" name="site" maxlength="2" id="site" value="07">
<br><br>
Name (Used as link display text):<br>
<input type="text" name="name" id="name" value="">
<br><br>
</form>
<input type="submit" onclick="showInput();"><br/><br>
<label><b>Link (highlight and copy):</b></label>
<p>
<!-- Problem area-->
<a href="https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite<span id='displaysite'></span>%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3d<span id='displaycust'></span>%26JobId%3d<span id='displayjob'></span>"><span id='displayname'></span>
</a>
<!-- End problem area -->
</p>
</body>
</html>
<br><br><br><br>
<span id='displaycust'></span><br><br>
<span id='displayjob'></span><br><br>
<span id='displaysite'></span><br><br>
When I try to generate a link without display text, clicking on the link will still kick the user out of the web application, but highlighting the text, then copying and pasting the link to the address bar, successfully logs the user in.
That method looks like this:
<!-- Current method without display name for link -->
https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite<span id='displaysite'></span>%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3d<span id='displaycust'></span>%26JobId%3d<span id='displayjob'></span>"
<!-- End current method -->
I would like to be able to generate a link with display text, but eliminate any residual markup language in the resulting URL.
For example, this would be a bad link:
https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite%3Cspan%20id=%27displaysite%27%3E%3C/span%3E%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3d%3Cspan%20id=%27displaycust%27%3E%3C/span%3E%26JobId%3d%3Cspan%20id=%27displayjob%27%3E%3C/span%3E
This would be a good link:
https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite07%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3dAC2BB2C8AD16284FA51A8D42D7D1D526%26JobId%3dAC2BB2C8AD16284FA51A8D42D7D1D526"
Any help in solving this would be greatly appreciated.
You can't have a span tag inside of an HTML attribute, such as the link.
A better approach would be to concatenate the results in JavaScript, then set the link value to the concatenated result
Edit: Here's a code example of my answer:
function showInput() {
var cust = document.getElementById("cust").value;
var job = document.getElementById("job").value;
var site = document.getElementById("site").value;
var name = document.getElementById("name").value;
var generatedLink =
'https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite'
+ site
+ '%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3d'
+ cust
+ '%26JobId%3d'
+ job;
var elementThatYouAreEditing = document.getElementById('displayname');
elementThatYouAreEditing.href = generatedLink;
elementThatYouAreEditing.innerText = name;
}
and your a tag would be
Note that I'm not saying this is the best way to do this, merely a way to do it.

Javascript code not being executed on button click

I have some html and some javascript code that is supposed to take input in a text box, and open a new tab with the Wikipedia page of whatever was in the text box. However, I'm using this as an extension, and google chrome doesn't allow inline javascript.
page.js
document.getElementById("search").addEventListener("click", searchPage);
function searchPage() {
console.log("test")
var temp = document.getElementById(pageName);
var temp = temp.value;
var myPage = "http://en.wikipedia.org/wiki/" + temp;
window.location.replace(myPage);
}
popup.html
<!DOCTYPE html>
<html>
<body>
Random
Enter page to lookup: <input type="text" id="pageName" /><br />
<input type="submit" value="Submit" id="search" />
<script src="./page.js></script>
</body>
</html>
Anyone have any clue why this isn't working?
what you can do instead is include your JS in your HTML <head> tag, and add an onClick attribute to your button, like so:
<!DOCTYPE html>
<html>
<body>
<a href="http://en.wikipedia.org/wiki/Special:Random/" target="_blank">$
Enter page to lookup: <input type="text" id="pageName" /><br />
<input type="submit" value="Submit" id="search" />
<script src="./page.js"></script>
</body>
</html>
I think the problem was that in your original code, you had <script src="./page.js></script> instead of <script src="./page.js"></script>
then you can change your javascript to be the following:
document.getElementById('search').addEventListener('click', searchPage);
function searchPage() {
console.log("hjabdfs");
var temp = document.getElementById('pageName');
var temp = temp.value;
var myPage = "http://en.wikipedia.org/wiki/" + temp;
window.location.replace(myPage);
}
please note that I also changed var temp = document.getElementById(pageName) to var temp = document.getElementById('pageName'), as pageName is not a variable.
Input type submit is trying to submit a form. You need to add an action to that submit button or you can change it to a button and the event will fire.
Your click event listener doesn't work because it has not been loaded yet. Or in other words, you need to make sure this line <script src="./page.js></script> is correctly pointing to page.js.

Convert string to title case not working, and populate div tag with input string all javascript

I have been struggling with the following code. Basically I took the example Convert string to title case with JavaScript and am using that, I also have a code which takes the name and populates it into a div tag, however, it seems to move the text down, so for example when I type in john smith, I don't get John Smith for the capatalisation and then where it states 's fathers full name it does place the name there but then moves the rest of that text one line down, so 's fathers full name moves one line below john smith, can someone help me figure this out?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hello whirled</title>
</head>
<body>
<h1>Bla Bla
</h1>
<form name="input" action="submit.php" method="post">
<p>
Other Text goes here
</p>
<p>
How do you wish to be referred to informally?
<input id="name1" type="text" name="groominame" onchange="toTitleCase(this.value); fathersName(this.value);" />
</p>
<div id="display1"></div>
's full name:
<input type="text" name="fname" />
<noscript>
<div>
If you can see this then SCRIPTS are turned OFF on your machine and it won't work
</div>
</noscript>
<script type="text/javascript">
function toTitleCase(str) {
alert(str); //test
return str.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}
function fathersName(textarea) {
alert(textarea); //test
document.getElementById("display1").innerHTML = textarea;
}
</script>
</form>
</body>
</html>
<div id="display1" style="float: left;margin: 3px 0px;"></div>
The above code will make it align properly with the text 's full name.
Your function is not working properly and also two functions are not needed.
function fathersName(ele) {
var textarea = toTitleCase(ele);
document.getElementById("display1").innerHTML = textarea;
}
function toTitleCase(ele) {
var str = ele.value;
ele.value = str.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
return ele.value;
}
so input tag changes to
<input id="name1" type="text" name="groominame" onChange=" fathersName(this);"/>
If you just want to use toTitleCase in other fields, then use toTitleCase(this)
DEMO
You need to first turn it into Upper case and then display it. You just return it to nowhere instead of keeping it in a variable or placing it in the right place.
The div moves because at the end of a div there is a new line, if you want there not to be an effect use a span element.

simple javascript error - Button click appends query string on form submit

I've got a simple form that when a button is clicked, it calculates a link via concatenation and outputs the link on the same page by overwriting an existing method. The page should not redirect anywhere, even to itself.
The problem is that it appends a query string to the URL (ie /linkgenerator.html becomes /linkgenerator.html?generatelink=Generate+Link#), which actually causes two things to happen :
1) The form submits the first time properly, and then immediately reloads the page again, losing your input. Once you submit it again on the reloaded page, you're okay.
2) The query string causes the script to not work -period- when running on the local file system in IE7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SRP Link Generator</title>
<script language="javascript" type="text/javascript">
function dogeneratelink()
{
var code1= document.getElementById("code1").value;
var brand = document.getElementById("brand").value;
var code2= document.getElementById("code2").value;
var errors = checkerrors(prop, srp);
if (errors)
{
alert(errors);
return;
}
var link = "http://www." + brand + ".com/" + code1 + "/" + code2;
var a = document.getElementById("link");
a.href = link;
a.textContent = link;
}
function doclear()
{
var a = document.getElementById("link");
a.href = '';
a.textContent = '';
}
function checkerrors(code1, code2)
{
var errors;
var propset;
if (code1.length != 5)
{
errors = "You must enter a valid Code 1";
code1set = 1;
}
if ((code2.length < 4) || (code2.length > 5))
{
if (code1set == 1)
{
errors += " and Code 2";
}
else
{
errors = "You must enter a valid Code 2";
}
}
return errors;
}
</script>
</head>
<body>
<form action="#">
<h1>Link Generator</h1>
<div class="row">
<label>Code 1:</label>
<input type="text" id="code1" />
</div>
<div class="row">
<label>Brand:</label>
<select id="brand">
<option value="brand1">Brand 1</option>
<option value="brand2">Brand 2</option>
<option value="brand3">Brand 3</option>
</select>
</div>
<div class="row">
<label>Code 2:</label>
<input type="text" id="code2" />
</div>
<div class="row">
<div class="buttonrow">
<input type="submit" onclick="dogeneratelink()" id="generatelink" name="generatelink" value="Generate Link" class="button"/>
<input type="submit" onclick="doclear()" id="clear" value="Clear" class="button"/>
</div>
</div>
</form>
<div id="generatedlink"><a id="link"></a></div>
</body>
</html>
I've tried taking the action="#" out, but it doesn't seem to do anything.
All I want is the link to be calculated and immediately displayed on the screen.
Looking forward to your feedback! Thanks!
edit The form now behaves properly on submit, thanks to your advice of changing the submit type to a button.
The script works perfectly in Firefox. Unfortunately, I need it to work in IE7, and it doesn't. The validation alerts are being properly called, but the correct link is not being displayed on the page. Can anyone figure out what I did wrong?
I am not getting any Javascript errors or warnings.
edit again The last error was caused because I was using "textContent" and not "innerHTML"
Everything works now!
You don't need a form submission because you don't have to post anything to the server, all works are done by client side.
There are two ways to fix this:
add 'return false' to you onclick handler
<input type="submit" onclick="dogeneratelink(); return false" id="generatelink" name="generatelink" value="Generate Link" class="button"/>
<input type="submit" onclick="doclear(); return false" id="clear" value="Clear" class="button"/>
change the input type to button
<input type="button" onclick="dogeneratelink()" id="generatelink" name="generatelink" value="Generate Link" class="button"/>
<input type="button" onclick="doclear()" id="clear" value="Clear" class="button"/>
<form action="" onsubmit="return false;">
Replace <form action="#"> with <form> to post back to the current page, though this isn't a valid HTML technique, it works in all browsers.
Change the submit type in inputs. You don't need to send info somewhere else, then use a button
<button type="button" onclick="something();">Click Me!</button>
or styled a tag
Click Me!
Check out this working example, much simpler than what you're trying to do. Notice the link and where the link points to both change on clicking the button. You can add stuff to the textbox and it will change the link's href.
http://jsfiddle.net/BpEMA/1/
You've worked yourself into some very complicated code. Firstly, use jQuery (the learning curve is really small and the benefit is huge). Then, simplify what you're trying to do.

When I click on "convert" it won't do anything

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript">
//This is gobal array for currency and exchange rate which are used in this web page
var strCurrency=['Yen','US Dollar','Euro','Swiss Frank','Danish Korona'];
var dblExchangeRate=[128.7,1.59,1.15,2.06,9.69];
//this function will allow the user to see if their currency covert
function Currency()
{
//collect information from text boxes and combo box
var txtSterling=document.getElementById("txtSterling")
var sleCurrency=document.getElementById("cmbCurrency")
var txtCovert=document.getElementById("txtCovert")
var cmbCurrency=document.getElementById("cmbCurrency")
//this will make sure text box is empty from the start
txtCovert.value='';
//this will check to see when the user enter in numbers is vaild and there are no characters
if (isNaN(txtSterling.value))
{
txtSterling.value='';
alert('Please enter in numerical value only');
txtSterling.focus();
return;
//this will check the index of cmbCurrency and display the new currency coverstion in txtCovert. This is done by multiplying txtSterling by exchange rate for the new currency
var strSlectCurrency= cmbCurrency.selectedIndex;
var strCurrency= cmbCurrency.options[strSlectCurrency].text;
txtCovert.value= (txtSterling.value * dblExchangeRate[strSlectCurrency]).toFixed(2) + '' + strCurrency;
}
}
</script>
<body>
<h1 align="center">Money Currency Converter</h1>
<p align="left"> </p>
<p align="left">Please enter in the amount you wish to covert £
<input type="text" name="txtSterling" id="txtSterling"/>
</p>
<p align="left">Please select a currency
<select name="cmbCurrency" id="cmbCurrency" onChange="Currency()">
<option>Euro</option>
<option>US Dollar</option>
<option>Swiss Frank</option>
<option>Danish Korona</option>
<option>Yen</option>
</select>
</p>
<p align="left">
<input type="button" name="cmdCurrency" id="cmdCurrency" value="Convert" onCr65trfg5trrfrfd87lick="Currency()" />
</p>
<p align="left">
<input type="text" name="txtCovert" id="txtCovert" />
</p>
</body>
</html>
Why does nothing happen when I click "Convert", despite the fact that I have set an event handler on the button?
onCr65trfg5trrfrfd87lick should read onclick.
There are several things wrong with this code:
onCr65trfg5trrfrfd87lick should read onclick.
if (isNaN(txtSterling.value)) should be if (isNaN(parseInt(txtSterling.value,10))), since the former co-erces the empty string ("") to 0, which is not NaN. Your error handling block won't work without this change. Note also that this will not allow the user to write complex strings like "1,000". Improving this is left as an exercise to the reader.
You've put all your code into the empty string handling block. Even once this block is fixed, your code will be broken.
Your arrays strCurrency and dblExchangeRate do not match the order of currencies in the dropdown box, so the values are wrong.
The Danish currency is the Krone, not the Korona (which is a misspelt alcoholic beverage).
You've also misspelt "convert" in a few places.
Here's the fixed version (though IMO it still has style problems that are out of the scope of this question):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript"><!--
//This is gobal array for currency and exchange rate which are used in this web page
var strCurrency=['Yen','US Dollar','Euro','Swiss Frank','Danish Krone'];
var dblExchangeRate=[128.7,1.59,1.15,2.06,9.69];
//this function will allow the user to see if their currency covert
function Currency() {
//collect information from text boxes and combo box
var txtSterling=document.getElementById("txtSterling")
var sleCurrency=document.getElementById("cmbCurrency")
var txtCovert=document.getElementById("txtCovert")
var cmbCurrency=document.getElementById("cmbCurrency")
//this will make sure text box is empty from the start
txtCovert.value='';
//this will check to see when the user enter in numbers is vaild and there are no characters
if (isNaN(parseInt(txtSterling.value, 10))) {
txtSterling.value='';
alert('Please enter in numerical value only');
txtSterling.focus();
return;
}
//this will check the index of cmbCurrency and display the new currency coverstion in txtCovert. This is done by multiplying txtSterling by exchange rate for the new currency
var strSlectCurrency= cmbCurrency.selectedIndex;
var strCurrency= cmbCurrency.options[strSlectCurrency].text;
txtCovert.value= (txtSterling.value * dblExchangeRate[strSlectCurrency]).toFixed(2) + ' ' + strCurrency;
}
//--></script>
<body>
<h1 align="center">Money Currency Converter</h1>
<p align="left"> </p>
<p align="left">Please enter in the amount you wish to covert £
<input type="text" name="txtSterling" id="txtSterling"/>
</p>
<p align="left">Please select a currency
<select name="cmbCurrency" id="cmbCurrency" onChange="Currency()">
<option>Yen</option>
<option>US Dollar</option>
<option>Euro</option>
<option>Swiss Frank</option>
<option>Danish Krone</option>
</select>
</p>
<p align="left">
<input type="button" name="cmdCurrency" id="cmdCurrency" value="Convert" onClick="Currency()" />
</p>
<p align="left">
<input type="text" name="txtCovert" id="txtCovert" />
</p>
</body>
</html>
See it working here.
Hope this helps.
Your if block is wrong. It should be
if (isNaN(txtSterling.value))
{
txtSterling.value='';
alert('Please enter in numerical value only');
txtSterling.focus();
return;
}
//this will check the index of cmbCurrency and display the new currency coverstion in txtCovert. This is done by multiplying txtSterling by exchange rate for the new currency
var strSlectCurrency= cmbCurrency.selectedIndex;
var strCurrency= cmbCurrency.options[strSlectCurrency].text;
txtCovert.value= (txtSterling.value * dblExchangeRate[strSlectCurrency]).toFixed(2) + '' + strCurrency;

Categories

Resources