Форма ввода + JS [как сохранить и отобразить данные введенные через форму]

Обсуждения
1

Как решить задачу?
On the main page there is a form with a name entry field and a “Hello” button. When you click on the button, if the name first appears, display “Hello, <Name + Surname>” or “Hello, " (of your choice). name”.

There should also be a link on the main page, when you click on it you need to show a list of everyone you have already greeted.

2

А какие ограничения к задаче? Например, нужно ли использовать конккретные технологии (php на бекенде, базу данных). Или нужно написать что-то что будет просто удовлетворять условиям?

Если второй вариант, то задача решается через хранение данных в localStorage.

Вопрос очень пространственный чтобы дать на него ответ который тебе поможет. Попробуй сузить вопрос до момента который тебе не понятен.

3

Ограничений никаких особо нету, саму реализацию пытаюсь сделать. Считывания значений input в массив, проверка есть ли имя, есть => “уже виделись”, нету => Привет, “имя”

  • кнопка вывода всего массива.
    Но как ни кручу, не получается :)
4

Покажи, что уже есть.

1 лайк
5

Пока так

<!DOCTYPE HTML>
<html>
<head>
    <title>Checklist</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script>
    $(function() {
      var input = $(":text");
      var button = $("button");
      var output = $("output");
      var pre = output.find("pre").css({padding:"10px", "background":"#eee"});
      var arr = [];
      button.click(function() {
        arr.push(input.val());
        input.val("");
        //window.open("data:application/octet-stream," + JSON.stringify(arr));
        output.find("pre").text(JSON.stringify(arr))
      })
    })
    </script>
</head>
<body>  

    <input type="text" id="item" name="save" placeholder="Enter an item">
    <button id="add">Add Item</button>
    <br>
    <output><pre></pre></output>
</body>
</html>
1 лайк
6

Я буду ориентироваться на решение через localStorage.

Тебе нужно написать логику сохранения в localStorage по таким шагам.

// достать строку из localStorage
	// учесть граничный случай когда строки нет
// распарсить в объект (смотри на JSON.parse)
// изменить объект, добавив новый элемент с веденными данными
// превратить объект в строку (смотри на JSON.stringify)
// положить измененную строку в localStorage

Вывод значения из localStorage на половину такой же как и изменение значения (достать строку, распарсить).

1 лайк
7

Благодарю! попробую сделать

8

Ну окей, отображение списка вроде бы работает.
В чем именно проблема? Спрятать список под ссылку? Показать "Hello " по клику?

1 лайк
9

Да, почти.
При нажатии кнопки: Привет, {user} (если этого значения нет в списке).
Либо же: Привет, уже виделись. (если он там есть).
И отдельная ссылка которая показывает всех user-ов.
В этом проблема

10

Смотри, у тебя есть массив var arr = [];, в котором хранится список имен.
Можно использовать find чтобы определить, есть уже имя в массиве или нет, после этого показать сообщение в зависимости от результата.
Немного непонятно, чего именно хотят от ссылки. Просто список на той же странице (тогда можно просто навешивать display:none/block; на твой <output>)? Или открыть отдельное окно (что, вероятно, имеет смысл, раз это ссылка) или всплывающее окно?

11

На главной странице, (все на одной) должен быть список всех, кому отправилось сообщение “Привет, {user}”,
можно в ссылку, можно в кнопку

12

Тогда можно просто всё выводить в блок, как у тебя и сделано, а по нажатию на кнопку показывать/прятать его с помощью стилей. 🤷‍♂️

1 лайк
13

Добрый день, а значение не выводится, потому что оно сохранено в массив?
Вот так сейчас:

<!DOCTYPE html>
<html>
<head>
    <script>
    arr = []
    alreadySeen = []
function actionSave() {
    var input = document.getElementById("uname");
    arr.push(input.value);
    input.value = "";
}

function show() {
    var inpVal = document.getElementById('uname').value;
    alert(inpVal);
}

function showDisplay() {
    document.getElementById("arr").innerHTML = arr.join(", ");  
}


    </script>
</head>
<body>
<form>
    <div>
      <label form="special">Choose a username: </label>
      <input type="text" id="uname">
      <button onclick="actionSave(); show();" type="button">Save me!</button>
      <button onclick="showDisplay();" type="button">Show me!</button>
    </div>
  </form>
  <div id="arr"></div>
</body>
</html>

Но работает, если напишу alert("Hello, " + arr[length -1]);

14

В 10 строке ты очищаешь содержимое поля input.value = "";
А в 14 пытаешься опять его прочитать var inpVal = document.getElementById('uname').value;

1 лайк
15

Извиняюсь что так часто задаю вопросы(новичек), пробую сам, затем пишу уже.
Можно ли при проверке прировнять значение количеству этих значений?
Пробую так (find и другие методы не работают).

<!DOCTYPE html>
<html>
<head>
    <script>
    arr = []
    alreadySeen = []
function actionSave() {
    var input = document.getElementById("uname");
    arr.push(input.value);
    show();
}

function show() {
    var inpVal = document.getElementById('uname').value;
    if (arr.includes(inpVal)) {
        alert("Привет, " + inpVal);
} else if (arr.includes(inpVal) > 2){
    alert("Уже виделись, " + inpVal);
}
}

function showDisplay() {
    document.getElementById("arr").innerHTML = arr.join(", ");  
}


    </script>
</head>
<body>
<form>
    <div>
      <label form="special">Choose a username: </label>
      <input type="text" id="uname">
      <button onclick="actionSave();" type="button">Save me!</button>
      <button onclick="showDisplay();" type="button">Show me!</button>
    </div>
  </form>
  <div id="arr"></div>
</body>
</html>
16

Нет, так не получится, includes возвращает только true или false.

У тебя там проблема с порядком действий: сначала ты вынимаешь значение из инпута, потом сохраняешь его в массив, а только потом проверяешь, есть оно в массиве или нет (а оно всегда есть, потому что ты его всегда сохраняешь)

    var input = document.getElementById("uname");
    arr.push(input.value);

Попробуй следующий порядок:

  • вынуть значение из инпута и сохранить в переменную
  • проверить, есть ли значение в списке и показать сообщение
  • добавить значение в массив, если его там еще нет
  • очистить инпут

Помни также, что это может быть не просто show(), который вынимает из инпута и показывает, а, например show(currentName). Тогда ему вообще ничего не нужно знать о том, откуда это значение берется.

Извиняюсь что так часто задаю вопросы

Да ради бога, мы тут для того и сидим :D

1 лайк
17

Я сделал!))))
Спасибо, вам огромное!)
показываю рабочий вариант:

<!DOCTYPE html>
<html>
<head>
    <script>
var arr = []


function actionSave(){
    var input = document.getElementById("uname").value;
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] === input) {
            return alert("Уже, виделись " + input);
        }
    }  alert("Привет, " + input); 
    return  arr.push(input);
}



function showDisplay() {
    document.getElementById("arr").innerHTML = arr.join(", ");  
}


    </script>
</head>
<body>
<form>
    <div>
      <label form="special">Choose a username: </label>
      <input type="text" id="uname">
      <button onclick="actionSave();" type="button">Save me!</button>
      <button onclick="showDisplay();" type="button">Show me!</button>
    </div>
  </form>
  <div id="arr"></div>
</body>
</html>
1 лайк