Очистка данных при новом поиске Javascript - PullRequest
Новая
       39

Очистка данных при новом поиске Javascript

1 голос
/ 17 апреля 2020

[! [Введите описание изображения здесь] [1]] [1] Я хочу очистить все поля, которые заполняются из этого скрипта ниже, при повторном поиске. Этот сценарий заполняет 25 полей с размерами обуви и ценами после того, как все циклически повторяется, проблема в том, что если следующий искомый элемент не имеет одинаковое количество размеров обуви (что часто бывает), в ячейках остаются предыдущие данные (напр., первый ботинок достигает размера 15, следующий поиск - только размер 12, поэтому размеры 12,5-15 остаются с предыдущими данными, поскольку они не перезаписывают их). 

  $('#searchForm').on('submit', (e) => {
    e.preventDefault();
    let searchText = $('#search-box').val();
    $.ajax({
          url: "/",
          type: 'POST',
          data: { 
           input: searchText},
           success: function(res) {
              console.log(res);

              let product = res;

              document.getElementById("shoe").innerHTML = (product.stockx.shoeId);
              document.getElementById("date").innerHTML = (product.stockx.release);
              document.getElementById("sneakerid").style.backgroundImage = 'url('+(product.photo)+')';  
              document.getElementById("shoeOverlay").style.backgroundImage = 'url('+(product.photo)+')';  

              let size = product.stockx.price_size


              for( let i = 0; i < size.length; i += 1) {
                document.getElementById(i === 0 ? `shoesize` : `shoesize${i}`).innerHTML = (size[i].sizing), 
                document.getElementById(i === 0 ? `stockxprice` : `stockxprice${i}`).innerHTML = ('$' + size[i].pricing);

              } 


              for( let i = 0; i < product.sizes.length; i += 1) {
              document.getElementById(i === 0 ? `goatprice` : `goatprice${i}`).innerHTML = ('$' + product.sizes[i][1]*.01);
              if (product.sizes[i][1]*.01 > size[i].pricing) document.getElementById(i === 0 ? `goatprice` : `goatprice${i}`).style.color = "#00ffb3";
              else if (product.sizes[i][1]*.01 < size[i].pricing) document.getElementById(i === 0 ? `stockxprice` : `stockxprice${i}`).style.color = "#00ffb3";

                }


            }}
      )})
})

HTML фрагмент 


       <table class="table">
          <tr>
            <td>
              <div class="innerbox">
                <div id="shoesize" ></div>
                  <div class="prices">
                    <div id="stockxprice"></div>
                    <div id="goatprice"></div>
                  </div>
                    <div class="logocontainer">
                      <div class="stockxlogo"> <img src="img/stockxlogo.svg" ></div> 
                       <div class="goatlogo"><img src="img/goatlogo.svg" height="30px" width="30px"></div> 

                  </div>



<form id="searchForm">
                   <input type="text" autocomplete="off" id="search-box">
                   <div class="searchlogo"> <img src="img/searchlogo.svg" height="15px" width="15px" href="#"></div>
                  </form>

                </div>


  [1]: https://i.stack.imgur.com/plWLo.jpg

1 Ответ

1 голос
/ 17 апреля 2020

Если элементы находятся внутри form, вы можете использовать метод form.reset().

HTMLFormElement.reset ():

Метод HTMLFormElement.reset () восстанавливает значения элемента формы по умолчанию. Этот метод делает то же самое, что и нажатие кнопки сброса формы.

Вы можете прочитать здесь: HTMLFormElement.reset

Выполнить и проверить: 

function resetForm() {
  let form = document.getElementById("myForm");
  form.reset();
}
<form id="myForm">
  <input type="text" value="" />
  <input type="text" value="" />
  <input type="text" value="" />
  <input type="text" value="" />
  <input type="text" value="" />
  <input type="text" value="" />
</form>

<input type="button" value="reset" onclick="resetForm()" />

РЕДАКТИРОВАТЬ: Если элементы не находятся внутри form:

Если ваши элементы не находятся внутри формы, вы можете дать им всем общее имя класса, чтобы помочь вам перебирать их.

Выполнить и проверить: 

function resetElems() {
  $(".resetable").html("");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="shoesize" class="resetable">15</div>
<div class="prices">
  <div id="stockxprice" class="resetable">13</div>
  <div id="goatprice" class="resetable">14</div>
</div>

<input type="button" value="click to reset" onclick="resetElems()" />

РЕДАКТИРОВАТЬ 2: Сброс только при втором поиске и после:

Если вы sh чтобы выполнить сброс только после первого поиска, вы можете объявить глобальную переменную, чтобы вести подсчет поисков (увеличивать ее при каждом поиске), а затем сделать что-то вроде этого: 

var count = 0; // this variable is global; it's not inside any function

$('#searchForm').on('submit', (e) => {
    e.preventDefault();
    let searchText = $('#search-box').val();
    $.ajax({
        url: "/",
        type: 'POST',
        data: { 
            input: searchText
        },
        success: function(res) {
            if(count > 0) {  // only reset if it's not the first search
                $(".resetable").html("");
            }

            count++;         // increment the count

            // other code ...
        }
    });
});
...