Is it possible to write a php form that will create an html document where the input field(s) on the form will populate particular areas in the HTML? example: PHP form field Image Name= test.jpg and when you hit submit, the text "test.jpg" will automatically be inserted into the html code and return something like ".....img src="test.jpg"......
Here is an example of the code: <html> <head> <title>Personal INFO</title> </head> <body> <?php $title = $_POST["title"]; $img = $_POST["img"]; $desc = $_POST["desc"]; if (!isset($_POST['submit'])) { // if page is not submitted to itself echo the form ?> <form method="post" action="<?php echo $PHP_SELF;?>"> Worksheet Title:<input type="text" size="12" maxlength="12" name="title"><br /> Name of JPEG:<input type="text" size="12" maxlength="36" name="img"><br /> Description:<input type="text" size="12" maxlength="36" name="desc"><br /> <input type="submit" value="submit" name="submit"> </form> <? } else { echo "Your worksheet is called ".$title." .<br />"; echo "Its description is: ".$desc." .<br />"; echo "<div class="itemcontainer"><div class="left"><a class="p1" href="#v"><img src="".$img."" alt="" border="1" width="855" height="1097" v-align="top" />"; } ?> Code (markup): I got this error returned: Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in ...public_html/housedogg/test/uploadtest.php on line 22
Don't encapsulate echos in double quotes. Instead of: echo "<div class="itemcontainer"><div class="left"><a class="p1" href="#v"><img src="".$img.""alt="" border="1" width="855" height="1097" v-align="top" />"; Use: echo '<div class="itemcontainer"><div class="left"><a class="p1" href="#v"><img src="'.$img.'"alt="" border="1" width="855" height="1097" v-align="top" />';
That helped. I don't get the error anymore so that's good. However, the html does not display, just a big empty square. I need the html to be displayed so that I can the copy and paste it into the page html on my site. I don't know if I'm making sense or not.
To display the HTML as code instead of being parsed as markup, you have to turn certain characters into entities -- < and > for example. Thankfully PHP has a function that can do that for you -- htmlspecialchars. I'd wrap said output in PRE and CODE since it's code... pre-formatted. echo '<pre><code>',htmlspecialchars(' <img src="'.$img.'" alt="'.$desc.'" /> '),'</pre></code>; Code (markup): Though again, your code has some oddball issues -- what's with the extra DIV for nothing, presentational DIV/Class, multiple echo doing the job of just one, string additions for nothing, storing values in extra variables for no good reason, the long deprecated PHP 4 style php_self, and attributes like valign and border that have zero business in any markup written after 1997? I know, I know, you're just starting out I tossed together a little demo for you: http://www.cutcodedown.com/for_others/trenttdogg/formToMarkup/ with phps files so you can see the source. The one that matters is this: http://www.cutcodedown.com/for_others/trenttdogg/formToMarkup/demo.phps Which you'll notice uses htmlspecialchars and it's cousin htmlentities a good deal. When outputting user input as markup it helps to try and use those functions a LOT to prevent cross site scripting exploits. I also added some basic validation of values and it will automatically add width and height if entered on the form (just as an example). Naturally being modern code the only values that should be in there are src, alt, width and height... as mentioned before BORDER, VALIGN, etc, etc, have no business in the markup.
Thanks DeathShadow. Yes, I am a complete beginner in PHP and nothing more than a code butcher in HTML but it's fun learning(i think)
Wow. Thanks for the markup, It may as well be written in Hebrew though. But it gives me something to play around with for awhile.
What I'm trying to do is to come up with an easier way to put up documents on my site. Rather than manually entering data into the HTML, I want a form that I can enter the data and it puts it into the HTML for me, then I copy the generated HTML and paste it on the web page. Here's the actual html that I want the form to put info into. Where it says "...INPUT FROM FORM" are the fields from the PHP form. <!--CONTAINER START--> <div class="itemcontainer"> <div class="left"> <a class="p1" href="#v"><img src="IMG INPUT FROM FORM" alt="TEXT INPUT FROM FORM" /> <img class="large" src="IMG INPUT FROM FORM" alt="TEXT INPUT FROM FORM"/></b></a></div> <div class="middle"><h1 class="item">TITLE INPUT FROM FORM</h1> <p class="item">DESCRIPTION INPUT FROM FORM</p> <h3 class="item">GRADE LEVEL INPUT FROM FORM</h3></div> <div class="right"><p><h4 class="item">PRICE INPUT FROM FORM</h4> <img border="0" src="IMG INPUT FROM FORM"></p> </div> </div> <!--CONTAINER END--> Code (markup): I tried tweaking the markup you sent but keep getting errors.
That's some BAD markup you're trying to plug this stuff into... What makes H1.item the heading under which the entire page is built from subsections? What makes H3.item a subsection of a h2 when you don't have any H2's and/or the start of a new subsection? Same for the H4, what makes that the start of a subsection? (when there's not even any content after you close H4) Why are you putting class="item" on every element when there's a perfectly good parent container? Why the paragraph around non-paragraph content like price? Two copies of the same image? That's probably not a good thing either. Rather than cut/paste markup generated by the PHP into the pages, I'd let the PHP generate it EVERY time. That's how people do it. You can store the 'input' values in an array (or even better a database) and plug them in using a function. Something like: (gutting that markup down a bit) function itemContainer($item) { echo ' <div class="itemContainer"> <a href="#v" class="plate"> <img src="',$item['src'],'" alt="',$item['alt'],'" /> </a> <div class="content"> <h2>',$item['title'],'</h2> <p>',$item['text'],'</p> <div>',$item['grades'],'</div> <!-- .content --></div> <div class="price"> ',$item['price'],' <!-- .price --></div> <!-- .itemContainer --></div>'; } Code (markup): You then just iterate with 'foraech' through an array of arrays, which is within spitting distance of how a database works. The array of arrays would look something like this: $itemList = array( array( 'src' => 'images/test1.png', 'alt' => 'short text of image one', 'title' => 'First Image', 'text' => 'Long text of image one', 'grades' => 'K though 3', 'price' => '<del>$10.00</del><span>FREE</span>' ), array( 'src' => 'images/test2.png', 'alt' => 'short text of image two', 'title' => 'Second Image', 'text' => 'Long text of image two', 'grades' => '4 though 6', 'price' => '<del>$10.00</del><span>FREE</span>' ) ); Code (markup): Which is then simple enough to foreach through: foreach ($itemList as $item) itemContainer($item); Code (markup): Which is a far simpler solution than entering them, and then cutting/pasting every time. Just enter them once in the code, and let the code build the markup from the data. Again, it's also spitting distance from how you'd handle it from a database, which is how real websites do it. If I was keeping it in the code, I'd keep an extra copy of the sub-array handy with no values plugged in: ), array( 'src' => '', 'alt' => '', 'title' => '', 'text' => '', 'grades' => '', 'price' => '' Code (markup): To copypasta into the array when creating new ones... just paste it right before the last indented ). One big advantage of this approach vs. what you were doing? When/if you want to change the markup on all of them, you only have to edit the one function instead of each and every element you cut/pasted into the page.
what you are talking about is EXACTLY what I want to achieve, but have no idea how to implement it. I do know how to set up a database(mysql) but have no idea how to have the php code get and display that data. Do you freelance?
Is this the markup that would appear on the page? <?php function itemContainer($item) { echo ' <div class="itemContainer"> <a href="#v" class="plate"> <img src="',$item['src'],'" alt="',$item['alt'],'" /> </a> <div class="content"> <h2>',$item['title'],'</h2> <p>',$item['text'],'</p> <div>',$item['grades'],'</div> <!-- .content --></div> <div class="price"> ',$item['price'],' <!-- .price --></div> <!-- .itemContainer --></div>'; foreach ($itemList as $item) itemContainer($item); $itemList = array( array( 'src' => 'images/test1.png', 'alt' => 'short text of image one', 'title' => 'First Image', 'text' => 'Long text of image one', 'grades' => 'K though 3', 'price' => '<del>$10.00</del><span>FREE</span>' ), array( 'src' => 'images/test2.png', 'alt' => 'short text of image two', 'title' => 'Second Image', 'text' => 'Long text of image two', 'grades' => '4 though 6', 'price' => '<del>$10.00</del><span>FREE</span>' ) ); } ?> Code (markup): and then I would create a new array whenever I add a "worksheet" to my site?
I used to, but due to my health (and doctors orders... Lupus, non-24 sleep-wake syndrome, and medication induced Parkinsonism and Phototoxicology) I've not been taking on new clients and been weaning my old ones off support for years now... I don't want to commit to anything I might have to drop out of at any moment leaving you or anyone else 'hanging' just because I'm doped up in bed for a week or off to supervised care. -- which is why I spend time just helping people where i can for free... TECHNICALLY I'm not even supposed to be doing this much (helping for free and working on my own projects) -- but I've never been very good at just sitting around with my thumb wedged up my backside. I tossed together a quick demo of the above code -- with matching PHPS so you can see the source. I even added a bit of CSS to make it style similar to what you were doing on the page I think that's for. There's some extra padding around the body so the hover effect has room to do it's thing... naturally since I used CSS3 the transition won't work IE9 and lower -- OH WELL http://www.cutcodedown.com/for_others/trenttdogg/arrayToMarkup/ the template.php is the same as the other demo, I added a items.template.php to keep that markup function on it's own -- a more robust system would allow for multi-theming by placing them in a directory like /themes/default or /themes/customThemeName The real magic of course is in the demo.php showing how simple it is to use. I also beefed up the function in items.template.php to automatically format number values to two decimal place or 'free' if you pass it zero. Your link to actually buy/pay I'd generate automatically in said function, possibly passing the order URL as another array index.
You've got it a little backwards -- closing the function should be done BEFORE the array declaration... and the array declaration belongs BEFORE the foreach -- otherwise there's nothing for foreach to ... well... for each. <?php function itemContainer($item) { echo ' <div class="itemContainer"> <a href="#v" class="plate"> <img src="',$item['src'],'" alt="',$item['alt'],'" /> </a> <div class="content"> <h2>',$item['title'],'</h2> <p>',$item['text'],'</p> <div>',$item['grades'],'</div> <!-- .content --></div> <div class="price"> ',$item['price'],' <!-- .price --></div> <!-- .itemContainer --></div>'; } $itemList = array( array( 'src' => 'images/test1.png', 'alt' => 'short text of image one', 'title' => 'First Image', 'text' => 'Long text of image one', 'grades' => 'K though 3', 'price' => '<del>$10.00</del><span>FREE</span>' ), array( 'src' => 'images/test2.png', 'alt' => 'short text of image two', 'title' => 'Second Image', 'text' => 'Long text of image two', 'grades' => '4 though 6', 'price' => '<del>$10.00</del><span>FREE</span>' ) ); foreach ($itemList as $item) itemContainer($item); ?> Code (markup): The function is closed BEFORE the array, and the array has to exist before you can perform a foreach on it. This is why I put the function externally in it's own file (so it can be used on more than one page if desired simply by require_once it in)... to add more items to the page, just keep adding to or editing that array... different pages could have different arrays on them -- and when it comes time to step up and put on the big boy pants you use the same methodology to pull the same values from SQL. Let's say you had a table that was built thus: CREATE TABLE formItems ( src VARCHAR(255), alt VARCHAR(128), title VARCHAR(128), desc TEXT, grades VARCHAR(255), price DECIMAL(8,2) } Code (markup): ... and you wanted to pull first five records and output them using PDO. $statement = $db->query(' SELECT * FROM formItems LIMIT 5 '); while ($row = $statement->fetch()) itemContainer($row); Code (markup): All there really is to doing that... though you'd have to change $item['text'] to $item['desc'] -- have to use a different name as TEXT is a reserved word in SQL...
I'm getting there. I played with <pre><code> tages and finally got the following code to return the html as I would like it to EXCEPT the values from the form are not inserted. (I am way to new to attempt the array thing, but eventually that is the direction I want to go) <?php $title = $_POST["title"]; $img = $_POST["img"]; $desc = $_POST["desc"]; $grade = $_POST["grade"]; if (!isset($_POST['submit'])) { // if page is not submitted to itself echo the form ?> <form method="post" action="<?php echo $PHP_SELF;?>"> Worksheet Title:<input type="text" size="12" maxlength="12" name="title"><br /> Name of JPEG:<input type="text" size="12" maxlength="36" name="img"><br /> Description:<input type="text" size="12" maxlength="200" name="desc"><br /> Grade Level:<input type="text" size="12" maxlength="36" name="grade"><br /> <input type="submit" value="submit" name="submit"> </form> <? } else { echo '<pre><code>',htmlspecialchars(' <!--CONTAINER START--> <div class="itemcontainer"><div class="left"><a class="p1" href="#v"><img src="".$img."" alt="" border="1" width="855" height="1097" v-align="top" /> <b><img class="large" src="".$img."" alt=""/></b></a></div><div class="middle"> <h1 class="item">".$title."</h1> <p class="item">".$desc."</p> <h3 class="item">".$level."</h3></div> <div class="right"><p><h4 class="item"><center>$".$price."</center></h4> <!--CONTAINER END--> '),'</pre></code>'; } ?> Code (markup):