The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Text to Image than Send to Friend
richsale
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.
https://happy-birthday-ecards.com/new14.htm

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<center>
<div class="main">
<link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" 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="https://happy-birthday-ecards.com/boss-baby1a.jpg" width="400" alt="alt image" />
<p class="centered" id="demo"></p>
</div>

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


</body>
<style>
/*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-color:black;
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%);
Color:gold;

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


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

/*end css*/
</style>


<p>


<!----------------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-------------------------------------------->
</html>
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