The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
CharlesEF
post Sep 18 2019, 06:45 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Since you posted no server-side code I'm going to guess that your missing the name attribute. I assume element 'id="myText"' is the input you are talking about. If that is correct then you are missing the name attribute, it should be: id="myText" name="myText"
Without the name attribute then the element value is NOT sent to the server. First, add the name attribute then see if that fixes things.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 19 2019, 04:39 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Maye the input is only used by JS. I see no FORM either.

Where did you get the PHP script?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 19th March 2024 - 05:54 AM