'Add More' form fields with javascript / jquery

A few years ago I wrote a post on how to add more fields without reloading the page using javascript, but that method was kind of clunky and involved a hack to get it to work with the DOM.  The following is a much easier way, and (as far as I've tested) compatible with all major browsers.

First off, download the latest version of jquery and include it on your page, or just include the following line if you trust google to host your jquery file:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Here's a sample html form – adjust according to your needs:

<form action='mypage' method='post' accept-charset='utf-8'>    
 <ul id='myfields'>
  <li>
   <input type='text' name='mytextfield[]' /> 
  </li>
 </ul>
 <div id='addmorelink'>
  <a href='javascript:addField()'>add more</a>   
 </div>
</form>

What's important is the ul with the 'myfields' id, and the link that calls the 'addField()' js function.

The javascript code is very short and straightforward – basically copy your list item with the form field code into the content of the 'newContent' variable, make sure you escape quotes if you enclose the string with the same quotes as in your form field, and then use the jquery 'append' function to add the next field to your form, et voila, that's it!

<script type="text/javascript"> 
 function addField(){
  var newContent = "<li><input type='text' name='mytextfield[]'/></li>";
  $("#myfields").append(newContent); 
 }
</script>

I haven't mentioned one last piece that's going to come in handy on the server side where you're going to process the fields.  You probably noticed the [] brackets behind the field name in the form – that turns the field into an array.  On the server side, depending on what programming language you use, you just need to handle your post variable as an array – so to retrieve each value you'll need to loop through the array.  Assuming you're programming in php and you're not using a framework that handles post variables differently:

<?php
 if(isset($_POST['mytextfield'] &amp;&amp;  is_array($_POST['mytextfield']){
  foreach($_POST['mytextfield'] as $value){ 
   // do something with each $value 
  }
 } 
?>

[SOLVED] Ubuntu 11.10 Oneiric Ocelot upgrade: Waiting for Network Configuration

I upgraded my Ubuntu desktop yesterday from 10.04 to 11.10 and ran into some pretty significant problems.  If you get an error saying 'Waiting for Network Configuration', and it sits there until it finally goes on to a black page, then try the following:

CTRL+ALT+F1 should get you to the command line.  Do not try to get into the command line from the recovery option, or you will run into 'read only problems'.  From the command line, log in as root or a sudoer (your main user account should be in the group) and do the following things:

1. create directories /run and /run/lock,
2. move contents of /var/run into /run and /var/lock into /run/lock,
3. delete directories /var/run and /var/lock
4. create replacement simlinks; e.g. 'ln -s /run /var/run' and 'ln -s /run/lock /var/lock'

For less experienced users, you will need to type the following commands:

sudo mkdir /run
sudo mkdir /run/lock
sudo mv /var/run/* /run
sudo mv /var/lock/* /run/lock
sudo rm -rf /var/run
sudo rm -rf /var/lock
sudo rm -rf /run/dbus/*
ln -s /run /var/run
ln -s /run/lock /var/lock

After that reboot your computer:

sudo reboot

Ubuntu *should* now start up properly.