如何在表單提交時正確創建並生成生日字段？

我試圖在表單上爲用戶提交他們的生日創建字段，但從未出現月份，日期和年份的下拉列表。所以我只需在表單的一個下拉菜單中輸入月份和日期。如何在表單提交時正確創建並生成生日字段？

如何使用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>

來源

2017-02-01 Staywoke

你的問題不清楚。你想要達到什麼目的？ –

你的代碼中有語法錯誤，這可能是爲什麼這兩個字段沒有正確顯示。要添加額外的下拉菜單，您只需創建相關的''也需要'name'屬性。 –

顯而易見的想法是，你可能誤會的事與不使用爲每個部分（日，月，年）建立的選擇。除非我誤解了你正在嘗試的東西。

的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>

來源

2017-02-01 00:40:34 user3810108

我強烈建議使用jQuery Datepicker在這種情況下。原因是，這個問題有一個HTML答案，不幸的是......並非所有的瀏覽器都支持它。那是：<input type="date">參數。如果這在全球範圍內起作用，那將是最容易做的事情。

因爲不是，所以這是一個安全的選擇，尤其是對於向後兼容性，仍然使用JavaScript/jQuery。我喜歡jQuery Datepicker，因爲它易於使用。調用幾個依賴你的<head>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

執行這個jQuery：

<script> 
    $(function() { 
    $("#datepicker").datepicker(); 
    }); 
    </script>

並添加到您的輸入域「日期選擇器」的id：

<input type="text" id="datepicker">

LINK TO JSFIDDLE

在那裏，你有它。我認爲一個非常輕量級的代碼會產生你以後的結果。

來源

2017-02-01 01:16:01

@Staywoke，嘗試提供任何答案的運氣？如果是這樣，你應該給予正確答案的人。謝謝！ –

如何在表單提交時正確創建並生成生日字段？

回答

相關問題