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.
Related
Note: I'm a total novice at any coding. I'm just a dumb amature graphic designer. I've only ever created a page that lets me copy the
the most common phrases I had to leave in notes all day. I struggled
with it.
I'm trying to create this page that lets input something into a text field, and it applies it to defined URLS attached to buttons, that will bring me to those pages. Since I struggle to describe it, please see this visual: https://i.stack.imgur.com/ZplRK.jpg
I've tried co-opting some scripts for similar problems, but with no luck. (See below for examples before I edited them ). I included them to see if I was on the right track whatsoever. I know I'm gonna have an issue with multiple functions, probably?
<script type="javascript">
function goToPage(var url = '')
{
var initial = "http://example.com";
var extension = "html";
window.location(initial+url+extension);
}
</script>
<form name="something" action="#">
Label <input type="text" name="url" value="" onchange="goToPage(this.value)">
</form>
<SCRIPT type="javascript">
function goToPage(var url = '')
{
var initial = "https://cms.example.com/client/viewcasedetails";
var extension = "";
window.location(initial+url+extension);
}
</SCRIPT>
<TITLE>Redirect 1</TITLE>
<BASE HREF="https://cms.example.com/client/viewcasedetails">
</HEAD>
<BODY>
<P>
<FORM name="jump" action="#">
CMS ID:
<INPUT type="text" name="url" value="" onSubmit="goToPage(this.value)">
<INPUT type="submit" value="GO">
That's where I at. I'm just tired of typing the same long URLs all day at work, and messing up more than half the time. I have no clue what the solution is - Javascript? HTML? CSS? Just trying to seek the DIY answer before looking on how to hire someone to make it. Which I have no clue how to do either but that's another question for later.
Thanks for helping / apologies for possibly super dumb questions.
You could do something like the following:
// grab the input element
const input = document.getElementById("cmsId");
// grab all links that need to be updated accordingly
// when value inside input element changes
const links = document.querySelectorAll("a");
// create a handler that listens for changes when
// you type some text into the input element
input.addEventListener("input", (event) => {
// grab value inside input elemenet
const value = event.target.value;
// iterate through all links and update
// the inner text + href attribute accordingly
// NOTE: `baseUrl` for each link is stored in a
// `data-*` attribute
links.forEach((link) => {
const baseUrl = link.dataset.url;
const url = baseUrl + value;
link.innerText = url;
link.href = url;
});
});
<!-- Use a simple input element here, no need for a form -->
<div>CMS ID: <input id="cmsId" type="text" /></div>
<div>
<!-- No need to create buttons, simple anchor elements will work just fine -->
<a
id="main"
href="#"
target="_blank"
data-url="https://cmss.company.com/client/viewclientdetails/"
>
https://cmss.company.com/client/viewclientdetails/
</a>
</div>
<div>
<a
id="notes"
href="#"
target="_blank"
data-url="https://cmss.company.com/client/viewnotes/"
>
https://cmss.company.com/client/viewnotes/
</a>
</div>
<div>
<a
id="docs"
href="#"
target="_blank"
data-url="https://cmss.company.com/client/documentsall/"
>
https://cmss.company.com/client/documentsall/
</a>
</div>
<div>
<a
id="activity"
href="#"
target="_blank"
data-url="https://cmss.company.com/client/viewactivityledger/"
>
https://cmss.company.com/client/viewactivityledger/
</a>
</div>
In your code you are working with only the "main" button as I can see (as it goes to viewclientdetails). You are missing a "/" sign after var initial. So, assuming that you can implement the same functionality of the main button to the other buttons, here's what you can do:
<script type="text/javascript">
function goToPage(var url = '')
{
var initial = "https://cms.example.com/client/viewcasedetails/"; //I added the slash
var extension = "";
window.location(initial+url+extension);
}
</script>
<TITLE>Redirect 1</TITLE>
<BASE HREF="https://cms.example.com/client/viewcasedetails">
</HEAD>
<BODY>
<P>
<FORM name="jump" action="#">
CMS ID:
<INPUT type="text" name="url" value="" onSubmit="goToPage(this.value)">
<INPUT type="submit" value="GO"> //you need 4 buttons here
You cannot have an input type="submit" here, since you will need four buttons. Submit works like a form submission. Add four buttons, then for each button's onClick property add the desired redirect url. You will need to get the value for the input field using an ID tag.
An example of what I am trying to say is given below:
<script type="text/javascript">
function onMainButtonClicked()
{
var cmsid= document.getElementById("cmsID").value;
var initial = "https://cms.example.com/client/viewcasedetails/"; //I added the slash
var extension = "";
window.location(initial+cmsid+extension);
}
function onNotesButtonClicked()
{
...
}
function onDocsButtonClicked()
{
...
}
function onActivityButtonClicked()
{
...
}
</script>
<TITLE>Redirect 1</TITLE>
<BASE HREF="https://cms.example.com/client/viewcasedetails">
</HEAD>
<BODY>
<P>
<FORM name="jump" action="#">
CMS ID:
<INPUT type="text" id="cmsID" name="url" value="">
<button onclick="onMainButtonClicked()">Main</button>
<button onclick="onNotesButtonClicked()">Notes</button>
<button onclick="onDocsButtonClicked()">Docs</button>
<button onclick="onActivityButtonClicked()">Activity</button>
There are much better ways to implement this, but this is a very simple implementation.
i'm with a ridiculous problem (i think). I just can't get a tag content using a Script/Function/document.getElementById. The alert tha i'm using to see the content of variable (wM) is always blank. I looked a lot of examples in the Web and all of them is similar, sometimes just like my code. See below:
<!DOCTYPE html>
<html lang ="pt-br">
<head>
<title> loginServlet2 </title>
<meta http-equiv = ”Content-Type” content=”text/html; charset=UTF-8”>
<link rel="stylesheet" type="text/css" href="c:/java/html/css/estilo.css"/>
<script type="text/javascript">
function oMsg()
{
var wM = document.getElementById("wMsgB").textContent;
// var wM = document.querySelector("span").textContent;
alert("wM = "+ wM);
if (wM == "Teste OK!")
{
// document.getElementById("wMsgA").innerHTML = "Test is OK";
document.getElementById("wMsgA").textContent = "Test is OK";
}
else
{
alert("Test is not OK. Before set new msg");
document.getElementById("wMsgA").textContent = "Test is not OK";
}
}
</script>
</head>
<body>
<h2> Login Page2 </h2>
<p>Please enter your username and password</p>
<form method="GET" action="loginServlet2">
<p id="test2"> Username <input type="text" name="userName" size="50"> </p>
<p> Password <input type="password" name="password" size="20"> </p>
<p> <input type="submit" value="Submit" name="B1" onclick="oMsg()"> </p>
</form>
<h3> MsgB : <span id="wMsgB"<%=request.getAttribute("wMsg")%></span></h3>
<p> MsgA : <span id="wMsgA"> </span> </p>
</body>
</html>
Could anyone help me, please? Thanks.
You are trying to get the value of a p element, but p elements don't have a value property. Only form fields do. Non-form fields that contain text between their opening and closing tags have .textContent and .innerHTML properties you can use to get/set their contents.
If you want to give the user a place to type in some data, you need to create some input form fields and then you have to wait until they've done that before attempting to get the values.
Next, you have smart quotes “” instead of straight quotes "" which can cause encoding problems. Make sure you write your code in an editor that doesn't apply any formatting to the code. There are plenty of great free web editors out there.
You also have a reference to a .css file using a full local path, which isn't going to work when you deploy this code later. You should be using relative paths to reference files that are part of your system.
Finally, you are using some old HTML syntax in your meta, link and script tags, so take note of the modern versions of those in the snippet below.
<head>
<title>loginServlet2</title>
<meta charset=UTF-8”>
<link rel="stylesheet" href="c:/java/html/css/estilo.css"/>
<script>
function oMsg() {
var wM = document.getElementById("wMsg").textContent;
alert("wM = " + wM);
if (wM == "Test OK!") {
document.getElementById("wMsgA").textContent = "Test is OK";
} else {
alert("Test is not OK. Before set new msg");
document.getElementById("wMsgA").textContent = "Test is not OK";
}
}
</script>
</head>
<body>
<h2> Login Page2 </h2>
<p>Please enter your username and password</p>
<form method="GET" action="loginServlet2">
<p id="test2"> Username <input type="text" name="userName" size="50"> </p>
<p> Password <input type="password" name="password" size="20"> </p>
<p> <input type="submit" value="Submit" name="B1" onclick="oMsg()"> </p>
</form>
<h2>MsgB : <span id="wMsg"><%=request.getAttribute("wMsg")%></span> </h2>
<p>MsgA : <span id="wMsgA"> </span> </p>
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.
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
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.