將表格添加到reveal.js演示文稿

Question

我想將窗體添加到使用JSON的reveal.js演示文稿中。

這裏是嵌入在揭示一個幻燈片形式：

<section> 
    <form action="#"> 
    First name: <input type="text" name="firstname"><br> 
    Last name: <input type="text" name="lastname"> 
<button type="submit">Submit</button> 
</section> 

我還添加了這個PHP腳本文件的頂部：

<?php 
if(isset($_POST['submit'])){ 
    $file = "data.json"; 
    json_string = json_encode($_POST,JSON_PRETTY_PRINT); 
    file_put_contents($file, $json_string,FILE_APPEND); 
} 
?> 

我認爲應將文件運行以.php擴展名正確執行將用戶輸入發送到服務器的PHP腳本，但是，當將revealjs作爲.php擴展名運行時，會出現白屏。

是否有人在他們的revealjs演示文稿中成功嵌入了表單？

謝謝！

Answer 1

是的我將表格添加到reveal.js，但我使用JavaScript，沒有PHP。

你可以在這裏嘗試一下：http://jsfiddle.net/B9r22/20/

<h2>Form</h2> 
<section> 
    <form action="#"> 
     First name: <input type="text" name="firstname" data-name="firstname"/><br/> 
     Last name: <input type="text" name="lastname" data-name="lastname"/><br/> 
     <button type="submit">Submit</button> 
</section> 
<h2>JSON</h2> 
<p id="json"></p> 

    $(function() { 
     $('body').on('submit','form',function() { 
      var answers = []; 
      $('input[type="text"]', this).each(function(){ 
      answers.push({'name':$(this).data('name'), 'value':this.value}); 
      }); 
      var data = { 
       'answers': answers 
      }; 
      json = JSON.stringify(data); 
      $('#json').append(json); 
      return false; 
     });  
    });