如何使用JQuery将数据发布到同一页

Question

基本上我要做的就是将表单数据发送到表单的相同位置。

该代码应：

1. 获取＃提交点击操作
2. 提取＃email，＃selection1和＃selection2的数据
3. 隐藏表格#form
4. 在#preview段落中显示＃email，＃selection1和＃selection2

我没有JQuery经验，所以迷路了。 我尝试环顾四周并尝试使用不同的代码，但对我来说没有任何用。

我的表单代码是：

<form method="post" id="form">
                <div class="form-group col-lg-10 col-lg-offset-1">
                    <input type="email" id="email" class="form-control" name="email" placeholder="Email" />
                </div>

                <div class="form-group col-lg-10 col-lg-offset-1">
                    <select class="form-control" id="selection1">
                        <option>Option 1</option>
                        <option>Option 2</option>
                     </select>
                </div>

                <div class="form-group col-lg-10 col-lg-offset-1">
                    <select class="form-control" id="selection2">
                        <option selected="selected">Option 1</option>
                        <option>Option 2</option>
                        <option>Option 3</option>
                        <option>Option 4</option>
                    </select>
                </div>

                <div class="form-group col-lg-offset-1 col-lg-10">
                    <button type="button" id="submit" class="btn btn-primary btn-lg">Sign in</button>
                </div>
</form>

<p id="preview"></p>

这是我尝试过的JQUery。

<script type="text/javascript">
      $("#submit").click(function () {
          var FormVal = {
              datafield1: $('#email').val(),
              datafield2: $('#field2').val()
          };

          $.ajax({
              type: "POST",
              dataType: "json",
              data: FormVal,
              async: false,
              success: function (response) {
                  $('#preview').html($('#email').val() + '<br />' + $('#selection1').val()) + '<br />' + $('#selection2').val());
              }
          });
      });
  </script>

Answer 1

$('#preview').html($('#email').val() + '<br />' + $('#selection1').val()) + '<br />' + $('#selection2').val());

在此代码中，您还有一个额外的括号： $('#selection1').val()) 。 您可以使用浏览器的控制台调试语法错误。

Answer 2

您不必遍历所有这些AJAX内容即可完成所需的工作。 您可以简单地隐藏表单，然后将值设置为#preview段落

$("#submit").click(function () {
  //get value like this..
  var datafield1 = $("#email").val();
  //hiding the form
  $("#form").hide(function () {
    //setting the text to #preview
    $('#preview').html(
    $('#email').val() + '<br />' + $('#selection1').val() + '<br />' + $('#selection2').val());
  });
});

这是工作代码的jsfiddle链接 。