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

Как решить задачу?
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.

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

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


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

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

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

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

1 лайк

Пока так

<!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 лайк

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

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

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

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

1 лайк

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

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

1 лайк

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

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

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

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

1 лайк

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

<!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]);

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

1 лайк

Извиняюсь что так часто задаю вопросы(новичек), пробую сам, затем пишу уже.
Можно ли при проверке прировнять значение количеству этих значений?
Пробую так (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>

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

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

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

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

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

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

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

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

1 лайк

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

<!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 лайк