关于如何根据用户选择预填充(预设)动态表单的想法?

时间:2017-09-20 14:35:17

标签: node.js html5 forms dynamicform

我希望得到一些关于如何在我正在开发的网络应用上实施某些内容的想法/指导。

场景:用户遇到HTML5表单,其中包含动态添加/删除表中输入行的选项

[table]
        [1st row] [input 1] [input 2] [X - delete]
        [2nd row] [input 1] [input 2] [X - delete]
        ...
        [add new row]

我想添加select box,其中下拉列表选项根据选择预先填充动态表单的行/输入值。

我大多熟悉客户端脚本和一点PHP,但我最近开始学习node.js.我有一个mysql数据库,但我不确定前进的最佳方式。

我没有要求你为我编码!只想知道如何构思这种类型的用户功能,以便我可以将其作为一个学习项目。

一如既往地谢谢!

1 个答案:

答案 0 :(得分:0)

一种方法:为<select>框添加onchange="functionNameHere(this.options[this.selectedIndex].value)"属性,然后执行以下操作:

<select onchange="functionNameHere(this.options[this.selectedIndex].value">
...
<script>
const functionNameHere = (value) => {
  if(value=="Some Option Value"){ 
    document.getElementById("target-field-id").value = "newValue"
 } else if(value=="Other Option Value"){ ...} 
}
</script>

或沿着这些行的某些内容,具体取决于您尝试操作的值或字段。您可能希望setAttribute甚至innerHTML您的目标div,字段或输入。

此外,如果您想根据多个选择动态填充字段,那么为每个选择字段设置不同的onchange函数名称是明智的