如何使用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())。您可以使用瀏覽器的控制檯來調試語法錯誤。