JS制作简单问卷方法教程

<form id="surveyForm">
  <h2>简易问卷调查</h2>

  <div>
    <p><strong>1. 您的年龄？</strong></p>
    &lt;input type=&quot;radio&quot; name=&quot;age&quot; value=&quot;18以下&quot; required&gt; 18以下<br>
    &lt;input type=&quot;radio&quot; name=&quot;age&quot; value=&quot;18-30&quot;&gt; 18-30<br>
    &lt;input type=&quot;radio&quot; name=&quot;age&quot; value=&quot;31-50&quot;&gt; 31-50<br>
    &lt;input type=&quot;radio&quot; name=&quot;age&quot; value=&quot;50以上&quot;&gt; 50以上
  </div>

  <div>
    <p><strong>2. 您对本站的满意度如何？</strong></p>
    &lt;select name=&quot;satisfaction&quot; required&gt;
      <option value="">请选择</option>
      <option value="非常满意">非常满意</option>
      <option value="满意">满意</option>
      <option value="一般">一般</option>
      <option value="不满意">不满意</option>
    &lt;/select&gt;
  </div>

  <div>
    <p><strong>3. 您的建议？</strong></p>
    &lt;textarea name=&quot;feedback&quot; placeholder=&quot;请输入您的意见...&quot;&gt;&lt;/textarea&gt;
  </div>

  <button type="submit">提交问卷</button>
</form>

<div id="result"></div>

document.getElementById("surveyForm").addEventListener("submit", function(e) {
  e.preventDefault(); // 阻止页面刷新

  const resultDiv = document.getElementById("result");
  const formData = new FormData(this);

  let output = "<h3>提交成功！您的回答：</h3><ul>";
  
  for (let [key, value] of formData.entries()) {
    if (value) {
      output += `<li><strong>${key}：</strong>${value}</li>`;
    }
  }
  output += "</ul>";

  resultDiv.innerHTML = output;
});

function createSurvey() {
  const container = document.body;
  const form = document.createElement("form");
  form.innerHTML = `
    <p><strong>您喜欢JS吗？</strong></p>
    &lt;input type=&quot;radio&quot; name=&quot;like&quot; value=&quot;是&quot; required&gt; 是
    &lt;input type=&quot;radio&quot; name=&quot;like&quot; value=&quot;否&quot;&gt; 否
    <button type="submit">提交</button>
  `;

  form.addEventListener("submit", function(e) {
    e.preventDefault();
    alert("感谢参与！您选择了：" + new FormData(form).get("like"));
  });

  container.appendChild(form);
}

createSurvey(); // 调用函数生成问卷