Help - Search - Members - Calendar
Full Version: Text to Image than Send to Friend
HTMLHelp Forums > Programming > Server-side Scripting
richsale
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>
CharlesEF
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.
pandy
Maye the input is only used by JS. I see no FORM either.

Where did you get the PHP script?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.