I did look at it in briefly, with detail to follow. On the link tag, does it import an asp page? I don’t use any pages with an extension of html, all our asp pages.
The link tag only imports pages that are publicly accessible by the internet at large.
ASP on the other hand can access any kind of internal file that your server has access to.
This displays HTML code in the textarea:
<!DOCTYPE html>
<html>
<head>
<title>Message Options</title>
<style>
* {
box-sizing: border-box;
}
body, form {
display: inline-flex;
flex-direction: column;
width:400px;
}
form {
outline: 1px solid red;
align-items: center;
}
textarea{
width:100%;
height:150px;
}
</style>
</head>
<body>
<label><input type="radio" name="option" value="1">1</label>
<label><input type="radio" name="option" value="2">2</label>
<label><input type="radio" name="option" value="3">3</label>
<form method="post">
<textarea name="html"></textarea>
<button>Post</button>
</form>
<script>
const d = document.querySelector("div");
var html1, html2, html3;
let buttons = document.querySelectorAll("input");
buttons.forEach(element => element.addEventListener("click", selection));
fetch("file1.html")
.then(x => x.text())
.then(y => {html1 = y})
fetch("file2.html")
.then(x => x.text())
.then(y => {html2 = y})
fetch("file3.html")
.then(x => x.text())
.then(y => {html3 = y})
function selection(evt) {
var ta = document.querySelector("textarea");
if(evt.target.value=="1") ta.innerHTML = html1;
if(evt.target.value=="2") ta.innerHTML = html2;
if(evt.target.value=="3") ta.innerHTML = html3;
}
</script>
</body>
</html>
I cannot use CodePen for this so have uploaded this HTML file and the 3 HTML files to free web space. Here is the web page: http://create.mywebcommunity.org/message-options3.html
As that’s on free web space you may get a phishing security warning.
I don’t know how you intend to label the radio buttons.
<div class="choices">
<label><input checked type="radio" name="message" data-destination=".message1" value="Message1">Show Message 1</label>
<label><input type="radio" name="message" data-destination=".message2" value="Message2">Show Message 2</label>
<label><input type="radio" name="message" data-destination=".message3" value="message3">Show Message 3</label>
</div>@Paul_Wilkins When I post the message, all is good, the textarea displays just fine, but above the message, the value in the input type also passes through.
So it looks like this:
Radio button 1:
Message 1,
-----message here----
Radio button 2:
Message 2,
-----message here----
So the value is passed through with a comma.
If I make the value blank, then just a comma is posted through.
I can’t seem to remove that. Your thoughts, Thanks!
I’m not seeing that problem when I perform a post request using those form elements.
Can you put together a test page that helps us to experience the problem?
<!DOCTYPE html>
<html>
<head>
<style>
.message-selection {
display: flex;
flex-direction: column;
margin: 1rem auto;
max-width: 800px;
}
.choices {
display: flex;
justify-content: space-between;
margin: 0 0 1rem;
padding: 1rem;
border-bottom: 1px dotted #000;
}
.messages label {
display: grid;
grid-template-columns: 1fr 4fr;
align-items: center;
margin: 0 0 1rem;
}
.messages span {
padding: 10px;
}
.messages .hide-message {
display: none;
}
.submit {
margin: auto;
display: block;
}
</style>
</head>
<title>Message Options</title>
<body>
<form method="POST" action="post_test.asp">
<fieldset class="message-selection">
<legend>Message</legend>
<div class="choices">
<label><input checked type="radio" name="message" data-destination=".message1" value="Message1">Show Message 1</label>
<label><input type="radio" name="message" data-destination=".message2" value="Message2">Show Message 2</label>
<label><input type="radio" name="message" data-destination=".message3" value="message3">Show Message 3</label>
</div>
<div class="messages">
<label class="the-message message1"><span>This is message 1</span><textarea rows="10" name="message" cols="63">Message 1 test in Textarea</textarea></label>
<label class="the-message message2 hide-message"><span>This is message 2 with some longer text to wrap</span><textarea disabled rows="10" name="message" cols="63">Message 2 test in Textarea</textarea></label>
<label class="the-message message3 hide-message"><span>This is message 3</span><textarea disabled rows="10" name="message" cols="63">Message 3 test in Textarea</textarea></label>
</div>
</fieldset>
<input class="submit" type="submit" value="Send">
</form>
<script>
/*
Forum question answer only:
https://www.sitepoint.com/community/t/textarea-multiple-selections/387845/12
*/
/* js must follow html and not before it */
(function (d) {
"use strict";
const messages = d.querySelectorAll(".the-message");
const choices = d.querySelectorAll("[data-destination]");
const textareas = d.querySelectorAll(".messages textarea");
choices.forEach((btn) => {
btn.addEventListener("click", showTextareas);
});
function showTextareas(event) {
var thisInput = event.target;
var dataTarget = thisInput.dataset.destination;
hideTextareas();
showTextarea(dataTarget);
}
function hideTextareas() {
messages.forEach((message) => {
message.classList.add("hide-message");
});
textareas.forEach((area) => {
console.log(area);
area.disabled = true;
});
}
function showTextarea(dataTarget) {
d.querySelector(dataTarget).classList.remove("hide-message");
d.querySelector(dataTarget + " textarea").disabled = false;
}
})(document);
</script>That is your code.
This is the post page with graphics to follow:
<%
message= Request.Form ("message")
%>
<!DOCTYPE html>
<HTML>
<HEAD>
</HEAD>
<BODY>
<%
response.write message
%>
</BODY>
</HTML>
The yellow hightlight is what is displaying on the post page.
@PaulOB Also forgot to mention that if I complete delete that text, I get
on,
and then the message follows
I don’t think that has anything to do with me:) Did you mean to mention @Paul_Wilkins instead 
Sorry! You are right!
I did mean that to go to @Paul_Wilkins as it relates to Post #88.
2 Likes
Thank you for putting together the test page.
When I said “help us” I really meant “us” and not the “Royal me”.
I have recently moved to Linux on my computer, and don’t know how to simulate an ASP server on here without risking damage to my already precarious setup.
If someone else can use that test page to help further with the issue, that would be great.
My initial suspicion is that you are seeing both the name of the input element, and the value of the input element as well.
Yes, this is the value that is passing through, which it shouldn’t.
And using the value as " " (blank) doesn’t help.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.