This may be a bit simplistic but I was thinking of something like this.
I’m sure the JS could be tidied up but it may be useful for testing to see if you can work with this.
Thanks for clarifying what you are trying to achieve.
Is this getting closer to what you want?
Notes:
- the form has red border so the radio button selection is outside the form;
- the value attribute of the selected
<input>element is copied into the text area, not the label text; - form is set to method ‘post’.
As you have now stated that you may use the messages in other web pages, I agree with the suggestion of @windbeneathmywings to use Ajax HTTP request e.g. fetch() instead of #include. You could allow the radio button labels to be different from the messages (as CodePen above).
1 Like
I was thinking the other way around, where the asp includes would populate a javascript array of text strings.
const messages = [
'<!-- #include file="message1.asp" -->',
'<!-- #include file="message2.asp" -->',
'<!-- #include file="message2.asp" -->',
];
Then the radio selection would determine which string from the array to show.
1 Like
I’m not great with JS, so this probably took me longer than it should, but this is the idea.
It currently shows the code to include the include, but the idea is when run from an ASP server it should put the include content there.
1 Like
First of all, thank you for that. I have spent a lot of time testing before this response. This is how I am using the include:
<label><input type="radio" name="message" value=<!-- #include file="message1.asp" --></label>
<label><input type="radio" name="message" value=<!-- #include file="message2.asp" --></label>In the textarea field it show about 20 characters of the selected message. But when you post, it doesn’t push the message through to the post page. I experimented with using quotes and double quotes for the value field, no difference.
However, if I copy and paste the entire html message, it DOES go through to the post page.
I did a lot of research on include files with radio buttons and couldn’t find any examples of whether it should or shouldn’t work.
So that’s where I am at with testing the code.
Trying this now…results soon. Thank you for posting, I appreciate your time.
const messages = [
'<!-- #include file="message1.asp" -->',
'<!-- #include file="message2.asp" -->',
'<!-- #include file="message3.asp" -->'This works in an html page by duplicating your efforts. When I put the code in an ASP page only the default message shows in the textarea. The radio buttons don’t work. My best guess it has to do with the way the includes are in the const messages part of the code.
I don’t see there is any problem bringing the messages in using #include, XMLHttpRequest() or fetch(). However I would suggest bringing all the messages in from one file, then you would be able to easily change the number of mesages without updating the one or more web pages that use the messsages.
I do not understand why you have what you call a “post page”. Why not have just one page?
If you really need to redirect to a “post page” after selecting a message then the HTML of the form opening tag could become something like:
<form action="postpage.php" accept-charset="UTF-8" method="post" target="_self" enctype="application/x-www-form-urlencoded">
You would then need to write the PHP to generate your post page incorporating the message (save it with the filename in the form’s action attribute).
Assuming your post page has a form, like a ‘Contact Us’ form, then you would need to have another PHP fle which sends the email and generates a web page confirming the emal has been sent.
What do you see in the page source? The idea is that each entry in the array should be the message text from the include file.
So you should end up with something like:-
const messages = [
'Text for message #1.',
'Text for message #2.',
'Text for message #3.',
];
I’ve never worked with ASP, so don’t know the syntax for an include, or the content of your include files.
Though I do work with PHP, which probably works in a similar way.
What I would probably do is have the server-side render the array. Eg, in PHP you have json_encode() that will turn an object or array into JSON that can be printed to the page and javascript understands. Does ASP have something similar? Either was, I’m sure there will be some means to make it print the array of messages to the page.
My approach would be to use fetch() to get the complete HTML of the radio buttons group (including labels), simply as one HTML fragment for JavaScript to insert into the DOM.
If you can eliminate trips to the server by embedding the data in the html using JSON all the better. For a small amount of data this is the optimal approach. However, if your templates rely on external variables for their rendering than you will probably need the extra requests using fetch to generate them.
Yes, this was the intention. The server has one shot putting all the text into JSON at the initial request. Then javascript selects the text from that based on the radio selection and fills the box, as per my Pen.
I have removed the radio button group (with labels) from my CodePen above and used fetch() to retrieve the HTML of the radio group from another file (file name is message.html). Here is the HTML of the web page wthout the radio group:
<!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");
fetch("messages.html")
.then(x => x.text())
.then(y => {d.innerHTML = y + d.innerHTML;})
.then(delay());
function delay(){
const t = 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>
My file messages.html contains this HTML fragment:
<label><input type="radio" name="option" value="Merry Christmas">Christmas</label>
<label><input type="radio" name="option" value="Happy Birthday">Birthday</label>
I cannot use CodePen for this so have uploaded both HTML files to free web space. Here is the web page: http://create.mywebcommunity.org/message-options1.html
As that’s on free web space you may get a phishing security warning.
I am aware the code could be improved: this was just to get it working! The form is not yet posting the selected message.
The radio group of message options remains available for retrieval by other web pages (as requested).
2 Likes
I do see each includes in the page source. It just doesn’t change when using the default message. In other words, it’s not loading to the screen.
Not sure what you want me to do with the above code.
I have the first part of your code and it shows the fetch document, with the empty textarea underneath it.
We would need to see the exact code you are working with. The client side render of the HTML would probably be best, if the includes are doing their part, along with the JS of course.
This is a copy and past of your code; hopefully I didn’t mess up in the process:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
label {
display: block;
padding-top: 0.6em;
}
textarea {
max-width: 90%;
}
</style>
</head>
<body>
<form>
<div id="radios">
<label>Message 1 <input type="radio" value="0" name="select" checked></label>
<label>Message 2 <input type="radio" value="1" name="select"></label>
<label>Message 3 <input type="radio" value="2" name="select"></label>
</div>
<label for="message">Text Message</label>
<textarea name="message" id="message" cols="60" rows="10">
<!-- #include file="message1.asp" -->
</textarea>
</form>
<script>
const messages = [
'<!-- #include file="message1.asp" -->',
'<!-- #include file="message2.asp" -->',
'<!-- #include file="message3.asp" -->'
];
const text = document.getElementById("message");
const radios = document.querySelector("#radios");
const putMessage = function (event) {
const target = event.target;
const index = target.value;
text.textContent = `${this[index]}`;
};
radios.addEventListener("change", putMessage.bind(messages));
</script>
</body>
</html>Well that works, exactly as it does in the Codepen.
What about the code you are working with?
I just don’t think that beyond the default message1, the other include files load to the textarea. As it relates to the code, that is exactly the code I am working with. If I change the default to message2, then message2 shows in the textarea, but the others don’t load.
That HTML fragment needs to be in a file named messages.html in the same folder as the HTML of the web page. The fetch() will then bring in the radio button options.
With my code if the HTML is used in other mailers or web pages, you only have to change the HTML fragment in messages.html once. Therefore you can easily add, delete or edit options.