在动态表单的可见部分中，如何使用 javascript 使某些字段成为必需的？答案

【问题标题】：Within just the visible parts of a dynamic form, how to make certain fields required using javascript?在动态表单的可见部分中，如何使用 javascript 使某些字段成为必需的？
【发布时间】：2015-05-21 20:56:20
【问题描述】：

我是编程新手，所以请放轻松！我在这里有一个动态表单，您填写的字段会根据开头的下拉菜单而变化。某些后续问题是必需的并且必须填写，但其他问题则不需要（并且必须保持不需要）。我浏览了下面的代码，向您展示了我需要哪些字段，哪些不需要。它会很好地工作，除非您考虑动态部分（块/无），表单隐藏部分的必填字段会阻止它被提交。任何帮助将不胜感激，谢谢！

<!DOCTYPE html>
<html>
<body>


<script type='text/javascript'>
    function showForm() {
        var selopt = document.getElementById('opts').value;
        if (selopt == 1) {
            document.getElementById('f1').style.display = 'block';
            document.getElementById('f2').style.display = 'none';
            document.getElementById('f3').style.display = 'none';
            document.getElementById('f4').style.display = 'none';
        }
        if (selopt == 2) {
            document.getElementById('f1').style.display = 'none';
            document.getElementById('f2').style.display = 'block';
            document.getElementById('f3').style.display = 'none';
            document.getElementById('f4').style.display = 'none';
        }
        if (selopt == 3) {
            document.getElementById('f1').style.display = 'none';
            document.getElementById('f2').style.display = 'none';
            document.getElementById('f3').style.display = 'block';
            document.getElementById('f4').style.display = 'none';
        }
        if (selopt == 4) {
            document.getElementById('f1').style.display = 'none';
            document.getElementById('f2').style.display = 'none';
            document.getElementById('f3').style.display = 'none';
            document.getElementById('f4').style.display = 'block';
        }	
		
        if (selopt == '') {
            document.getElementById('f1').style.display = 'none';
            document.getElementById('f2').style.display = 'none';
            document.getElementById('f3').style.display = 'none';
            document.getElementById('f4').style.display = 'none';
        }
    }
</script>


<?php
if(!isset($_POST['tripid1'])){
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="entryform">
<select id='opts' onchange='showForm()' required='required'>
    <option value=''>Select Option</option>
    <option value='1'>Species Verification Program / ID</option>
    <option value='2'>Incidental Take Samples</option>
    <option value='3'>Age Structures</option>
    <option value='4'>Special Projects</option>
</select>
<br><br>

<div id='f1' style='display:none'>
Which haul is this sample from? <input type='text' name='tripid1' size='6' required='required'>
Which species is this sample? <input type='text' name='tripid2' size='6' required='required'>
Additional comments optional: <input type='text' name='tripid3' size='6'>
</div>

<div id='f2' style='display:none'>
What species is this? <input type='text' name='tripid1' size='6' required='required'>
What is the tag number? <input type='text' name='tripid2' size='6' required='required'>
Additional comments optional: <input type='text' name='tripid3' size='6'>
</div>

<div id='f3' style='display:none'>
What species? <input type='text' name='tripid1' size='6' required='required'>
Age sample type? <input type='text' name='tripid2' size='6' required='required'>
Additional comments are required: <input type='text' name='tripid3' size='6' required='required'>
</div>

<div id='f4' style='display:none'>
What species is this? <input type='text' name='tripid1' size='6' required='required'>
What is the program? <input type='text' name='tripid2' size='6' required='required'>
Additional comments optional: <input type='text' name='tripid3' size='6'>
</div>
<input type = "submit" value= "SUBMIT FORM" />
</form>
<?php
}

if(isset($_POST['tripid1'])){
echo "Yay, the form submitted!";
}

?>


</body>
</html>

【问题讨论】：

标签： javascript html forms hidden require

【解决方案1】：

一种解决方案是只有一组输入，并根据需要替换文本。我认为对于自称是初学者的人来说，这是一个不错、简单的解决方案：

** 编辑 ** 根据您的 cmets，这是我更新的代码。首先，HTML。请注意，我取出了脚本标签以及输入标签，因为我们将动态加载它们。（顺便说一句，您也可以动态加载选项标签）。

<form method="post" id="entryform">
<select id='opts' onchange='showForm()' required='required'>
    <option value=''>Select Option</option>
    <option value='1'>Species Verification Program / ID</option>
    <option value='2'>Incidental Take Samples</option>
    <option value='3'>Age Structures</option>
    <option value='4'>Special Projects</option>
</select>
<br><br>

<div id='f1' style='display:none'>

</div>
<input type = "submit" value= "SUBMIT FORM" />
</form>

现在是 JavaScript：

var questions = {
    "1": "<div id='q1'>Which haul is this sample from? <input type='text' name='tripid1' size='6' required='required'>Which species is this sample? <input type='text' name='tripid2' size='6' required='required'>Additional comments optional: <input type='text' name='tripid3' size='6'></div>",
    "2": "<div id='q2'>What species is this? <input type='text' name='tripid1' size='6' required='required'>What is the tag number? <input type='text' name='tripid2' size='6' required='required'>",
    "3": "<div id='q3'>What species? <input type='text' name='tripid1' size='6' required='required'>Age sample type? <input type='text' name='tripid2' size='6' required='required'>Additional comments are required: <input type='text' name='tripid3' size='6' required='required'></div>",
    "4": "<div id='f4'>What species is this? <input type='text' name='tripid1' size='6' required='required'>What is the program? <input type='text' name='tripid2' size='6' required='required'>Additional comments optional: <input type='text' name='tripid3' size='6'>Here's another question <input type='text' /></div>"    
}    

function showQuestions() {
    // First get what question they chose
    var questionNumber = document.getElementById('opts').value;
    console.log(questionNumber);
    // Now use that to get the questions from the questions object
    var specificQuestions = questions[questionNumber];
    console.log(specificQuestions);
    // Now get the shell div the div
    var shell = document.getElementById('f1');
    // Now inject the HTML
    shell.innerHTML = specificQuestions;
}    

document.getElementById('opts').onchange = showQuestions;

我们只需加载所需的任何 HTML。您会注意到问题 2 只有 2 个问题，问题 3 有必填评论，问题 4 有 4 个问题。希望这能满足您的要求。你可以做更多的事情，比如添加一个重置按钮，做更多的错误处理，但这应该让你对解决方案有所了解。这是更新的小提琴：http://jsfiddle.net/29rpe7gr/1/

** 编辑结束 **

您会注意到这也处理了“必需”属性，该属性根据需要设置为 true 或 false。您还会注意到我取出了 php 标签。这是一个演示：http://jsfiddle.net/29rpe7gr/。

请允许我给你一些其他的想法。您不希望表单包含太多您不会使用的输入标签，因为即使您将它们设置为不需要，它们仍将作为空文本发布到您的服务器。这可能不是你想要做的。您只想发送相关的答案。该解决方案提供了一个模板，并将文本输入的数量限制为您关心的唯一 3 个。

更进一步的做法是将问题作为 JavaScript 对象保存在另一个文件中，您的字符串替换方法将获取要填写的正确问题。分离文本和代码的好处是您可以轻松地回收代码任何你想问的问题。这也意味着您不必运行任何 if 语句。您可以从下拉菜单中获取数字并使用它从您的对象中获取正确的问题。这种代码和内容的分离在编程中是非常标准的。顺便说一句，我会通过加载一个外部 JS 文件将你的 JavaScript 与你的 HTML 分开。

最后，更进一步的做法是使用模板引擎，例如 mustache：https://github.com/janl/mustache.js。尽管 mustache 为您提供了比本示例所需的更多的肌肉，但它是练习编码的好工具。

我希望这会有所帮助，如果您想澄清任何事情，请告诉我。祝你好运。

【讨论】：

非常感谢您的建议，保罗！这是一个非常聪明的解决方案。不过，我还有一个问题，我将这段代码 sn-p 编写为我实际工作的简化版本，实际上并非所有内容都有 3 个问题。如果选择选项 1 有 4 个后续问题，选择选项 2 有 5 个，选择选项 4 有 3 个，以此类推？
另外，我注意到它失去了将选择选项更改为不同类别的能力，以防用户点击错误的东西。例如，一旦您选择了选项 1，您将获得该选项的所有问题，但是如果您意识到您实际上应该选择了选项 2，并且您尝试更改它，那么问题不会更新/更改。再次感谢！
请看我更新的答案。它应该解决您的两个 cmets。也更新了小提琴：jsfiddle.net/29rpe7gr/1.