переключить обязательное поле с помощью флажка JavaScript - PullRequest
Новая
       85

переключить обязательное поле с помощью флажка JavaScript

0 голосов
/ 07 ноября 2018

Я уже давно искал эту проблему, и вот что я придумал, но она не работает: 

<form action="Subscription.php" method="post">
     <label>field1<a style="color:red">*</a></label>
     <input type="text" id="field1" name="field1" pattern="^[A-Za-z -]+$" required>              

     <input type="checkbox" name="checkbox1" onclick="showMe('more'); togglerequirement();">Do you want more?

     <div id="more" style="display:none">
          <label>field2<a style="color:red">*</a></label>
          <input type="text" id="field2" name="field2" pattern="^[A-Za-z -]+$">
     </div>          
     <input type="submit" value="Invia richiesta di registrazione" class="btn" </form>

<script type="text/javascript">
function showMe (box) {
    var chboxs = document.getElementsByName("more");
    var vis = "none";
        if(chboxs[0].checked) {
            vis = "block";
        }
    document.getElementById(box).style.display = vis;
}

function togglerequirement(){
    var checkbox = document.getElementsByName("more");
    var field2= document.getElementsByid("field2");

    if(checkbox[0].checked){
        field2.setAttribute("required", "");
    }else{
        field2.removeAttribute("required");
    }
}
</script>

Прежде чем что-то сказать, я уже попробовал с fiedl2.required; и это не работает в любом случае.

Что я могу сделать?

1 Ответ

0 голосов
/ 07 ноября 2018

Вы пытаетесь найти флажок с именем «more», но у него есть name = "checkbox1":

<input type="checkbox" name="checkbox1" onclick="showMe('more'); togglerequirement();">

Работает нормально, но меняет второе поле на обязательное, когда отображается, и не требуется, когда скрывается. Так что вы не видите никакого эффекта.

Не требуется здесь .

Требуется здесь .

Если я вас полностью понимаю, попробуйте это: 

<form action="Subscription.php" method="post">
     <label>field1<a style="color:red">*</a></label>
     <input type="text" id="field1" name="field1" pattern="^[A-Za-z -]+$" required>              

     <input type="checkbox" name="more" onclick="showMe('more'); togglerequirement();">Do you want more?

     <div id="more" style="display:none">
          <label>field2<a style="color:red">*</a></label>
          <input type="text" id="field2" name="field2" pattern="^[A-Za-z -]+$">
     </div>          
     <input type="submit" value="Invia richiesta di registrazione" class="btn" </form>

<script type="text/javascript">
function showMe (box) {
    var chboxs = document.getElementsByName("more");
    var vis = "none";
        if(chboxs[0].checked) {
            vis = "block";
        }
    document.getElementById(box).style.display = vis;
}

function togglerequirement(){
    var checkbox = document.getElementsByName("more");
    var field2 = document.getElementById("field2");

    if(checkbox[0].checked){
        field2.setAttribute("required", "");
    }else{
        field2.removeAttribute("required");
    }
}
</script>
...