Хранить данные таблицы с использованием localstorage и передать ее в форму

Сейчас я пытаюсь использовать API-интерфейс HTML5 для хранения значения из таблицы и передать это значение в форму.Хранить данные таблицы с использованием localstorage и передать ее в форму

Например, когда пользователь нажимает кнопку «Зарегистрироваться сегодня» в этой форме: http://yft.ac/upcoming-workshops/, я хочу получить информацию из данной строки (дата, время, местоположение), а также заголовок над ним (например: YFT Admissions Insights), которые затем сохраняются, а затем отображаются в поле «Workshop Interest In» на этой странице: http://yft.ac/contact-us/.

Я действительно не самый лучший с JavaScript, но вот то, что я до сих пор:

Обратная связь:

$('input#workshop').text(localStorage.getItem('workshop'));

Предстоящие семинары Страница:

$('body').on('click', 'a.button', function(){ 
    var index = $(this).parents('table').index('table'); 
    var cur_workshop = $(this).parents('.innercontent').find('h3').eq(index).text(); 
    localStorage.setItem('workshop', cur_workshop); 
});

Я просто попытался собрать это вместе, поэтому приведенный выше код не работает, но я надеюсь, что это хороший jum p для кого-то, кто может быть более хорошо разбирающимся в JavaScript.

источник

2013-09-04 Keenan Payne

У вас мало проблем на странице.

библиотека Модернизатор не включена - вы используете Modernizr.localstorage в коде
localStorage.setItem('workshop', cur_workshop); код добавляется перед библиотекой JQuery добавляется к странице - поскольку этот код используется JQuery переместить его после включения JQuery
Посмотрите, как где-то/WordPress звонит jQuery.noConflict() - так $ не относится JQuery больше, так что используйте jQuery вместо $ в коде

источник

2013-09-04 00:32:25

Хорошо, поэтому Modernizr включен в этот файл JavaScript: http://yft.ac/wp-content/themes/yft/js/custom.js?ver=1.2.1, но я удалил Modernizr проверьте только для простоты. Кроме того, я убедился, что мой собственный JavaScript размещен после включения jQuery. –

@KeenanPayne снова вы используете '$', используйте 'jQuery' вместо jQuery (function ($) { $ ('body'). On ('click', 'a.button', function() { var index = $ (this) .parents ('table'). index ('table'); var cur_workshop = $ (this) .parents ('. innercontent'). find ('h3'). eq (index) .text(); localStorage.setItem ('workshop', cur_workshop); }); }) ' –

Спасибо за помощь, я получил ее работу (вроде). Итак, теперь, если вы перейдете на http://yft.ac/upcoming-workshops/, он переносит информацию в поле ввода. Вы также можете увидеть код моего кода до конца тега ''. Моя последняя проблема заключается в том, как бы я передал информацию из соответствующей строки таблицы '', что кнопка сидит? Таким образом, при каждом нажатии кнопки информация из этой строки кнопок переносится. (если это имеет смысл) –

Некоторые быстрые мысли. Я считаю, что ваш код localStorage должен работать ... Но я думаю, что может произойти, браузер загружает страницу контакта, прежде чем хранить значения в localStorage. Что вы можете сделать, это удалить гиперссылку и привязать обработчик кликов к div, span или просто к элементу кнопки. В обработчике событий клика используйте window.location = "xyz"; после установки значения localStorage.

Опять же, это может быть не реальный ответ .. но попробуйте элемент без гиперссылки и посмотрите. Вы также можете выполнить e.preventDefault; затем сохраните значение, а затем выполните операцию window.location. Это своего рода прогрессивный способ улучшения.

Что касается localStorage, я бы рекомендовал вам попробовать сохранить значения в объекте JSON вместо нескольких элементов.

localStorage.setItem ("workshop", JSON.stringify ({'date': '9/2/2012', 'time': '8:30 AM', 'Princeton, NJ'}));

var workshop = JSON.parse (localStorage.getItem ("workshop"));

надеюсь, что это поможет!

источник

2013-09-04 01:02:17

Хранить данные таблицы с использованием localstorage и передать ее в форму

ответ

Смежные вопросы