Question

我目前有一个具有许多不同输入的表格。有两组单选按钮，当选中它们时，它们会显示两个不同的div，并带有所需的输入。问题是在提供所有必需的输入（包括未显示的输入）之前，我无法发送电子邮件。我已经修复了第一个出现的名称=（tick），但是不知道如何通过选择单选按钮（选项）在显示div时仅显示（要求）所需的消息。

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/[jquery version here]/jquery.min.js"
language="javascript" type="text/javascript"></script>
    <title>Test</title>

    <style type="text/css">
        body {
            padding: 80px;
        }
        #requirements {
        width: 100%;
        }
        #results {
        width: 100%;
        }


    </style>

<script type="text/javascript">



// DISPLAY HIDDEN TEXT
function hide() {
  document.getElementById('hidden').style.display ='none';
}
function show() {
  document.getElementById('hidden').style.display = 'block';
}

function hidetext() {
    document.getElementById('hiddentwo').style.display = 'none';
}

function showtext() {
    document.getElementById('hiddentwo').style.display = 'block';
}


function validateForm(e) {
    let inp=[...document.getElementsByName("tick")];
    if(!inp.some(i=>i.checked) && chk.checked) {
      e.preventDefault();
      alert('You must select why you are attending!');
    }
}



</script>

</head>
<body>
<h1>Registration Request</h1>

<form id="form" method="post" name="form" enctype="multipart/form-data" action="#">

        <p>This course is identified in my Work Plan and Learning Agreement</p>
        <input type="radio" name="optionOne" value="yes" onclick="hide()" required> Yes<br>
        <input type="radio" id="chk" name="optionOne" value="no" onclick="show()"> No<br>
        <div id="optionOne_error" class="val_error"></div>

    <p>
        <div id="hidden" style="display: none">
        <p>I am attending this session because (tick all that apply) </p>
        <input type="checkbox" name="tick" value="It will help me develop the skills and knowledge required for my current role" > It will help me develop the skills and knowledge required for my current role<br>
        <input type="checkbox" name="tick" value="It will help me develop the skills and knowledge for a possible future role/body of work" > It will help me develop the skills and knowledge for a possible future role/body of work <br>
        <input type="checkbox" name="tick" value="t was identified as a need during my performance management discussions"> It was identified as a need during my performance management discussions<br>
        <input type="checkbox" name="tick" value="My manager recommended that I attend"> My manager recommended that I attend<br>
        <input type="checkbox" name="tick" value="I am interested in the content"> I am interested in the content<br>
        <p>
        <div id="tick_error" class="val_error"></div>

        <p>What would you like to achieve as a result of your attendance? For example, "I would like to learn to write better emails to improve my communication skills." </p>
        <input type="text" id="results" name="results">
</div>


<p>Do you require adjustments or additions to the session delivery to support your participation? For example, hearing loop or wheelchair access.</p>
        <input type="radio" name="option" value="yes" onclick="showtext()" required> Yes<br>
        <input type="radio" name="option" value="no" onclick="hidetext()"> No<br>

        <div id="option_error" class="val_error"></div>

<div id="hiddentwo" style="display: none;">
    <p>Please provide details of your requirments.</p>
<input type="text" id="requirements" name="requirements" required >
</div>



<p>Please upload any supporting documentation to support your registration request </p>
<div class="browse-button">
  <input type="file" name="attachments[]" multiple="multiple"></input>
</div>

<div class="submit-button">
  <button type="submit" name="submit" onclick="validateForm(event)" onclick="validateFormTxt(event)" value="submit">Submit</button>
</div>

</form>

<img src="Logo.png" alt="Persuit Technology Logo" width="110" style="margin-top: 20px">

</body>
</html>

Answer 1

也许您可以创建一个“非活动”选项，当选择了选择B时，该选项将填充在选择A上。例如：

<input style="display: none;" type="checkbox" name="tick" value="inactive">

然后（伪代码）：

when ( input A :selected ) { activate( input B "inactive" ) }

反之亦然。这样一来，您就可以过滤掉无效的表单字段，并允许用户尽管需要所有可见和不可见的字段也可以提交表单，而无需选择空白选项。

仅在取消隐藏div时，才需要输入表单以发送电子邮件

1 个答案: