将表格添加到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; 
     });  
    });