2016-07-08 14:25



am trying to make a "Add your recipe" page in my website.. i have tried this form and it shows perfectly.. but how do i post the recipe below the form after clicking submit button according to the recipe format?

   <form method="post">
    <div class='wrapperr'>
        <div class='wrapper'>
    <div class='container'>
        <div class='top'>
            <div class='logo'></div>
            <div class='gray close'></div>

        <div class='content'>
            <ul class='section'>
                <li class='header'></li>
                <li class='item right-label'>
                    <label for="title">Title</label>
                    <input type="text" placeholder='eg. Chocolate Chip  Cookies' id="title" class='shorter' />
                    <div class='picture-container'>
                        <div class='picture'></div>
                <li class='item right-label'>
                    <label for="author">Author</label>
                    <input type="text" placeholder='eg. Julia Child (optional)' id="author" class='shorter' />
                <li class='item right-label'>
                    <label for="adapted">Adapted</label>
                    <input type="text" placeholder='eg. The Joy of Cooking (optional)' id="adapted" class='shorter' />
                <li class='item right-label'>
                    <label for="adapted-link">Adapt Link</label>
                    <input type="text" placeholder='  (optional)' id="adapted-link" class='shorter' />
                    <input type="button" class="button green box-shadow" value="Select Image" id="picture" />
                <li class='item spaced right-label'>
                    <label for="summary" id="summary-label">Description</label>
                    <textarea placeholder='eg. A delicious drop cookie  (optional)' id="summary"></textarea>
                  <li class='item right-label'>
                    <label for="prep-time">Prep Time</label><input  type="text" placeholder="HH:MM (optional)" id="prep-time" class="time" />
                    <label for="cook-time">Cook Time</label><input type="text" placeholder="HH:MM (optional)" id="cook-time" class="time" />
                    <label for="total-time">Total Time</label><input type="text" placeholder="HH:MM (optional)" id="total-time" class="time" />
                <li class='item right-label'>
                    <label for="servings">Serves</label><input type="text" placeholder="Amount (optional)" id="servings" class="amount" />
                    <label for="yields">Yields</label><input type="text" placeholder="Amount (optional)" id="yields" class="amount" />
                <li class='header new'></li>
                <li class='item'>
                    <label for="ingredients">Ingredients</label>
                    <textarea placeholder="One ingredient per line, include subheaders by ending with a colon (eg. For the cake:)" id="ingredients" class='larger'></textarea>
                <li class='item'>
                    <label for="directions">Directions</label>
                    <textarea placeholder="One direction per line, include subheaders by ending with a colon (eg. For the cake:)" id="directions" class='larger'></textarea>
                <li class='item'>
                    <label for="notes">Notes</label>
                    <textarea placeholder="One note per line, include subheaders by ending with a colon (eg. Great tip:) (optional)" id="notes" class='larger'></textarea>
                <li class='header new error-list' style="display: none"></li>
                <li class='new error-data' style="display: none">
                    <ul class='error-ul'>
                        <li class='error-title' style="display: none">Please enter a title for the recipe.</li>
                        <li class='error-adapted-link' style="display: none">Please enter a valid url.</li>
                        <li class='error-prep-time' style="display: none">Please enter a prep time using HH:MM such as <b>1:15</b> for an hour and fifteen minutes or <b>25</b> for 25 minutes.</li>
                        <li class='error-cook-time' style="display: none">Please enter a cook time using HH:MM such as <b>1:15</b> for an hour and fifteen minutes or <b>25</b> for 25 minutes.</li>
                        <li class='error-total-time' style="display: none">Please enter a total time using HH:MM such as <b>1:15</b> for an hour and fifteen minutes or <b>25</b> for 25 minutes.</li>
                        <li class='error-servings' style="display: none">Please enter a number for the serves amount such as <b>4</b> for a recipe that makes 4 servings.</li>
                        <li class='error-yields' style="display: none">Please enter a number for the yields amount such as <b>18</b> for a recipe that makes 18 cookies.</li>
                        <li class='error-ingredients' style="display: none">Please enter some ingredients for your recipe.</li>
                <li class='new center'>
                    <input type="button" class='button green standard-button box-shadow' value='Save' id="save" />
                    <input type="button" class='button white standard-button box-shadow' value='Cancel' id="cancel" />
                    <div class='working'>
                        <div class='working-image'></div>
                        <div class='working-text'>Saving Recipe</div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答


  • douzhun8615 douzhun8615 5年前

    Here is the link to the comments box made using HTML and JavaScrit. It doesn't work on the submit button but serves the purpose.


        <textarea id="comment" placeholder="Say something..." /></textarea><br>
        <a href="#" onclick="postComment();">Post comment!</a>
    <div id="comments">


    var div = document.getElementById("comments");
    div.innerHTML = div.innerHTML +"<br>"+ document.getElementById("comment").value;

    Fiddle here.

    点赞 评论 复制链接分享
  • douqie1884 douqie1884 5年前

    Create a php file called 'Config.php'

    class Config {
        public static function get($item){
            return $_POST[$item];
        } else if(isset($_GET[$item])) {
            return $_GET[$item];
        return '';

    then add a require_once 'Config.php' to your page with the form

    if(isset($_POST['submit']){ // if user submits form
         echo Config::get('comments');

    The function will check the form method, and return the $_POST or $_GET value. We then check if the user has submitted the form. Once they do, it will get the value and echo it to the page.

    点赞 评论 复制链接分享