2015-02-27 2 views
0

Я пытаюсь выполнить функцию при изменении внутри формы.Функция формы не выполнена

<ul class="list booking-filters-list"> 
    <li> 
    <h5 class="booking-filters-title">Price</h5> 
     <input type="text" id="price-slider"> 
    </li> 
    <li>          
    <h5 class="booking-filters-title">Star Rating</h5> 
    <form id="hotelRating" name="hotelRating" onchange="filterBy()"> 
    <div class="checkbox"> 
     <label> 
      <input class="i-check" type="checkbox" name="5" value="5.0" />5 star</label> 
    </div> 
    <div class="checkbox"> 
     <label> 
      <input class="i-check" type="checkbox" name="4" value="4.0" />4 star</label> 
    </div> 
    <div class="checkbox"> 
     <label> 
      <input class="i-check" type="checkbox" name="3" value="3.0" />3 star</label> 
    </div> 
    <div class="checkbox"> 
     <label> 
      <input class="i-check" type="checkbox" name="2" value="2.0" />2 star</label> 
    </div> 
    <div class="checkbox"> 
     <label> 
      <input class="i-check" type="checkbox" name="1" value="1.0" />1 star</label> 
    </div> 
    </form> 
    </li> 
</ul> 

Script Funciton:

<script> 
    function filterBy() { 
    $('.searchtable').addClass('hide'); 
    $('.spinner').removeClass('hide'); 

    $.ajax({ 
     type: 'GET', 
     data: {'name':'<?php echo strval($_GET['name']); ?>','arrival':'<?php echo strval($_GET['arrival']); ?>','departure':'<?php echo strval($_GET['departure']);?>','guests':'<?php echo strval($_GET['guests']);?>','propertyCategory':$("#hotelType input[type='checkbox']:checked").val(),'minStarRating':$("#hotelRating input[type='checkbox']:checked").val(),'order_by':$('#order_by').val()}, 
     url: '<?php echo $baseUrl ?>/hotels/hotelFilterResult.php', 


     success: function (data) { 
      alert('data loaded succesfully'); 
      alert(this.url); 

      $('.searchtable').replaceWith(data); 
      $('.spinner').addClass('hide'); 
      $('.searchtable').removeClass('hide'); 

     }, 
     error: function (xhr) { 
      alert('data not loaded'); 
     } 
}); 

} 
</script> 

Я установил функцию filterBy() для выполнения OnChange wihtin формы - но ничего не происходит, когда я установил один из флажков.

EDIT: Если я удалю класс «i-check», функция вызывается. Почему это может быть?

Может ли какое-нибудь пятно, что я делаю неправильно?

+3

Успешно ли ваш звонок? Что говорит консоль при выполнении функции? – Creaven

+5

Как правило, вы помещаете 'onchange' в сменный элемент (например, фактический флажок), я не уверен, что он должен работать на всей форме. –

+1

Кстати, у вас, вероятно, есть отраженная уязвимость XSS в тех местах, где вы повторяете переменные '$ _GET'. События @TarynEast 'change' должны пузыриться. –

ответ

0
  console.log("recieved data-------*\n\nResponse : " + response +"\n\nStatus : " + status); 

$ ('. Searchtable'). ReplaceWith (data);

Добавить эту консольную инструкцию и открыть средства разработки для браузера и консоли просмотра. Я сомневаюсь, что он будет стрелять, так как изменение не будет зарегистрировано, поскольку вы добавили его в форму. Вы можете добавить класс к вам флажков как класс = «» mycheckbox

Тогда в JQuery

$('.mycheckbox').click ... 

Добавить документ готов раньше.

+0

Если я удаляю класс «i-check», функция работает. Не могу понять, почему - @Creaven –

+0

Вы проверили консоль, она может сказать вам, почему? – Creaven