Форум

MasterDmx · #1 (**permalink**) 16.02.2013, 18:07

Есть код списка, который всплывает при обновлении страницы:

<form name="form3">
   <select class="stat_sel" size="3">
    <option selected value="form1">Потребительский кредит</option>
    <option value="form2">Автокредит</option>
    <option value="form3">Ипотека</option>
    <option value="form4">Экспресс кредит</option>
    <option value="form5">Микрозайм</option>
    <option value="form6">Кредитная карта</option> 
   </select>
     
<a title="Продолжить" style="cursor:pointer; font-weight:bold; text-align:right;display:block;" onclick='toggle("form6");'>Далее</a>
   
  </form>

А так же скрипт, который обновляет контент на странице:

<script type='text/javascript'>  
  function toggle(id) {  
  document.getElementById("conten").innerHTML = document.getElementById(id).innerHTML;  
  }  
  toggle("form1"); 
  </script>

Вот в чем проблема. Нужно что бы при выборе пункта из списка, значение value вписывалось в onclick='toggle("form6");' ссылки ниже , т.е заместо "form6" там было значение value пункта, который выбрал пользователь.

Задача вроде бы очень простая, но мои знание JS очень малы, практически на нуле. Пытался найти решение в интернете, но мои поиски не увенчались успехом, по-этому прошу вашей помощи. Заранее благодарен

Deff · #2 (**permalink**) 16.02.2013, 18:26

<form name="form3">
   <select id="select" class="stat_sel" size="3">
    <option selected value="form1">Потребительский кредит</option>
    <option value="form2">Автокредит</option>
    <option value="form3">Ипотека</option>
    <option value="form4">Экспресс кредит</option>
    <option value="form5">Микрозайм</option>
    <option value="form6">Кредитная карта</option> 
   </select>
     
<a id="toggle" title="Продолжить" style="cursor:pointer; font-weight:bold; text-align:right;display:block;" onclick='toggle("form6");'>Далее</a>
   
  </form>
<script type='text/javascript'>  
  document.getElementById("select").onchange =function () {  
    document.getElementById("toggle").setAttribute('onclick','toggle('+this.value+')');
  }

  function toggle(id) {  
    document.getElementById("conten").innerHTML = document.getElementById(id).innerHTML;  
  }  
  toggle("form1"); 
  </script>

рони · #3 (**permalink**) 16.02.2013, 18:29

MasterDmx,
а не проще вписать значение прямо в function toggle а в onclick ничего непередавать

рони · #4 (**permalink**) 16.02.2013, 18:37

MasterDmx,
Вариант ...

<!DOCTYPE HTML>

<html>

<head>
<meta charset="utf-8" />
  <title></title>
</head>

<body>
<form name="form3">
   <select id="select" class="stat_sel" size="3">
    <option selected value="form1">Потребительский кредит</option>
    <option value="form2">Автокредит</option>
    <option value="form3">Ипотека</option>
    <option value="form4">Экспресс кредит</option>
    <option value="form5">Микрозайм</option>
    <option value="form6">Кредитная карта</option>
   </select>

<a id="toggle" title="Продолжить" style="cursor:pointer; font-weight:bold; text-align:right;display:block;" onclick='toggle();'>Далее</a>

  </form>
<script type='text/javascript'>
   function toggle() {
     var c = document.getElementById("select");
     var id = c.value
    alert(id);
   // document.getElementById("conten").innerHTML = document.getElementById(id).innerHTML;
  }
</script>

</body>

</html>

MasterDmx · #5 (**permalink**) 16.02.2013, 20:03

Сообщение от Deff

<form name="form3">
   <select id="select" class="stat_sel" size="3">
    <option selected value="form1">Потребительский кредит</option>
    <option value="form2">Автокредит</option>
    <option value="form3">Ипотека</option>
    <option value="form4">Экспресс кредит</option>
    <option value="form5">Микрозайм</option>
    <option value="form6">Кредитная карта</option> 
   </select>
     
<a id="toggle" title="Продолжить" style="cursor:pointer; font-weight:bold; text-align:right;display:block;" onclick='toggle("form6");'>Далее</a>
   
  </form>
<script type='text/javascript'>  
  document.getElementById("select").onchange =function () {  
    document.getElementById("toggle").setAttribute('onclick','toggle('+this.value+')');
  }

  function toggle(id) {  
    document.getElementById("conten").innerHTML = document.getElementById(id).innerHTML;  
  }  
  toggle("form1"); 
  </script>

К сожалению, ваш вариант не работает, т.е. при нажатии на ссылку вообще ничего не происходит. Однако, если убрать у селектора id="select", то скрипт работает, но контент из "form1" перестает показываться по умолчанию, т.е. после загрузки страницы там где должен быть контент - ничего нет, и только после выбора пункта в селекторе и нажатии на ссылку он появляется. Нужно что бы изначально загружался контент именно из "form1" как это было прописано в первоначальном варианте скрипта, а при выборе пункта из списка и нажатии на ссылку, он обновлялся.

Может где-то есть ошибка?

MasterDmx · #6 (**permalink**) 16.02.2013, 20:05

Сообщение от рони

MasterDmx,
Вариант ...

<!DOCTYPE HTML>

<html>

<head>
<meta charset="utf-8" />
  <title></title>
</head>

<body>
<form name="form3">
   <select id="select" class="stat_sel" size="3">
    <option selected value="form1">Потребительский кредит</option>
    <option value="form2">Автокредит</option>
    <option value="form3">Ипотека</option>
    <option value="form4">Экспресс кредит</option>
    <option value="form5">Микрозайм</option>
    <option value="form6">Кредитная карта</option>
   </select>

<a id="toggle" title="Продолжить" style="cursor:pointer; font-weight:bold; text-align:right;display:block;" onclick='toggle();'>Далее</a>

  </form>
<script type='text/javascript'>
   function toggle() {
     var c = document.getElementById("select");
     var id = c.value
    alert(id);
   // document.getElementById("conten").innerHTML = document.getElementById(id).innerHTML;
  }
</script>

</body>

</html>

В вашем варианте после выбора пункта из списка и нажатия на ссылку всплывает непонятное окно, в котором выводится value пунка, при этом контент все равно не обновляется

Deff · #7 (**permalink**) 16.02.2013, 20:15

Сообщение от MasterDmx

В вашем варианте после выбора пункта из списка и нажатия на ссылку всплывает непонятное окно, в котором выводится value пунка, при этом контент все равно не обновляется

Уберите alert(id); и косые слеши для теста //

MasterDmx · #8 (**permalink**) 17.02.2013, 07:32

Сообщение от Deff

Уберите alert(id); и косые слеши для теста //

Огромное вам спасибо!!! Все работает как надо. Очень благодарен.

Форум

Справочник

Discord чат

Курсы javascript