在使用数据列表输入生成表单时需要帮助
[英]Need help using datalist input to generate a form
问题描述
Sorry if this has been asked before, but I've been digging for a few hours now with little luck. 
抱歉，以前是否有人问过这个问题，但是我已经运气好几个小时了。
What I'm trying to accomplish: I wish to have a form that starts by asking the user how many children they need to register (minimum of 1 max of 10). 我要完成的工作：我希望有一个表格，该表格首先询问用户他们需要注册多少个孩子（最少1个，最多10个）。 I then need to be able to use this variable to make visible up to 10 entry fields for the children. 然后，我需要能够使用此变量来使最多10个子项可见。 What I was planning on doing is using the value from the datalist then using an if/else statement to generate the form. 我打算做的是使用数据列表中的值，然后使用if / else语句生成表单。 (if id = 2 then (form looks like this...) else... What I don't know how to do is capture the choice and then pass it to the if/then statement. （如果id = 2，那么（窗体看起来像这样……）否则）……我不知道该怎么做，就是捕获选择，然后将其传递给if / then语句。
<h2>How many children are you registering?</h2>
<input type="range" value="1" "min=1" max="10" list="number" />
<datalist id="number">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</datalist>
2 个解决方案
解决方案1
0 2014-02-15 16:22:45
HTML: HTML：
<h2>How many children are you registering?</h2>
<input type="range" value="1" "min=1" max="10" list="number" onChange="change(this);" />
<datalist id="number">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</datalist>
<div id="childrens">
</div>
JAVASCRIPT (in < head >): JAVASCRIPT（在<head>中）：
function change(el) {
var container = document.getElementById('childrens'),
child;
// Clear container
container.innerHTML = '';
// Add number of child inputs
for (var i=0; i<el.value; i++) {
child = document.createElement("input");
child.type = 'text';
container.appendChild( child );
}
}
解决方案2
0 已采纳 2014-02-15 16:31:31
Use Jquery 使用jQuery
Try with this. 试试这个。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>How many children are you registering?</h2>
<input type="range" value="1" "min=1" max="10" list="number" id="list" />
<datalist id="number">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" >3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</datalist>
<div id="form_input">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$('#list').change(function(){
var i = $(this).val();
var m = 0;
$('#form_input').html("");
if(i != 0){
$('#form_input').append('<form id="form">');
while(m<i){
$('#form_input').append('<input type="text" id="text_'+m+'" name="text_'+m+'" />'); m++;
}
$('#form_input').append('</form>');
}
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.