javascript - 将表单数据添加到ics.js文件中

我一直在修改https://github.com/nwcell/ics.js代码来创建可下载的ics文件。

但是，我需要将数据输入到表单中并填充适当的变量（标题，位置，开始日期，结束日期）。

我似乎无法获得ics.js来使用document.getElementId方法从中提取值-有什么建议吗？

谢谢。示例页面可以在这里找到：https://dl.dropboxusercontent.com/u/25536938/FOIL%20Reminder%20Form%20Downloadable%20File.html

<html><head>
    <script type="text/javascript" src="https://rawgithub.com/nwcell/ics.js/master/ics.deps.min.js"></script>

</head>
<body>
 <fieldset>
        <legend>Select FOIL Owner</legend>

         Handler: <p>
            <select name="category">

                <option value="Ronald"> Ronald </option>
                <option value="Thomas">Thomas</option>
                <option value="Elizabeth">Elizabeth</option>

            </select>

        </p>

    </fieldset>

<fieldset>
  <legend>FOIL Request Information</legend>
  <form method="post" id="myform" action="javascript:cal_single = ics()" >
    First name:<br>
    <input type="text" id="firstname" name = "fname" />
    <br>
    Last name:<br>
    <input type="text" id="lastname" name = "lname" />
    <br>
    Email:<br>
    <input type="email" id="email" name = "email" />
    <br>
    Phone:<br>
    <input type="text" id="phone" name = "phone" />
    </form>


<br>


<div>
    Title: <input type="text" name="summary" id = "summary" />
        <br><br>
        Origin Date: <input type = "date" id = "originDate" name = "originDate"/>
        <br>

<br>

<div>

        5 Day Reminder Date: <input type="date" id = "5dayDate" name = "FiveDay" />
        <br>

</div>
<br>

<div>

        20 Day Reminder Date: <input type="date" id = "20dayDate" name = "TwentyDay" />
        <br>

<br>
    Description:
<br>
    <textarea  id="description" name="description"  ></textarea>
    <br>
    Location:
    <br>
    <input value="New York" id="location" name = "location" />


<br><br>
    <div class="wrap">
        <a href="javascript:cal_single.download()" >Single Event</a><br><br>
<input type="submit" value="Download" onclick="cal_single.download()" >



    </div>
</form>
<script>

// Demo

var cal_single = ics(); {
  var subject = "Title: " + document.getElementById("summary").value;

  var foilFirst = "Contact First Name: " + document.getElementById("firstname").value;
  var foilLast= "Contact Last Name: " + document.getElementById("lastname").value;
  var foilEmail= "Contact Email: " + document.getElementById("email").value;
  var foilPhone = "Contact Phone: " + document.getElementById("phone").value;

  var description = "Description: " + document.getElementById("description").value;
  var location = "Location: " + document.getElementById("location").value;

  var originalDate = document.getElementById( "originDate").value;

  var FiveDay = "Five Day: " + document.getElementById( "5dayDate").value;

  var TwentyDay = "Twenty Day: " + document.getElementById( "20dayDate").value;

   document.forms["myform"].submit();

cal_single.addEvent(subject, foilFirst + foilLast + foilEmail, '', originDate, originDate);
}
</script>

</body></html>

最佳答案

您不需要您要联系的大多数其他事件的表单。我只是点击进入了您正在使用的组件，他们有一个清晰的用法示例。

我编辑了您的代码，以使其最少起作用。您应该能够从这里调整功能，并查看使用模式的外观。

见下文

<html>

<head>
  <script type="text/javascript" src="https://rawgithub.com/nwcell/ics.js/master/ics.deps.min.js"></script>

</head>

<body>
  <fieldset>
    <legend>Select FOIL Owner</legend>

    Handler:
    <p>
      <select name="category">

        <option value="Ronald">Ronald</option>
        <option value="Thomas">Thomas</option>
        <option value="Elizabeth">Elizabeth</option>

      </select>

    </p>

  </fieldset>

  <fieldset>
    <legend>FOIL Request Information</legend>
    First name:
    <br>
    <input type="text" id="firstname" name="fname" />
    <br>Last name:
    <br>
    <input type="text" id="lastname" name="lname" />
    <br>Email:
    <br>
    <input type="email" id="email" name="email" />
    <br>Phone:
    <br>
    <input type="text" id="phone" name="phone" />
    </form>


    <br>


    <div>
      Title:
      <input type="text" name="summary" id="summary" />
      <br>
      <br>Origin Date:
      <input type="date" id="originDate" name="originDate" />
      <br>

      <br>

      <div>

        5 Day Reminder Date:
        <input type="date" id="5dayDate" name="FiveDay" />
        <br>

      </div>
      <br>

      <div>

        20 Day Reminder Date:
        <input type="date" id="20dayDate" name="TwentyDay" />
        <br>

        <br>Description:
        <br>
        <textarea id="description" name="description"></textarea>
        <br>Location:
        <br>
        <input value="New York" id="location" name="location" />


        <br>
        <br>
        <div class="wrap">
          <a href="javascript:doit()">Single Event</a>
          <br>
          <br>



        </div>

        <script>
          // Demo

          function doit() {
            var cal_single = ics();
            var subject = "Title: " + document.getElementById("summary").value;

            var foilFirst = "Contact First Name: " + document.getElementById("firstname").value;
            var foilLast = "Contact Last Name: " + document.getElementById("lastname").value;
            var foilEmail = "Contact Email: " + document.getElementById("email").value;
            var foilPhone = "Contact Phone: " + document.getElementById("phone").value;

            var description = "Description: " + document.getElementById("description").value;
            var location = "Location: " + document.getElementById("location").value;

            var originalDate = document.getElementById("originDate").value;

            var FiveDay = "Five Day: " + document.getElementById("5dayDate").value;

            var TwentyDay = "Twenty Day: " + document.getElementById("20dayDate").value;


            cal_single.addEvent(subject, foilFirst + foilLast + foilEmail, '', originDate, originDate);
            cal_single.download()
          }
        </script>

</body>

</html>

关于javascript - 将表单数据添加到ics.js文件中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27714186/

ICS

javascript - 将表单数据添加到ics.js文件中