Вывести данные из формы JS

305

05 апреля 2018, 10:58

Суть такова: в человек вводит данные 1, 2, 3, ф потом мы это выводим на странице html. Проблема в том, что я не могу вывести данные, так как они почти сразу пропадают.

Вот JS-код:

function say_hi() {
  var a = document.getElementById('a').value;
  var b = document.getElementById('b').value;
  var c = document.getElementById('c').value;
  var d = document.getElementById('d').value;
  var e = document.getElementById('e').value;
  var f = document.getElementById('f').value;
  var g = document.getElementById('g').value;
  var h = document.getElementById('h').value;
  var i = document.getElementById('i').value;
  var j = document.getElementById('j').value;
  var k = document.getElementById('k').value;
  var html = 'Hello <b>' + a + '</b> ' + b;
  document.getElementById('result').innerHTML = html;
}
document.getElementById('slap').addEventListener('click', say_hi);

Вот HTML-код:

<form class="form">
              <div class="form-group">
                <label>Текст</label>
                <input id="a" class="form-control" placeholder="Текст">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                <label>Текст</label>
                <input id="b" class="form-control" placeholder="Текст">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                <label>Текст</label>
                <input id="c" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                <label>Текст</label>
                <input id="d" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                <label>Текст</label>
                <input id="e" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                <label>Текст</label>
                <input id="f" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                <label>Текст</label>
                <input id="g" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                <label>Текст</label>
                <input id="h" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                <label>Текст</label>
                <input id="i" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                <label>Текст</label>
                <input id="j" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                <label>Текст</label>
                <input id="k" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
                 <div class="row">
                <hr>
                  <div id="result"></div>
                <hr>
              </div>
              <button id="slap" type="submit" class="btn btn-outline-primary btn-lg">Рассчитать</button>
            </form>

Что делать?

Answer 1

function say_hi(e) {
    e.preventDefault();
    /* ... */
}

Answer 2

<button id="slap" type="button" ...

Answer 3

В конце функции надо поставить return false;.

Answer 4

function say_hi(e) { 
  e.preventDefault(); 
   
  var a = document.getElementById('a').value; 
  var b = document.getElementById('b').value; 
  var c = document.getElementById('c').value; 
  var d = document.getElementById('d').value; 
  var e = document.getElementById('e').value; 
  var f = document.getElementById('f').value; 
  var g = document.getElementById('g').value; 
  var h = document.getElementById('h').value; 
  var i = document.getElementById('i').value; 
  var j = document.getElementById('j').value; 
  var k = document.getElementById('k').value; 
 
  var html = 'Hello <b>' + a + '</b> ' + b; 
 
  document.getElementById('result').innerHTML = html; 
} 
document.getElementById('f1').addEventListener('submit', say_hi);

<form id="f1" class="form"> 
              <div class="form-group"> 
                <label>Текст</label> 
                <input id="a" class="form-control" placeholder="Текст"> 
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
              </div> 
              <div class="form-group"> 
                <label>Текст</label> 
                <input id="b" class="form-control" placeholder="Текст"> 
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
              </div> 
              <div class="form-group"> 
                <label>Текст</label> 
                <input id="c" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст"> 
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
              </div> 
              <div class="form-group"> 
                <label>Текст</label> 
                <input id="d" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст"> 
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
              </div> 
              <div class="form-group"> 
                <label>Текст</label> 
                <input id="e" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст"> 
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
              </div> 
              <div class="form-group"> 
                <label>Текст</label> 
                <input id="f" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст"> 
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
              </div> 
              <div class="form-group"> 
                <label>Текст</label> 
                <input id="g" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст"> 
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
              </div> 
              <div class="form-group"> 
                <label>Текст</label> 
                <input id="h" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст"> 
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
              </div> 
              <div class="form-group"> 
                <label>Текст</label> 
                <input id="i" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст"> 
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
              </div> 
              <div class="form-group"> 
                <label>Текст</label> 
                <input id="j" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст"> 
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
              </div> 
              <div class="form-group"> 
                <label>Текст</label> 
                <input id="k" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Текст"> 
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> 
              </div> 
                 <div class="row"> 
                <hr> 
                  <div id="result"></div> 
                <hr> 
              </div> 
              <button type="submit" class="btn btn-outline-primary btn-lg">Рассчитать</button> 
            </form>

Answer 5

перенести навешивание обработчика на onload, если скрипт стоит до формы :

<body onload="document.getElementById('slap').addEventListener('click', say_hi);">

!!!

и как указано, заменить type на button или вставить preventDefault

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Всплывающая форма при клике на элемент. HTML

Как сделать, чтобы при клике на блок около него всплывала форма(что-то вроде подсказки)Вот пример:

229

HTML

Transposh плагин WP. Исчезают флажки языков при загрузке страниц в мобильной версии сайта

Столкнулся с проблемой отображения языковых флажков в шапке сайте темы Aurum версии 29

224

HTML

Помогите сделать сложную кнопку

Есть SVG файл с дизайном кнопки - https://yadisk/d/ueGSqTix3U4tjc

252

HTML

feature detection в верстке

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

216