1

Есть скрипт запоминающий положение инпутов radio

<script type="text/javascript">
function SetData (elem) { 
    localStorage.setItem(elem.getAttribute('name'), elem.getAttribute('id'));
} 

function GetData (item) { 
    return localStorage.getItem(item); 
}

window.onload = function() {
    var Item = GetData ('type');

    if(Item != undefined) {
        document.getElementById(Item).checked = true;
    }
}
</script>


<input type="radio" name="type" value="all" checked id='search1' onchange="SetData(this);"> Для поиск1
     <input type="radio" name="type" value="blue" id='search2' onchange="SetData(this);"> Для поиск2

И два ввода для поиска

<script type="text/javascript">
function search1() 
{
  var sr_val = $('#search_text').val();
  window.location.href='search1.php?s='+sr_val;
}
function search2() 
{
  var sr_val = $('#search_text').val();
  window.location.href='search2.php?s='+sr_val;
}
</script>



<div id="divsearch1"><input type="text" size="18" maxlength="40" id="search_text" />&nbsp;<input type="button" value="Поиск1" onclick="search1(); return false;" /></div>

<div id="divsearch2"><input type="text" size="18" maxlength="40" id="search_text" />&nbsp;<input type="button" value="Поиск2" onclick="search2(); return false;" /></div>

Помогите сделать так чтобы при выборе radio id='search1' отображался только id="divsearch1" при переключении на radio id='search2' только id="divsearch2" и отображение этих блоков после обновления страницы оставалось выбранному radio (который остается в выбранном положении после обновления страницы)

1 ответ 1

1

Для отображения можно использовать on

$('#element').on('click',function(){

$('#hideElement1').css('display','block');
});

Но т.к. вам нужно будет еще и скрыть второй элемент, в ф-ю придется добавить:

$('#hideElement2').css('display','none');

Записывать выбранные варианты для конкретного юзера будет, как по мне, лучше в localStorage

localstorage.setItem('elementID','value');

В итоге, конкретно для Вашего случая получим что то вроде (топорно, конечно).

        // Узнаем, какой скрыт блок скрыт, 
        var hided = localstorage.getItem('elementID');
        // Сделаем нужный блок скрытым
        $('#divsearch'+hided).css('display','none');
        // Будем отлавливать событие по клику
        $('#search1').on('click',function(){
// назначим видимость-невидимость для нужных блоков
        $('#divsearch1').css('display','block');
        $('#divsearch2').css('display','none');
// запишем в хранилище номер скрытого элемента
    localstorage.setItem('elementID',2);
        });
        // Ну и аналогично для второго инпата в radio .

П.С. данный, конкретный код - очень плохой, и является лишь иллюстрацией, как приблизительно алгоритмично и более понятно можно организовать нужную Вам задачу.

3
  • Не совсем догнал... Варианты еще будут какие нибудь? 15 сен 2016 в 16:04
  • к примеру черезdocument.getElementById("divsearch1").style.display='none'; 15 сен 2016 в 16:58
  • @Алекс31 не городите костыли. jQuery при реализации Вашей задачи намного удобнее. Чем городить километр кода с анонимными функциями и костылями, лучше воспользоваться встроенными возможностями jQuery. 19 сен 2016 в 11:24

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.