Как передать пользовательский ввод формы функции, которая запускается при отправке формы, и создать файл cookie с именем ввода пользователя?

Question

Приведенный ниже код успешно создает cookie со строковым значением 'XinputX'.Однако я ищу, чтобы это было значением ввода пользователя.

Мне также нужно перейти на другую страницу с тем же кликом, куда бы я поместил это действие, если onSubmit уже используется для установки cookie?

function createCookie(name, value, days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    var expires = "; expires=" + date.toGMTString();
  } else var expires = "";
  document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

function eraseCookie(name) {
  createCookie(name, "", -1);
}

<div class="container-fluid">
  <div class="row">

    <div class="d-flex mx-auto mt-5 mb-5">
      Hello and welcome to the quiz.
    </div>

  </div>

  <div class="row">
    <div class="d-flex mx-auto mb-5">

      <form onsubmit="createCookie('first_cookie','XinputX',7)">

        Enter name:
        <input type="text">

        <input type="submit">

      </form>

    </div>
  </div>
  <div class="row">
    <div class="col-12 col-sm-6 mx-auto">

      <button type="button" id="nextQuestion" class="btn btn-primary d-flex mx-auto mt-2">Lets go!</button>

    </div>
  </div>
</div>

Answer 1

1. «пойти куда-то еще» можно сделать, добавив действие или скрипт.
2. Вам необходимо отменить отправку, если вы не хотите использовать действие

Я заменил код куки на console.log, потому что SO не позволяет устанавливать куки.Просто удалите // когда вы загружаете

Я также назвал поле и дал форме идентификатор

function createCookie(name, value, days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    var expires = "; expires=" + date.toGMTString();
  } else var expires = "";
  // document.cookie = name + "=" + value + expires + "; path=/";
  console.log("cookie",name + "=" + value + expires + "; path=/")
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
}

function eraseCookie(name) {
  createCookie(name, "", -1);
}

window.addEventListener("load", function() {
  document.getElementById("myForm").addEventListener("submit", function(e) {
    e.preventDefault(); // stop submission, remove this if you add an action to the form
    createCookie('first_cookie', this.textField.value,7);
    // if you do not want to use the action attribute of the form you can do this:
    // window.location="somewhereelse.html"; 
  });
});

<div class="container-fluid">
  <div class="row">
    <div class="d-flex mx-auto mt-5 mb-5">
      Hello and welcome to the quiz.
    </div>
  </div>
  <div class="row">
    <div class="d-flex mx-auto mb-5">
      <form id="myForm">
        Enter name:
        <input name="textField" type="text">
        <input type="submit">
      </form>
    </div>
  </div>
  <div class="row">
    <div class="col-12 col-sm-6 mx-auto">
      <button type="button" id="nextQuestion" class="btn btn-primary d-flex mx-auto mt-2">Lets go!</button>
    </div>
  </div>
</div>