I believe that this is a hack and not a part of the html5 specification and fail to understand why anyone would use it when there is a perfectly good html tag that if used would solve the problem.
The “link” tag should be used for importing html from a file into a html page.
See https://www.html5rocks.com/en/tutorials/webcomponents/imports/
for guidance.
In this CodePen from post #24 I demonstrated how to select a message and put it in a <textarea>:
One way or another you need to have the HTML for the radio buttons and their labels. In post #35 I demonstated how to use fetch() to bring the radio buttons and their labels in as an HTML fragment from a separate file (which could be a .asp file).
Let’s start by assuming you want the labels to contain the same text as the messages. In which case you will need to download all the messages in order to label the radio buttons as soon as the page loads. That could be done by downloading one file, as I have demonstrated, or by downloading files for each message.
If the messages are downloaded as plain text in files message1.asp, message2.asp and message3.asp then you would use JavaScript to put the text for each message both into the ‘value’ attribute of the appropriate <input> element and into the text of its label. So each message gets inserted into the HTML twice. When a visitor to your web page clicks a radio button, the JavaScript in my CodePen would then copy the text of the selected message into the <textarea>.
Note you would not use fetch() to get the message that has been selected on the radio button because all the messages will have already been downloaded in order to label the buttons.
It is the ASP include syntax, so no it isn’t HTML.
But as with any server-side pre-processing, the desired end result on the client-side should be valid HTML.
The point being, the client browser will (should) never see that code.
2 Likes
Yes, for sure!
But where I am still confused is how to alter this code to display which ever radio button is active.
```
<div>
</div>
<script>
const d = document.querySelector("div");
fetch("message1.asp")
.then(x => x.text())
.then(y => {d.innerHTML = y + d.innerHTML;});
</script>This code only brings in message1.asp in the fetch, which is hard coded. How do I fetch, so to display, the current radio button that is clicked on.
The purpose if it helps, that in the textarea is the html code that passes through to my post page and inserts in my emailer code and the display is just an assurance that I have no mistakes, mis-spells or needed changes, etc; seeing the result of the html.
Here is code that:
- fetches three messages;
- waits for the messages to be received;
- inserts the radio buttons with labels into the HTML;
- waits for the DOM to be updated;
- adds eventListeners to the radio buttons.
When a button is clicked the selected message is copied into the <textarea>. As before the <textarea> is within a <form> which will be able to post the text including any manual edits (when form attributes are added).
<!DOCTYPE html>
<html>
<head>
<title>Message Options</title>
<style>
div,
form {
display: inline-flex;
flex-direction: column;
}
form {
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<form method="post">
<textarea id="message" name="message"></textarea>
<button>Post</button>
</form>
</div>
<script>
const d = document.querySelector("div");
var message1, message2, message3;
fetch("message1.txt")
.then(x => x.text())
.then(y => {message1 = y} )
fetch("message2.txt")
.then(x => x.text())
.then(y => {message2 = y})
fetch("message3.txt")
.then(x => x.text())
.then(y => {message3 = y})
await(); // to await receipt of all 3 messages
function await(){
if(message1 && message2 && message3) insert();
else setTimeout(await, 50);
}
function insert(){
d.innerHTML = `<label><input type="radio" name="option" value="${message1}">${message1}<\/label>
<label><input type="radio" name="option" value="${message2}">${message2}<\/label>
<label><input type="radio" name="option" value="${message3}">${message3}<\/label>
` + d.innerHTML;
setTimeout(listen, 200); // for DOM updating time
}
function listen(){
let buttons = document.querySelectorAll("input");
buttons.forEach(element => element.addEventListener("click", selection));
}
function selection(evt) {
document.getElementById("message").innerText = evt.target.value;
}
</script>
</body>
</html>
I cannot use CodePen for this so have uploaded this HTML file and the 3 text files to free web space. Here is the web page: http://create.mywebcommunity.org/message-options2.html
As that’s on free web space you may get a phishing security warning.
Sorry I thought that html example was part of the DOM.
I appreciate your time but this doesn’t work with the asp include files as previously stated.
I think the best solution for me is @PaulOB example in post #47. Gives me everything I need. If I am not able to fetch or display the selected radio button, then I can easily put all messages in there own display using a single fetch per message or even an iframe to view them at the bottom of the page.
To be honest, the best solution would be using JavaScript and Ajax. Everything else is some kind of workaround
I don’t doubt your opinion because you have the expertise in that. If you can get me started and show some examples I will attempt to digest it and then learn from it.
Thank you.
This is a long learning process.
To start with is to separate your applications into front-end and backend. Do no longer use asp for frontend code. Use something else. I would advise to learn vanilla JavaScript first to understand to underlying Technologie, but you can also directly start with some Framework like Angular or Vue.
Writing a complete application in asp.net or php is 80th style. It’s no longer recommended.
1 Like
In my JavaScript, have you changed message1.txt to message1.asp etc?
Do you have my HTML file and your three ASP files uploaded to the same folder of your server?
What do you see in a browser if you download one of your message ASP files by putting its URL in the browser address bar?
I appreciate your candor and I was afraid that was what you were going to say. Honestly, I don’t have the expertise and time with my business to do that. This is why “work arounds” best fit my needs; and rarely do they not work. I am getting close to the end of my useful life! This is why I appreciate the help from time to time with this forum for help. Rarely does @PaulOB and @SamA74 and others not have the ability to help, which is always greatly appreciated. I could only wish I had the talent as many do on this forum!
Thank you.
1 Like
If you desire to build modern websites quickly without requiring any code I recommend checking out Airtable and Radzen. Airtable enables users to quickly create tables of data both through a ui and rest api without code. Radzen provides a desktop app to assemble websites using a graphical ui without any code. You can consume and persist form submissions from Radzen into Airtables using the rest api integration in Radzen. Zapier is another cloud tool that can be added to the stack to add automation and workflows into your project(s) without code.
Yes, all in the same folder.
I see the file. No issues there.
Thank you for that information as I will look at it later. My websites are heavily SQL database driven; several tables with lots of inner joins, etc. Also lots of conditional (if then statements) and other ASP functions. Is that a problem when using those websites?
If I was handed this project and goal was to modernize with minimal impact to existing pages I would begin with creating a Graph QL server for the existing database. Once the Graph QL server was created migrate to building new sites as SPAs using something like next.js or nuxt 3. This would enable you to focus mostly on the front-end application and user experience since queries can be written and dispatched directly in the browser rather than needing additional server-side API.
In your browser window you should be seeing one of your messages displayed as text.
Are you sure your hosting supports ASP server-side scripting?
You don’t want message1.asp to download all the ASP code, you just want the script within the ASP file on your server to generate and download a message as plain text.
Thank you for your advice, I appreciate it.
Yes
I need the entire html code to display in the textarea because that passes through to the emailer.
Did you ever actually look at the reference I gave in #63?
Because the link element is the html method of importing html files into html documents.
Question how are you handling any http error?
Are you just going to display it where the message will be displayed.
Using the link api loads the message file contents as the page is loading and as explained in the reference I sent you allows mitigation of errors when reading in the file.