Блог

Главная - Вопросы по программированию - Проблема с отображением текста в флажках HTML, JS -контактной формы

Проблема с отображением текста в флажках HTML, JS -контактной формы

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть 4 флажка в моей форме контактов. Они реализовали функциональность переключателей, поэтому, когда вы нажимаете на другой флажок, первый флажок снимается.

Моя проблема в том, что когда вы нажимаете на флажок 1, он отображает правильный текст. Но когда вы нажимаете на флажок номер 2 или 3 или 4, текст должен исчезнуть, а этого не происходит.

Возможно, мне нужно подключить мои JS-коды к одной функции, но я новичок в JS, поэтому, возможно, вы могли бы помочь мне с этим.

Код здесь

JS

 function checkOnlyOne(b){

var x = document.getElementsByClassName('daychecks');
var i;

for (i = 0; i < x.length; i  ) {
if(x[i].value != b) x[i].checked = false;
}

$(function () {

var submityesClicked;

//catch the click to buttons
$('#submityes').click(function () {
    submityesClicked = true;
});
$('#submitno').click(function () {
    submityesClicked = false;
});

$('#webform').submit(function (e) {
    e.preventDefault();//prevent the default action

    $.ajax({
        type: "POST",
        /*url: "process.php", //process to mail
         data: $('form.contact').serialize(),*/
        success: function (msg) {
            window.location.replace(submityesClicked ? "/submit_resolved_yes.php" : "/submit_resolved_no.php");
        },
        error: function () {
            alert("error");
        }
    });
});
});

function myFunction() {
var checkBox = document.getElementById("document1");
var text = document.getElementById("text");
if (checkBox.checked == true){
text.style.display = "block";
} else {
 text.style.display = "none";
 document.getElementById("myFunction").checked = false;
}
}

HTML-код

  <form name="cf2"  id="formularos" method="post" action="test.php">
                            <div class="checkbox-group required">
                            <p class="center">Vyberte školenie</p>
                            <label  class="container riadok"><p for="document1" class="dolava">§20 Poučená osoba</p>
                            <input type="checkbox" class="daychecks"  name="document[]" value="20" id="document1" onclick="checkOnlyOne(this.value); myFunction()" />
                            <span class="checkmark"></span>
                            
                            </label>
                            <label class="container riadok"><p for="document" class="dolava">Aktualizácia: §21 AŽ §24</p>
                            <input type="checkbox" class="daychecks"  name="document[]" value="21-24" id="document2" onclick="checkOnlyOne(this.value);" >
                            <span class="checkmark"></span>
                            </label>
                            <label class="container riadok"><p for="document" class="dolava">§21 AŽ §23 pre EZ</p>
                            <input type="checkbox" class="daychecks"  name="document[]" value="21-23" id="document3" onclick="checkOnlyOne(this.value);" >
                            <span class="checkmark"></span>
                            </label>
                            <label class="container riadok"><p for="document" class="dolava">§24 Revízny technik</p>
                            <input type="checkbox" class="daychecks" name="document[]" value="24" id="document4" onclick="checkOnlyOne(this.value);" >
                            <span class="checkmark"></span>
                            </label>
                            
                            
            <p id="text" style="display:none">ZÁVÄZNÁ PRIHLÁŠKA <br>Na "Kurz o POUČENEJ OSOBE" <br>pre držiteľov platných „Osvedčení“ podľa vyhl. MPSVaR SR č. 508/09 Z. z , § 20, podľa § 16 odst. 4 a 7 zákona č. 124/2006 Z. z., o BOZP a zmene a doplnení niektorých zákonov v znení neskorších predpisov , ktorými sa dopĺňa zákon č. 355/2007 Z. z., o podpore verejného zdravia, najmä zák. č. 470/2011 Z. z. s vyznačením účasti na origináli „ Osvedčenia“.</p>
           
                            </div>
                            <p class="center">Vyplňte osobné údaje</p>
                            <input type="text" name="name" id="name" class="form-control" placeholder="Meno" required="required">
                            <input type="text" name="email" id="email" class="form-control" placeholder="Email" required="required">
                            <input type="tel" name="phone" id="phone" class="form-control" placeholder="Telefónne číslo" pattern="[0-9] "  title="Zadajte iba čísla." required="required">
                            
<input type="hidden" name="send" value="1" />
 <button type="submit" value="SEND"  id="submit" class="btn btn-primary"> ODOSLAŤ PRIHLÁŠKU</button>

</form>

URL страницы находится здесь
ДЕМОНСТРАЦИОННЫЙ URL

Ответ №1:

В вашем code требуется несколько улучшений, которые я сделал, и теперь они работают так, как ожидалось.

Вам нужно вызвать myFunction текстовое отображение для каждого checkbox — в этой функции вы можете просто this ссылаться на элемент, на который нажали, и в функции просто проверить, является ли ввод checked и id элемента document1 таким образом, вам не нужно писать код для каждого ввода или нескольких текстов, которые у вас есть.

Кроме того, вам не нужно проверять условие if, добавляя true к нему, поскольку if (e.checked) это означает, что это будет truthy — (true), если вам не нужно ничего определять, а также вам не нужно также проверять значение false . Поскольку, как только флажки изменятся, это будет unchecked по default

Редактировать: Поскольку вы хотели отображать different текст на разных checkbox экранах, проверено. Я также добавил эту функциональность.

Живая рабочая демонстрация:

 function checkOnlyOne(b) {

  var x = document.getElementsByClassName('daychecks');
  var i;

  for (i = 0; i < x.length; i  ) {
    if (x[i].value != b) x[i].checked = false;
  }
}

$(function() {

  var submityesClicked;

  //catch the click to buttons
  $('#submityes').click(function() {
    submityesClicked = true;
  });
  $('#submitno').click(function() {
    submityesClicked = false;
  });

  $('#webform').submit(function(e) {
    e.preventDefault(); //prevent the default action

    $.ajax({
      type: "POST",
      /*url: "process.php", //process to mail
       data: $('form.contact').serialize(),*/
      success: function(msg) {
        window.location.replace(submityesClicked ? "/submit_resolved_yes.php" : "/submit_resolved_no.php");
      },
      error: function() {
        alert("error");
      }
    });
  });
});

function myFunction(e) {
  var text = document.getElementById("text"); //1
  var text2 = document.getElementById("text2"); //2
  var text3 = document.getElementById("text3"); //3
  var text4 = document.getElementById("text4"); //4
  e.checked amp;amp; e.getAttribute('id') == 'document1' ? text.style.display = "block" : text.style.display = "none";
  e.checked amp;amp; e.getAttribute('id') == 'document2' ? text2.style.display = "block" : text2.style.display = "none";
  e.checked amp;amp; e.getAttribute('id') == 'document3' ? text3.style.display = "block" : text3.style.display = "none";
  e.checked amp;amp; e.getAttribute('id') == 'document4' ? text4.style.display = "block" : text4.style.display = "none";
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="cf2" id="formularos" method="post" action="test.php">
  <div class="checkbox-group required">
    <p class="center">Vyberte školenie</p>
    <label class="container riadok">
      <p for="document1" class="dolava">§20 Poučená osoba</p>
      <input type="checkbox" class="daychecks" name="document[]" value="20" id="document1" onclick="checkOnlyOne(this.value); myFunction(this)" />
      <span class="checkmark"></span>

    </label>
    <label class="container riadok">
      <p for="document" class="dolava">Aktualizácia: §21 AŽ §24</p>
      <input type="checkbox" class="daychecks" name="document[]" value="21-24" id="document2" onclick="checkOnlyOne(this.value); myFunction(this)">
      <span class="checkmark"></span>
    </label>
    <label class="container riadok">
      <p for="document" class="dolava">§21 AŽ §23 pre EZ</p>
      <input type="checkbox" class="daychecks" name="document[]" value="21-23" id="document3" onclick="checkOnlyOne(this.value); myFunction(this)">
      <span class="checkmark"></span>
    </label>
    <label class="container riadok">
      <p for="document" class="dolava">§24 Revízny technik</p>
      <input type="checkbox" class="daychecks" name="document[]" value="24" id="document4" onclick="checkOnlyOne(this.value); myFunction(this)">
      <span class="checkmark"></span>
    </label>


    <p id="text" style="display:none">ZÁVÄZNÁ PRIHLÁŠKA <br>Na "Kurz o POUČENEJ OSOBE" <br>pre držiteľov platných „Osvedčení“ podľa vyhl. MPSVaR SR č. 508/09 Z. z , § 20, podľa § 16 odst. 4 a 7 zákona č. 124/2006 Z. z., o BOZP a zmene a doplnení niektorých zákonov v znení neskorších predpisov
      , ktorými sa dopĺňa zákon č. 355/2007 Z. z., o podpore verejného zdravia, najmä zák. č. 470/2011 Z. z. s vyznačením účasti na origináli „ Osvedčenia“.</p>

    <p id="text2" style="display:none">Text 2 <br>Test 2</p>

    <p id="text3" style="display:none">Text 3 <br>Test 3</p>
    <p id="text4" style="display:none">Text 4 <br>Test 4</p>


  </div>
  <p class="center">Vyplňte osobné údaje</p>
  <input type="text" name="name" id="name" class="form-control" placeholder="Meno" required="required">
  <input type="text" name="email" id="email" class="form-control" placeholder="Email" required="required">
  <input type="tel" name="phone" id="phone" class="form-control" placeholder="Telefónne číslo" pattern="[0-9] " title="Zadajte iba čísla." required="required">

  <input type="hidden" name="send" value="1" />
  <button type="submit" value="SEND" id="submit" class="btn btn-primary"> ODOSLAŤ PRIHLÁŠKU</button>

</form>

Комментарии:

1. Спасибо, приятель, это работает. Разве вы не знаете, как я мог бы отредактировать функцию js, чтобы отобразить даже текст2 для флажка document2, например?

2. Я пробовал это, но это не сработало var checkBox = document.getElementById("document1"); var checkBox2 = document.getElementById("document2"); var text = document.getElementById("text"); var text2 = document.getElementById("text2");

3. @LuboMasura Да, конечно. позвольте мне проверить, как это можно добавить 🙂

4. Если это возможно, мне нужны 4 документа и текст. Теперь у меня есть только один. Большое вам спасибо!!!

5. @LuboMasura Проверьте мой ответ — все работает для вас. Отображение другого текста при другом установленном флажке

Ответ №2:

Я слепой, и я не вводил вызов функции в другие флажки. Исправлено путем добавления функции к каждому флажку.

  <label  class="container riadok"><p for="document1" class="dolava">§20 
 Poučená osoba</p>
 <input type="checkbox" class="daychecks"  name="document[]" value="20" 
 id="document1" onclick="checkOnlyOne(this.value); myFunction()" />
 <span class="checkmark"></span>
 </label>
<label class="container riadok"><p for="document" 
class="dolava">Aktualizácia: §21 AŽ §24</p>
<input type="checkbox" class="daychecks"  name="document[]" value="21-24" 
id="document2" onclick="checkOnlyOne(this.value); myFunction()" >
<span class="checkmark"></span>
</label>
<label class="container riadok"><p for="document" class="dolava">§21 AŽ §23 
pre EZ</p>
<input type="checkbox" class="daychecks"  name="document[]" value="21-23" 
id="document3" onclick="checkOnlyOne(this.value); myFunction()" >
<span class="checkmark"></span>
</label>
<label class="container riadok"><p for="document" class="dolava">§24 Revízny 
technik</p>
<input type="checkbox" class="daychecks" name="document[]" value="24" 
id="document4" onclick="checkOnlyOne(this.value); myFunction()" >
<span class="checkmark"></span>
</label>