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

Question

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

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

Answer 1

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

** 编辑 ** 根据您的评论，这是我更新的代码。首先，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 个问题。希望这能满足您的要求。你可以做更多的事情，比如添加一个重置按钮，做更多的错误处理，但这应该让你对解决方案有所了解。这是更新后的 fiddle：http://jsfiddle.net/29rpe7gr/1/

** 编辑结束 **

您会注意到这还涉及 'required' 属性，该属性根据需要设置为 true 或 false。您还会注意到我去掉了 php 标签。这是一个演示：http://jsfiddle.net/29rpe7gr/.

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

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

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

我希望这对您有所帮助，如果您想要解决任何问题，请告诉我。祝你好运。

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

Within just the visible parts of a dynamic form, how to make certain fields required using javascript?

html

javascript

forms

hidden

require