Как получить ссылочный номер (форму ссылки), чтобы автоматически заполнить часть формы в другой HTML-странице, используя JavaScript - PullRequest
Новая
       14

Как получить ссылочный номер (форму ссылки), чтобы автоматически заполнить часть формы в другой HTML-странице, используя JavaScript

1 голос
/ 22 мая 2019

с использованием локального хранилища и onclick с использованием javascript

У меня есть HTML-файл с 2 описаниями заданий:

HTML-файл 1 

<li><Job Reference Number: wru01</li>
<li><Job Reference Number: wru01</li>

Мне нужно создатьссылка (с использованием javascript), которая при нажатии на каждое описание вакансии автоматически заполняет форму, в которой необходимо ввести описание работы (эта форма находится на другой html-странице)

html файл 2: 

<legend>Job Application Information: </legend>
<label> Job Reference Number: </label>
<input id="refnumber" type="text" name="refnumber" required="required" />

, так что в основном мне это нужно, чтобы, когда и в зависимости от того, по какому номеру задания щелкнули по wru01 или wru02, он автоматически заполняет номер задания в форме на следующей странице, используя локальное хранилище.

Iуже пробовал этот

js файл 1 

function onclick1() {

  var anchor = document.getElementById('link');

  anchor.addEventListener('click', function(event) {
    event.preventDefault();

    const jobCode = event.target.getAttribute('data-job');

    localStorage.setItem('job-code', jobCode);

    //need redirect user to apply page
    //console.log(event.target)
    window.location = event.target.getAttribute('href');

  })
}


function onclick2() {


  var anchor = document.getElementById('link2');


  anchor.addEventListener('click', function(event) {
    event.preventDefault();

    const jobCode = event.target.getAttribute('data-job');

    localStorage.setItem('job-code', jobCode);

    //need redirect user to apply page
    //console.log(event.target)
    window.location = event.target.getAttribute('href');

  })
}

function init() {

  document.getElementById("link").onclick = function() {
    onclick1()
  };
  document.getElementById("link2").onclick = function() {
    onclick2()
  }
  window.onload = init;
}

js файл 2 

function LoadJobCode() {
  var code = localStorage.getItem('job-code');

  if (code) {
    var input = document.getElementById('refnumber');
    // disable text being entered
    input.value = code;
    input.disabled = true;
  }

}

1 Ответ

1 голос
/ 22 мая 2019

Извините, это не очень хорошая идея. Я думаю, вы можете использовать setTimeout для решения проблемы. Вот мой код: 

function onclick1() {
     var anchor = document.getElementById('link');
     anchor.addEventListener('click', function (event) {
            event.preventDefault();
            const jobCode = event.target.getAttribute('data-job');
            console.log(jobCode)
            localStorage.setItem('job-code', jobCode);
            setTimeout(() => {
                window.location.href = event.target.getAttribute('href');
            },1000)

     })
 }

почему я это сделал? Для того, чтобы сохранить данные (data-job) перед входом на другую HTML-страницу, убедитесь, что вы можете использовать async/await, например: 

function onclick1() {
        var anchor = document.getElementById('link');
        anchor.addEventListener('click', function (event) {
            event.preventDefault();
            const jobCode = event.target.getAttribute('data-job');
            console.log(jobCode)
            localStorage.setItem('job-code', jobCode);
            async function locate() {
                await new Promise(() => {
                    window.location.href = event.target.getAttribute('href');
                })
            }
            locate();
        })
    }
...