javascript - 如何正确创建并使表单上的生日字段可提交？

Question

我尝试在表单上创建字段供用户提交生日，但月份、日期和年份的下拉列表从未出现。因此，我只需在表格的一个下拉菜单中输入月份和日期。

如何使用 html 创建三个字段来填写表单上的生日信息(月、日、年)。

当用户使用 JavaScript 提交申请时，如何使其显示？

<script type='text/javascript'>
var form_script = {
form_id: $('#generic_form'),
status_id: $('#send_form'),
specific_id: $('#form_spec'),
enable_guests: false,
pm: {
enabled: false, // Does not work for guests
user: "", // 1 user only
title: "New acceptance test From {{user_name}}",
content: "{{form}}"
},
topic: {
enabled: true,
forum_id:3240482, // 1 id only
title: "About Me",
description: "Biography",
content: "{{form}}"
},
statuses: {
not_logged_in: "Error! You must be logged in to make an introduction topic.", // Used if enable_guests: false
first: "Verifying...",
second: "Processing...",
done: "Your introduction topic has been posted. You may customize your topic and edit the title."
},
submission_formatting: {
separator: ' ',

before_all: '',
after_all: '',

before_question: '[b]',
after_question: '[/b]',

before_response: '[i]',
after_response: '[/i]'
},
possible_elements: 'input, textarea, select' // For the second column of table; .val() must work on it
};
</script>

<form id='generic_form'>
<div class='category'>
<table class='cat_head'>
<tr>
<td><h2 style='text-align:center'>Introduce Yourself</h2></td>
</tr>
</table>
</div>

<table>
<tr>
<td> </td>
</tr>
</table>

<table id='form_spec'>
<tr>
<th colspan='2'><h2>Please completely fill out all the requested information below with honesty:</h2></th>
</tr>
<tr>
<td>Name:</td>
<td><input type='text' /></td>
</tr>
<tr>
<td>Nickname:</td>
<td><input type='text' /></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select>
<option>Male</option>
<option>Female</option>
<option>Unknown</option>
</select>
</td>
</tr>
<tr><td>Birthday:</td>
<td>
<select>
<option>N/A</option>
<option>January 1st</option>
<option>February 1st</option>
<option>March 1st</option>
<option>April 1st</option>
<option>May 1st</option>
<option>June 1st</option>   
<option>July 1st</option>
<option>August 1st</option>
<option>September 1st</option>
<option>October 1st</option>
<option>November 1st</option>
<option>December 1st</option>
</select>
</td>
</tr>
<tr>
<td colspan='2' id='send_form'><button type='submit'>Submit</button></td>
</tr>
</table>
</form>

Answer 1

明显的想法是，您可能会误解设置选择的事情，因为没有为每个部分(日、月、年)使用一个选择。除非我误解了你正在尝试的内容。

HTML 为:

<select id="day" name="day">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">4</option>
  <option value="4">4</option>
  etc.. until 31.
</select>

<select id="month" name="month">
  <option value="January">January</option>
  <option value="February">February</option>
  etc.. until December
</select>

<select id="year" name="year">
  <option value="1940">1940</option>
  <option value="1941">1941</option>
  <option value="1942">1942</option>
  <option value="1943">1943</option>
  <option value="1944">1944</option>
  etc.. up til year 2017 (or what is max)
</select>

和 JavaScript:

var day = document.getElementById('day').value ;
var month = document.getElementById('month').value ;
var year = document.getElementById('year').value ;

有些人更喜欢月份作为数字，然后你会这样做:

<select id="month" name="month">
  <option value="1">January</option>
  <option value="2>February</option>
  etc.. until December
</select>