The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Text to Image than Send to Friend
post Sep 18 2019, 05:43 PM
Post #1

Group: Members
Posts: 4
Joined: 14-January 17
Member No.: 26,264

I have a css/javascript that lets a user by way of a form input a name on an image, they can than send the web page via email to a friend.
The problem I'm having is when the web page is sent the name the user input is missing. I don't know how to work around this.

<!DOCTYPE html>

<div class="main">
<link href="" rel="stylesheet" type="text/css" > <style> H3.testfont,P.testfont{ font-family: 'Reenie Beanie', serif; font-size: 47px; font-style: normal; font-weight: 400; text-shadow: 4px 4px 4px #bbb; text-decoration: none; text-transform: none; letter-spacing: 0.073em; word-spacing: 0.034em; line-height: 0em; } </style>
<P class="testfont"><font color="red">Happy Birthday Ecards</font></p>

<!--Prompt the user to enter the string-->
Add Name<input type="text" id="myText" onfocus="this.value=''" value="Enter Text Here" maxlength="15">
<!--When the button is clicked accept the string-->
<button onclick="myFunction()">Submit</button>

<div class="container">
<img src="" width="400" alt="alt image" />
<p class="centered" id="demo"></p>

<!--A Function that take the users text input and places it on the image-->
function myFunction() {
var x = document.getElementById("myText").value;
document.getElementById("demo").textContent = x;

/*Begin css*/
/* Container holding the image and the text */
.container {
margin-top: 50px;
margin-bottom: 20px;
margin-right: 600px;
margin-left: 600px;
position: relative;
text-align: center;
border-style: solid;
border-width: thick;

/* Centered text */
.centered {
position: absolute;
/*Moves the default text to the center of the page*/
top: 80%;
left: 48%;

/*Sets the inputted text to the center of the image horizontally*/
transform: translate(-50%, -50%);

/*Sets the font for the text*/
font-family: industry, sans-serif;
font-style: normal;
font-weight: 700;

/*Remove upon completion*/
border-style: ;

/*end css*/


<!----------------Send to Friend----------------------------------------------->

<a href="sendtofriend/sendtofriend.php?title=<?php echo urlencode('kung-fu-panda'); ?>"><font color="black"><font size="5px">Click Here to Send this Card</a>
<!---------------End Send to Friend-------------------------------------------->
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:


- Lo-Fi Version Time is now: 25th January 2020 - 09:30 AM