2

I have a settings page in my Chrome extension and I am wondering what is the recommended ("best") way of obtaining user input. In my particular case, I need to present a set of combo choices along with a button. When the button is clicked, a javascript function should be executed. My understanding is that if I use a , this will post a request which I don't want (it causes the page to flash & reload). I want all of this to be client-side. Here is what I have so far (below). How can this be changed? Thanks in advance.

<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>
void.pointer
  • 24,859
  • 31
  • 132
  • 243

1 Answers1

1

Bob, well, you can do everything in JavaScript. And since this is a Chrome Extension, feel free to use just 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>

Hope that helps!

Mohamed Mansour
  • 39,445
  • 10
  • 116
  • 90
  • 1
    Thanks yet again for more excellent help Mohamed :) I actually am not familiar with HTML5 yet (I'm a newbie to web development). All I can tell you is that I've been using/learning jQuery for everything up to this point. For button callbacks, I've been using onclick="callback()" attribute in my button element. – void.pointer Feb 08 '11 at 17:07
  • Seems to have worked for you, but I had to take the JS in the ` – Louis Maddox May 24 '14 at 22:30