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

Question

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

代码应该：

1. 获取#submit 点击操作
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 链接。