Most likely, this will be another stupid question, but, from the height of my knowledge of scripts, this is pretty serious. So ..

There is a search form that displays the result in the .s-results prepared for it, while the rest of the page content ( .site-main ) remains to hang after the search results.

How to make it so that when you click on "search" the main content ( .site-main ) is hidden, you need to show a button ("Hide search results"), which will perform the opposite action (show site-main and clear s-results )? Ideally, the same button would still clear the form ..

Form Code:

 <form id="ajax_wpqsffrom_91"> <input type="hidden" name="s" value="4fbdf7ac27"> <input type="hidden" name="aformid" value="91"> <input type="hidden" id="jaxbtn" value="#content"> <div class="awpqsf_class taxdropdown-0"> <label class="tax-label-0">Район</label> <input type="hidden" name="taxo[0][name]" value="area"> <select id="taxselect-0" name="taxo[0][term]"> <option selected="" value="awpqsftaxoall">Все районы</option> <option value="area1">Район1</option> <option value="area2">Район2</option> </select> <br> </div> <div class="awpqsf_class taxdropdown-1"> <label class="tax-label-1">Застройщик</label> <input type="hidden" name="taxo[1][name]" value="developers"> <select id="taxselect-1" name="taxo[1][term]"> <option selected="" value="awpqsftaxoall">Все застройщики</option> <option value="dev1">Застройщик1</option> <option value="dev2">Застройщик2</option> </select> <br> </div> <div class="awpqsf_class taxdropdown-2"> <label class="tax-label-2">Срок сдачи</label> <input type="hidden" name="taxo[2][name]" value="dline"> <select id="taxselect-2" name="taxo[2][term]"> <option selected="" value="awpqsftaxoall">Любой</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> </select> <br> </div> <div class="awpqsf_class taxdropdown-3"> <label class="tax-label-3">Количество комнат</label> <input type="hidden" name="taxo[3][name]" value="rooms"> <select id="taxselect-3" name="taxo[3][term]"> <option selected="" value="awpqsftaxoall">Любое</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="4more">4+</option> </select> <br> </div> <div class="awpqsf_class taxdropdown-4"> <label class="tax-label-4">Цена</label> <input type="hidden" name="taxo[4][name]" value="price"> <select id="taxselect-4" name="taxo[4][term]"> <option selected="" value="awpqsftaxoall">Любая</option> <option value="0-1mil">0-1 млн.руб.</option> <option value="1-2mill">1-2 млн.руб</option> <option value="2-3mill">2-3 млн.руб</option> <option value="3-4mill">3-4 млн.руб</option> <option value="4moremill">4+ млн.руб</option> </select> <br> </div> <div class="awpqsf_class taxdropdown-5"> <label class="tax-label-5">Рубрика</label> <input type="hidden" name="taxo[5][name]" value="heading"> <select id="taxselect-5" name="taxo[5][term]"> <option selected="" value="awpqsftaxoall">Любая</option> <option value="sells">Акции</option> <option value="near_subway">Квартиры у метро</option> <option value="low">Малоэтажное строительство</option> <option value="prem">Премиум объекты</option> <option value="start">Старты продаж</option> <option value="hits">Хиты продаж</option> </select> <br> </div> <div class="awpqsf_class awpqsf_submit"> <input type="button" id="awpqsf_id_btn" value="Поиск" alt="[Submit]" class="searchbtn"> </div> </form>

Form script:

  jQuery(document).ready(function($) { $('body').on('click','.searchbtn', function(e) { passing_data($(this)); return false; }); $('body').on('click','.pagievent', function(e) { var pagenumber = $(this).attr('id'); var formid = $('#curform').val(); pagination_ajax(pagenumber, formid); return false; }); $('body').on('keypress','.awpqsftext',function(e) { if(e.keyCode == 13){ e.preventDefault(); passing_data($(this)); } }); window.passing_data = function ($obj) { var ajxdiv = $obj.closest("form").find("#jaxbtn").val(); var res = {loader:$('<div />',{'class':'mloading'}),container : $(''+ajxdiv+'')}; var getdata = $obj.closest("form").serialize(); var pagenum = '1'; jQuery.ajax({ type: 'POST', url: ajax.url, data: ({action : 'awpqsf_ajax',getdata:getdata, pagenum:pagenum }), beforeSend:function() {$(''+ajxdiv+'').empty();res.container.append(res.loader);}, success: function(html) { res.container.find(res.loader).remove(); $(''+ajxdiv+'').html(html); } }); } window.pagination_ajax = function (pagenum, formid) { var ajxdiv = $(''+formid+'').find("#jaxbtn").val(); var res = {loader:$('<div />',{'class':'mloading'}),container : $(''+ajxdiv+'')}; var getdata = $(''+formid+'').serialize(); jQuery.ajax({ type: 'POST', url: ajax.url, data: ({action : 'awpqsf_ajax',getdata:getdata, pagenum:pagenum }), beforeSend:function() {$(''+ajxdiv+'').empty(); res.container.append(res.loader);}, success: function(html) { res.container.find(res.loader).remove(); $(''+ajxdiv+'').html(html); //res.container.find(res.loader).remove(); } }); } $('body').on('click', '.awpsfcheckall',function () { $(this).closest('.togglecheck').find('input:checkbox').prop('checked', this.checked); }); });//end of script
  • add code please) - Niklex
  • <input type = "button" onclick = "clearDiv ()"> function clearDiv () {document.getElementById ("form"). text = ""; } Here is an example for cleaning - Niklex
  • @niklex, thanks for the answer, how to understand this code? what is he doing? - malginovdesign
  • I understood only that when I clicked, the divine clears (insert its name into the brackets), and then what? - malginovdesign
  • This code just clears the div with id "form" - Niklex

2 answers 2

 var sButton = document.querySelector('.s-button'), resultCont = document.querySelector('.s-result'), mainCont = document.querySelector('.main-site'), n = 0, showResult = function(e){ e.target.value == 'search' ? e.target.value = 'clear' : e.target.value = 'search'; resultCont.innerHTML == '' ? resultCont.innerHTML = 'results #' + n++ : resultCont.innerHTML = ''; mainCont.classList.toggle('hidden'); }; sButton.addEventListener('click', showResult, false); 
 .hidden { display: none; } 
 <input type="button" class="s-button" value="search"> <div class="s-result"></div> <div class="main-site">main content</div>

  • Lord Jesus, it works - malginovdesign
  • And on the page, no :( if I understand correctly, it’s enough to wrap the code in a script for checking. When I click on the search, the value changes to search, the Uncaught TypeError: Cannot read property 'innerHTML' of nullshowResult @ (index):260 error is Uncaught TypeError: Cannot read property 'innerHTML' of nullshowResult @ (index):260 content is not hidden, on subsequent clicks nothing happens, except for changing the value of the button and writing this error to the console, only the search script regularly returns results - malginovdesign
  • Classes need to be aligned. The result container is the "s-result" class, for the site data the "main-site" class. In general, if the unfamiliar with js, then of course this example will not be enough - Antosha Shmonoff
  • Fortunately, a little familiar, just forgot to add a line to css. But anyway, there is a conflict here - the search script each time the button is pressed displays the results, respectively, clear does not work, the work stops and loading hangs endlessly. Is it possible to write clear in a separate button and not touch this one? - malginovdesign
  • one
    that doesn't work O_o - Antosha Shmonoff
 <input type="button" onclick="clearDiv()"> //html function clearDiv() { document.getElementById("form").text=""; } //javascript

When you click on the button, the div with id form will be cleared)