Блог

Главная - Вопросы по программированию - Форма не работает на сервере и только в мобильной версии

Форма не работает на сервере и только в мобильной версии

#javascript #html #css #forms #bootstrap-5

#javascript #HTML #css #формы #bootstrap-5

Вопрос:

Когда я нахожусь на локальном хостинге, веб-сайт и форма работают отлично, но когда они загружаются на сервер, форма работает ТОЛЬКО в настольной версии, на мобильных устройствах форма не фильтруется и показывает только всех профессионалов. Веб-сайт построен с помощью bootstrap и javascript.

 

<script type="text/javascript">
  window.onload=function(){
var element1 = document.getElementById("link-index");
element1.classList.remove("active");
     var element = document.getElementById("link-profesionales");
     element.classList.add("active");
}
</script>
<div class=" p-2" style="background-color: #f2f3f4;">
<nav class="" aria-label="breadcrumb">
  <div class=" col-sm-1 col-md-12 col-lg-12">
    <ol class="breadcrumb">
      <li class="ms-lg-5 ms-4 breadcrumb-item"><a class="breadcrumb-css" href="index.php">Inicio</a></li>
      <li class="breadcrumb-item active" aria-current="page">Profesionales</li>
    </ol>
  </div><h1 class="ms-lg-5 ms-4">Profesionales</h1>
</nav>
</div>

<style type="text/css">

/* Create three equal columns that floats next to each other */
.column {
  display: none; /* Hide columns by default */
  
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  background-color: white;
  
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

.card-footer{
position:absolute;
  bottom:0;
  width:100%;
  background-color: white;
}

.form-select:focus {
  border-color: #FFBE2C;
  outline: 0;
  box-shadow: 0 0 0 0.25rem #FFBE2C;
}
/* 
select option {
    background-color: #FFBE2C;
    font-weight: bold;
    color: white;
}

 
select option:checked{
    box-shadow: 0 0 10px 100px #1882A8;
    background-color: #FFBE2C;
    font-weight: bold;
    color: white;
}
*/
</style>

<div class="container">
    <div class="row">
<div class="mt-5 col-12 text-center">

<div class="btn-group col-auto" role="group" aria-label="Basic example">
  <form class="" method="GET" action="profesionales.php" id="formprofeesionales" >
    <label style="font-weight: bold;" for="exampleFormControlInput1" class="form-label col-md-8">Consultar por Especialidad:</label>
    <select id="select1" onchange="filterSelection('all')" class="form-select" aria-label="Default select example">
  <option selected value="all">Todos</option>
  <option onclick="filterSelection('Fisioterapia')" value="Fisioterapia">Fisioterapia</option>
  <option onclick="filterSelection('Fonoaudiología')" value="Fonoaudiología">Fonoaudiología</option>
  <option onclick="filterSelection('Psicología')" value="Psicología">Psicología</option>
</select>
</form>
</div>
</div>
</div>




<!-- Portfolio Gallery Grid -->
<div class="row row-cols-2 g-2 row-cols-md-6 mt-1">
  
  <div class="border-0 me-lg-4 my-lg-4  col card column Fonoaudiología">
    <div class="content">
      <div class="h-100 card ">
  <img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
  <div class="card-body">
    <h5 class="card-title">María Silvina Luchino</h5>
    <p class="card-text">Fonoaudiologa</p>
    <p class="mb-5 card-text">MP 34567</p>
    </div>
    <div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
  
        </div>
    </div>
  </div>

  <div class="border-0 me-lg-4 my-lg-4 col card column Psicología">
      <div class="h-100 card ">
  <img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
  <div class="card-body">
    <h5 class="card-title">Milanesa Ola</h5>
    <p class="card-text">Psicología</p>
    <p class="mb-5 card-text">MP 34567</p>
    </div>
    <div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
  
    </div>
    </div>

<div class="border-0 me-lg-4 my-lg-4 col card column Psicología">
    <div class="content">
      <div class="h-100 card ">
  <img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
  <div class="card-body">
    <h5 class="card-title">Carla Paguaga de Santos</h5>
    <p class="card-text">Psicología</p>
    <p class="mb-5 card-text">MP 34567</p>
    </div><div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
  
        </div>
    </div>
  </div>
<div class="border-0 me-lg-4 my-lg-4 col card column Psicología">
      <div class="h-100 card ">
  <img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
  <div class="card-body">
    <h5 class="card-title">Marta</h5>
    <p class="card-text">Psicología</p>
    <p class="mb-5 card-text">MP 34567</p>
    </div><div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
  
    </div>
    </div>
    <div class="border-0 me-lg-4 my-lg-4 col card column Psicología">
      <div class="h-100 card ">
  <img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
  <div class="card-body">
    <h5 class="card-title">Lucia</h5>
    <p class="card-text">Psicología</p>
    <p class="mb-5 card-text">MP 34567</p>
    </div><div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
  
        </div>
    </div>
  
  
    <div class="border-0 me-lg-4 my-lg-4 col card column Fonoaudiología">
      <div class="h-100 card ">
  <img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
  <div class="card-body">
    <h5 class="card-title">Elena</h5>
    <p class="card-text">Fonoaudiologa</p>
    <p class="mb-5 card-text">MP 34567</p>
    </div><div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
  
        </div>
    </div>
  
  
    <div class="border-0 me-lg-4 my-lg-4 col card column Fisioterapia">
      <div class="h-100 card">
  <img src="https://www.bizkaiatalent.eus/wp-content/uploads/2014/05/ETB_Estibaliz-Ruiz-de-Azua1.jpg" class="img-thumbnail card-img-top border-0" alt="mountains">
  <div class="card-body">
    <h5 class="card-title">Susana</h5>
    <p class="card-text">Fisioterapia</p>
    <p class="mb-5 card-text">MP 34567</p>
    </div><div class="card-footer"><a href="#" class="especialidades btn btn-sm">Contactar</a></div>
  
        </div>
    </div>
 

<!-- END GRID -->
</div> 
        
    


</div>


<?php include 'footer.html'; ?>

Форма отображается на мобильном устройстве и имеет selectabled, но просто не фильтруется / не работает. В чем дело?
Заранее спасибо!

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

1. На первый взгляд я вижу, что вы прослушиваете onclick события в <option> elements. Эти элементы отображаются по-разному на мобильных устройствах и (вероятно) не будут запускать эти события. Вместо этого прослушайте change событие в родительском <select> событии и отфильтруйте на основе текущего value выбора.

2. Спасибо, Эмиэль, но это все равно не работает, я изменил то, что ты мне сказал:

Ответ №1:

Удалите все прослушиватели событий из элемента select. Это должно выглядеть как приведенный ниже пример.

 <select id="select1" class="form-select" aria-label="Default select example">
  <option selected value="all">Todos</option>
  <option value="Fisioterapia">Fisioterapia</option>
  <option value="Fonoaudiología">Fonoaudiología</option>
  <option value="Psicología">Psicología</option>
</select>

Затем добавьте один прослушиватель событий в свой файл JavaScript. Это будет прослушивать change событие для #select1 элемента. Всякий раз, когда происходит изменение, оно принимает текущее значение элемента select (которое является значением выбранной опции) и передает его filterSelection вызову.

 $(document).ready(function() {
  $('#select1').on('change', function() {
    const value = $(this).val();
    filterSelection(value);
  });
});