Рекомендуемый способ получения пользовательского ввода в расширении Chrome?

У меня есть страница настроек в моем расширении Chrome, и мне интересно, каков рекомендуемый («лучший») способ получения пользовательского ввода. В моем конкретном случае мне нужно представить набор комбинированных вариантов вместе с кнопкой. При нажатии кнопки должна выполняться функция javascript. Насколько я понимаю, если я использую , это отправит запрос, который мне не нужен (это приводит к тому, что страница мигает и перезагружается). Я хочу, чтобы все это было на стороне клиента. Вот что у меня есть на данный момент (ниже). Как это можно изменить? Заранее спасибо.

<form>
    <input type="radio" name="format" value="format1"/>(xxx) xxx-xxxx<br/>
    <input type="radio" name="format" value="format2"/>xxx-xxx-xxxx<br/>
    <input type="radio" name="format" value="format3"/>xxx.xxx.xxxx<br/>
    <input type="submit" value="Convert"/>
</form>

google-chrome html google-chrome-extension
person void.pointer    schedule 08.02.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Боб, ну, ты можешь делать все в JavaScript. А поскольку это расширение Chrome, не стесняйтесь использовать только HTML5.

<section>
  <input type="radio" name="format" value="format1"/>(xxx) xxx-xxxx<br/>
  <input type="radio" name="format" value="format2"/>xxx-xxx-xxxx<br/>
  <input type="radio" name="format" value="format3"/>xxx.xxx.xxxx<br/>
  <button id="btnConvert">Convert</button>
  <script>
  document.querySelector('#btnConvert').addEventListener('click', function(e) {
    var format = document.querySelector('input[type="radio"]:checked');
    alert( format.value);
  }, false);
  </script>
</section>

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

person Mohamed Mansour    schedule 08.02.2011
comment
Еще раз спасибо за более отличную помощь, Мохамед :) На самом деле я еще не знаком с HTML5 (я новичок в веб-разработке). Все, что я могу вам сказать, это то, что до этого момента я использовал/изучал jQuery для всего. Для обратных вызовов кнопок я использовал атрибут onclick=callback() в своем элементе кнопки. - person void.pointer; 08.02.2011
comment
Кажется, у вас сработало, но мне пришлось взять JS в элементе <script> и добавить его в DOMContentLoaded, что в любом случае является более изящным решением. Не уверен, что проблема была связана с какими-то правилами безопасности JS для расширений Chrome. или что, но просто предупреждение, если это не работает для кого-то еще, кто читает это - person Louis Maddox; 25.05.2014