2012-10-17 64 views
1

我正在使用jQuery.dform基於JSON數據饋送的表單嚮導。即它讀取JSON提要並填充表單域。如何輸出從JSON訂閱源讀取的表單數據?

現在,當用戶單擊提交時,我希望能夠根據用戶更改或表單中的更新來輸出或提醒表單字段值。

我使用jquery.dfrom基於這裏JSON例如 https://github.com/daffl/jquery.dform

由於

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Get started with jQuery dForm</title> 
</head> 
<style type="text/css"> 
    input, label { 
     display: block; 
     margin-bottom: 5px; 
    } 
</style> 
<body> 
<!--<form id="demo-1-form"></form> 
<pre data-for="demo-1"></pre> --> 

<form id="demo-2-form"></form> 
<pre data-for="demo-2"></pre> 

<!-- Load jQuery and the minified plugin --> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
    <script type="text/javascript" src="dist/jquery.validate.js"></script> 
<script type="text/javascript" src="dist/jquery.dform-1.0.1.js"></script> 



<script type="text/javascript" class="demo" id="demo-2"> 
$('#demo-2-form').dform({ 
    "action":"index.html", 
    "method":"post", 
    "html":[ 
     { 
      "type":"fieldset", 
      "caption":"User information", 
      "html":[ 
       { 
        "name":"email", 
        "caption":"Email address", 
        "type":"text", 
        "placeholder":"E.g. [email protected]", 
        "validate":{ 
         "email":true 
        } 
       }, 
       { 
        "name":"password", 
        "caption":"Password", 
        "type":"password", 
        "id":"registration-password", 
        "validate":{ 
         "required":true, 
         "minlength":5, 
         "messages":{ 
          "required":"Please enter a password", 
          "minlength":"At least {0} characters long" 
         } 
        } 
       }, 
       { 
        "name":"password-repeat", 
        "caption":"Repeat password", 
        "type":"password", 
        "validate":{ 
         "equalTo":"#registration-password", 
         "messages":{ 
          "equalTo":"Please repeat your password" 
         } 
        } 
       }, 
       { 
        "type":"radiobuttons", 
        "caption":"Sex", 
        "name":"sex", 
        "class":"labellist", 
        "options":{ 
         "f":"Female", 
         "m":"Male" 
        } 
       }, 
       { 
        "type":"checkboxes", 
        "name":"test", 
        "caption":"Receive newsletter about", 
        "class":"labellist", 
        "options":{ 
         "updates":"Product updates", 
         "errors":{ 
          "value":"security", 
          "caption":"Security warnings", 
          "checked":"checked" 
         } 
        } 
       } 
      ] 
     }, 
     { 
      "type":"fieldset", 
      "caption":"Address information", 
      "html":[ 
       { 
        "name":"name", 
        "caption":"Your name", 
        "type":"text", 
        "placeholder":"E.g. John Doe" 
       }, 
       { 
        "name":"address", 
        "caption":"Address", 
        "type":"text", 
        "validate":{ "required":true } 
       }, 
       { 
        "name":"zip", 
        "caption":"ZIP code", 
        "type":"text", 
        "size":5, 
        "validate":{ "required":true } 
       }, 
       { 
        "name":"city", 
        "caption":"City", 
        "type":"text", 
        "validate":{ "required":true } 
       }, 
       { 
        "type":"select", 
        "name":"continent", 
        "caption":"Choose a continent", 
        "options":{ 
         "america":"America", 
         "europe":{ 
          "selected":"true", 
          "id":"europe-option", 
          "value":"europe", 
          "html":"Europe" 
         }, 
         "asia":"Asia", 
         "africa":"Africa", 
         "australia":"Australia" 
        } 
       } 
      ] 
     }, 
     { 
      "type":"submit", 
      "value":"Signup" 
     } 
    ] 
}); 
</script> 
</body> 
</html> 
+0

你的態度沒有吸引力,'謝謝'讓我覺得你很懶(沒有冒犯性)。現在,您是否希望將來自某一時刻的饋送與另一時刻的饋送進行比較?而且,在一個問題中你不應該問兩件事(存儲)。 – EricG

+0

@EricG我不知道對某人說「謝謝你,謝謝你」是一種態度。上次我檢查它是一個有禮貌的跡象。我猜時間真的在變。 – user244394

+0

我的歉意,我並不是要低估一個好的態度/禮貌。我想我推斷你的態度(假設我沒有嘗試過)(假設我承認)。你的帖子讓我覺得:'我需要一些東西,我問它 - 謝謝你'。如果你明白我的意思。但也許這是我或我的心情,真誠道歉。我很欣賞你成熟的回覆方式:) – EricG

回答

1

使用JQuery連載(以產生形式)捕獲的形式,並將其輸出的所有值/場或者用戶可能對錶單字段所做的任何更改。

<script type="text/javascript"> 

    $('#demo-2-form').on('submit', function(ev) { 
     //alert($(this).serialize()); 
     var data = $(this).serialize(); // -> The URL encoded form data 
     $("#results").text(data); 

     ev.preventDefault(); 
    }); 
</script>