Ввод требуется в форме для отправки электронной почты только тогда, когда div является скрытым - PullRequest
Новая
       53

Ввод требуется в форме для отправки электронной почты только тогда, когда div является скрытым

0 голосов
/ 16 мая 2019

В настоящее время у меня есть форма, которая имеет много разных входов. Существует два набора переключателей, которые при выборе отображают два разных элемента div с вводом, который требуется. Проблема в том, что я не могу отправить электронное письмо, пока не будут введены все необходимые данные, даже те, которые не отображаются. Я исправил имя первого вхождения = (отметьте галочкой), но не знаю, как отобразить требуемое сообщение только для (требований), когда 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>

1 Ответ

0 голосов
/ 16 мая 2019

Возможно, вы могли бы создать «неактивную» опцию, которая заполняет выбор A, когда выбран выбор B.Например: 

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

И затем (псевдокод): 

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

И наоборот.Это должно позволить вам отфильтровывать неактивные поля формы и разрешать пользователям отправлять форму, несмотря на то, что требуются все видимые и невидимые поля - без возможности выбора пустого параметра.

...