Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Server-side Scripting _ Text to Image than Send to Friend

Posted by: richsale Sep 18 2019, 05:43 PM

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>

Posted by: CharlesEF Sep 18 2019, 06:45 PM

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.

Posted by: pandy Sep 19 2019, 04:39 AM

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

Where did you get the PHP script?

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)