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

Question

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

代码应该：

1. 获取#submit点击动作
2. 提取#email，＃选择1和＃选择2的数据
3. 隐藏形式#form
4. 显示#email，＃ selection1和＃selection2段落#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

你不必经历所有这些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。

Answer 2

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

你在这里这段代码的额外的括号：$('#selection1').val())。您可以使用浏览器的控制台来调试语法错误。