How to copy (drop down) field options in a form with Chrome or Firefox

Today, I was supposed to rebuild a form for a client of mine. Upon looking at this form which never seemed to end, I sighed. A few fields were drop down fields, with quite a few options in them. Did I really have to copy them by hand? Maybe if I tried something clever, I could save some time!

And sure enough, there is a way to easily copy and paste all options from a  drop down field in a form. Here’s how it can be done.

Instructions

Before we get started, you need to make sure that you’ve got one of the following setups installed on your computer:

  • Option 1: Google Chrome.
  • Option 2: Firefox with Firebug.

If you’re somewhat of a developer you’ll have either or both installed, so this should be no problem.

How it is done.

Using either Google Chrome’s “Inspect Element” option, or Firebug, do the following:

Select the form field which you want to “copy”

Using either the “Inspect Element” option in Google Chrome, or Firebug, select the field for which you want to copy the options.

Select the relevant HTML code

media_1341928812408.png

Firebug or Chrome’s “Inspect Element” view will already have highlighted the relevant HTML code  for you. Pretty easy, right? Right-click the code.

Select the html for this field

media_1341928978497.png

After right-clicking, choose the “Copy HTML” option (or, in Google Chrome “Copy as HTML). The text might be slightly different in your browser (it being not Dutch etcetera).

Paste the content somewhere

Paste the content somewhere. You’ll see something that looks like this in your editor:

258px;” id=”hed60_34″ name=”hed60[]” class=”jflist”>
——— selecteer ———
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
<option>Option Four</option>
<option>Option Five</option>
</select>

You’re done!

You can now use the text above to grab the options if you remove the unneccesary tags. Using “Replace” and searching for and to replace it with nothing did the trick for me, and allowed me to add these options to Chronoforms rapidly!

I hope this trick is useful to you, and saves you some time when rebuilding those super long, extremely complicated web forms you’re dealing with! 😉

Advertisements