Question

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

代码应该：

获取#submit点击操作
提取#email，＃selection1和＃selection2的数据
隐藏表单#form
在段落#preview

我没有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 link。

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

2 个答案: