Question

所以我有一个允许人们提供评论的表格。他们必须在输入表格中输入他们的姓名，电子邮件和评论。我想获取该信息并将其发布到网站边栏。每当我尝试时，我得到的只是＆＃34;对象对象＆＃34;在侧边栏中，从不输入表单中的内容。我有四个问题

如何从表单输入中提取值并将其放在侧栏上？
我如何才能将新评论置于评审之前？
如何将样式添加到评论中？
如何在提交审核后清空输入表单？

HTML：我们的评论

      <ul class="review-list" id="sidebar-review-list">
        <li class="review">
          <p>
            Cupcake ipsum dolor sit amet. Lemon drops topping carrot cake. Jujubes pudding chocolate
            cookie I love marshmallow I love toffee.
          </p>

          <a href="mailto:fakeemail@fakedomain.com">Jon Smith</a>
        </li>
      </ul>

      <form id="review-form" class="pure-form">
        <fieldset>
          <div class="pure-control-group">
            <input type="text" name="name" class="pure-input-1" id="name" placeholder="Name">
          </div>

          <div class="pure-control-group">
            <input type="email" name="email" class="pure-input-1" id="email" placeholder="Email">
          </div>

          <div class="pure-control-group">
            <textarea name="review" class="pure-input-1" id="review" placeholder="Review"></textarea>
          </div>

          <button type="submit" class="pure-button pure-button-primary" id="submit-review">Submit Review</button>
        </fieldset>
      </form>
    </section>

CSS

.pure-control-group {
      margin-bottom: 10px;
    }

    .reviews {
      margin-bottom: 20px;
    }

    .review-list {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .review {
      background: #4faac9;
      padding: 1px 10px 10px;
      color: #fff;
      border-radius: 6px;
      margin-bottom: 10px;
    }

    .review a {
      color: #176075;
      font-weight: bold;
      text-decoration: none;
    }

JQUERY：

;(function($) {
    var $sidebar_review_list = $("#sidebar-review-list");
    var $review_form = $("#review-form");
    var $name = $("a");
    var $email = $("href");
    var $review = $("p");

    //get a reference to the submit buttons
    var $submit_review = $('#submit-review');

    var $sidebar_review_list = $('#sidebar-review-list');

    //function that will create the reviews
    var submit_review = function() {
        var $li = $('<li>');
        var $p = $('<p>');
        var $a = $('<a>');

        //set the value
        $p.text($review);
        $a.text($name);
        $a.attr('href', $email);

        $li.append($p);
        $li.append($a);

        $sidebar_review_list.append($li);
    };

    // add an event listener on the click event of the submit button
    $('#submit-review').on('click', function(e) {
        e.preventDefault();

        submit_review();
    });
})(window.jQuery);

Answer 1

你还没有在小提琴中选择jQuery框架，所以没有任何作用。
$p.text($review); // invalid
要选择ID为review的元素，请使用$('#review');
修复此问题后，$p.text($('#review'));将设置整个jQuery #review元素的对象为p＆＃39; s文本，因此您获得[对象对象] ..
要在#review元素中选择其中的值，请使用$('#review').val();

因此上面的正确语法行将是$p.text($('#review').val());

在其余代码的情况下也一样。

1）如上所述，使用val()函数选择值

2）由于您要将新评论附加到包含先前评论的同一容器中，因此它会自动低于正常流程中的上一次评论。

3）对于添加样式，您可以使用.css()函数或添加css类addClass()函数。

4）您可以使用reset()功能在提交后手动清除表单。

fiddle

Answer 2

您可以像这样获取表单的内容：

var form = $('#review-form');
form.each(function() {
  alert($(this).attr('name') + ' = ' + $(this).val());
});

如何从表单中提取值并使用JQuery粘贴到网站上？

2 个答案: