Based on Adding a parameter to the URL with JavaScript i tried to make a script that adds parameters to the existing URL but kinda failed and i don't know why...
<script type="javascript">
function insertParam(key, value)
{
key = encodeURI(key); value = encodeURI(value);
var kvp = document.location.search.substr(1).split('&');
var i=kvp.length; var x; while(i--)
{
x = kvp[i].split('=');
if (x[0]==key)
{
x[1] = value;
kvp[i] = x.join('=');
break;
}
}
if(i<0) {kvp[kvp.length] = [key,value].join('=');}
//this will reload the page, it's likely better to store this until finished
document.location.search = kvp.join('&');
}
</script>
<label>
<select name="id" onchange="window.location='somepage.php?page=inserari-note&selected_value='+this.value">
<option>--Alege user--</option>
<?php
while($runrows = mysql_fetch_assoc($run))
{
$user = $runrows ['user_login'];
echo"<option value=\"$user\">$user</option>";
}
?>
</select>
</label>
<label>
<select name="idelev" onchange="insertParam('selected_valueelev',+this.value)">
<option>--Alege Elev--</option>
<?php
while($runrows4 = mysql_fetch_assoc($run4))
{
$elev = $runrows4 ['Nume'];
echo"<option value=\"$elev\">$elev</option>";
}
?>
</select>
</label>
So the first select is populating the second select with students and also change the URL into somepage.php?page=inserari-note&selected_value='+this.value which works great but when i click on the options from the second select, nothing happens. In my opinion it should add at the existing URL which is the one i have mentioned before, the values &selected_valueelev="chosen-option" so that the URL should look like let's say somepage.php?page=inserari-note&selected_value=user&selected_valueelev=student. What am i doing wrong?
You should define script tag by the following:
<script type="text/javascript">
...
</script>
And also you have a syntax bug in the following:
// remove + before this.value
<select name="idelev" onchange="insertParam('selected_valueelev',+this.value)">
Related
I have coded a script with help from several stackoverflow examples but I get stuck when trying to go a bit further.
It seems very straightforward but I cannot seem to work it out.
So here it is:
I have coded an HTML script that initiates a dialogbox with some drop down menus. The data in the drop down menus is dynamic and taken from a range in a spreadsheet. I want for users to open the spreadsheet, run the script and choose the options from the drop down values. These drop down values will be pasted on the same spreadsheet.
The bit I got working is that the code sees the values that need to go in the drop down box, illustrates that and that there is a submit box.
However, I cannot seem to submit the values onto the spreadsheet. Please could anyone help me out or point me in the right direction?
test.gs
function openInputDialog1() {
var html = HtmlService.createHtmlOutputFromFile('Test').setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Add Item');
}
function getMenuListFromSheet() {
return SpreadsheetApp.getActive().getSheetByName('Part Names')
.getRange(1,5,6,1).getValues();
}
function getThicknessFromSheet(){
return SpreadsheetApp.getActive().getSheetByName('Part Names')
.getRange(1,5,6,1).getValues();
}
function itemadd(form) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName('Part Names');
var LastRow=sheet.getLastRow();
Logger.log(LastRow);
Logger.log(form);
sheet.getRange(LastRow+1,1,1,2).setValues(form);
return true;
}
Test.html
<!DOCTYPE html>
<html>
<p>List of parts:</p>
<select id="menu">
<option></option>
<option>Google Chrome</option>
<option>Firefox</option>
</select>
<select id="thickness">
<option></option>
<option>1</option>
<option>2</option>
</select>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<input type="submit" value="Submit" onclick="select()">
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showMenu)
.getMenuListFromSheet();
google.script.run.withSuccessHandler(showThickness)
.getThicknessFromSheet();
});
/**function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
**/
function showMenu(menuItems) {
var list = $('#menu');
list.find('option').remove(); // remove existing contents
for (var i = 0; i < menuItems.length; i++) {
list.append('<option>' + menuItems[i] + '</option>');
}
}
function showThickness(menuThickness) {
var list = $('#thickness');
list.find('option').remove(); // remove existing contents
for (var i = 0; i < menuThickness.length; i++) {
list.append('<option>' + menuThickness[i] + '</option>');
}
}
</script>
<script>
function select(){
var x = document.getElementById('menu').value;
var y = document.getElementById('thickness').value;
google.script.run
.itemadd(x,y)
google.script.host.close();
</script>
</html>
I know that I am somewhere not making the connection between the script and the HTML side but fail to understand where.
Thanks,
Tim
Here's the lacking bits from your code:
<input type="submit" value="Submit" onclick="sheetConnect()">
In your .HTML file:
function sheetConnect(){
var e = document.getElementById('menu'); //choices are Google Chrome and Firefox
var name = e.options[e.selectedIndex].value; //get whatever the user selected
google.script.run.writeData(name); //pass the value to Code.gs
}
In your Code.gs
function writeData(name){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName('Sheet1'); //whatever your sheet's name
var cell = sheet.getRange(1,8); //assign position to column H row 1
cell.setValue(name); // write selected data from Dropdown named 'menu'
}
result:
Use the knowledge here to complete your project :)
I haven't used gs before but from looking at other examples yours looks right, however, in the second line you have tml.Service instead of Html.Service, not sure if that will fix all your issues but that will break it.
I am reading a short text file on server into a PHP variable ($data), and first accessing the first 2 items in the array to display them.
Then when the user clicks one of the items (which also sends form data) I want to increment the PHP variable that specifies the array item ($counter).
Reading from the file seems to be easiest to do with PHP, but incrementing at click seems easier with Javascript - and I can't figure out a good way to forge the two. What is the best way to solve this? I am fairly new to both languages.
The php/html code for reading from file (working):
<?php
function getData($subtest_nr) {
$data = file("subtests/$subtest_nr.txt");
return $data;
}
$subtest_nr = "7";
$counter = 0;
$data = getData($subtest_nr); ?>
<form id="myform" method="post">
<div class="four_images">
<div class="flex-item">
<input type="radio" name="image" value="7.11" id="alt1" class="hidden">
<label for="alt1"><img src="images/<?php echo $data[$counter]; ?>"></label>
</div>
<div class="flex-item">
<input type="radio" name="image" value="7.12" id="alt2" class="hidden">
<label for="alt2"><img src="images/<?php echo $data[$counter+1] ?>"></label>
</div>
</div>
</form>
A quick attempt at incrementing variable in jQuery:
jQuery(function($) {
var counter = 0;
$("img").click(function(){
counter++;
$("p").text(counter);
});
});
So my question is if I should aim for either only PHP or Javascript/jQuery for both functionalities or if there is a way for me to merge the two?
Further to the comments, here's an approach that combines the font-end and the back-end into a single file.
The file makes use of the $_SERVER['PHP_SELF'] variable to find the name of the file that's executing. We use this to write the correct name of the backend php file to request into the javascript - this has the effect of allowing us to name the single-file solution anything we want and not worry about updating a hard-coded url somewhere in the source. (got a sore head yet? :p )
index.php
<?php
if ( isset($_GET['firstItem']) && isset($_GET['numItems']) )
{
$firstItem = $_GET['firstItem'];
$numItems = $_GET['numItems'];
// should do error checking here
$subtestNumber = 7;
$filename = sprintf("subtests/%d.txt", $subtestNumber);
// dummy, used for testing
$filename = 'sampleInput.txt';
$fileHandle = fopen($filename, "rt");
for ($numLinesToSkip=0; $numLinesToSkip<$firstItem; $numLinesToSkip++)
fgets($fileHandle);
$results = array();
for ($itemCount=0; $itemCount<$numItems; $itemCount++)
{
$curLine = fgets($fileHandle);
//
// you may wish to remove the trailing new-line character here
//
array_push($results, $curLine);
}
fclose($fileHandle);
echo json_encode($results);
die; // stop execution now - dont output the html below
}
?><!doctype html>
<html>
<head>
<script>
"use strict";
function newEl(tag){return document.createElement(tag)}
function byId(id){return document.getElementById(id)}
// useful for HtmlCollection, NodeList, String types
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need
function ajaxGet(url, onLoad, onError)
{
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){if (this.readyState==4 && this.status==200) onLoad(this);}
ajax.onerror = function() {error.log("ajax request failed to: "+url);onError(this);}
ajax.open("GET", url, true);
ajax.send();
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
byId('goBtn').addEventListener('click', onGoBtnClicked);
}
function onGoBtnClicked(evt)
{
var firstIndex = byId('firstRecordInput').value;
var numItems = byId('numRecordsInput').value;
// we want to request data from this same file, so get php to print it into the javascript source
var filename = '<?php echo $_SERVER['PHP_SELF'];?>';
// construct the url from the filename and the (GET) parameters we'd like to pass to the php
var url = filename + '?firstItem=' + firstIndex + '&numItems=' + numItems;
// ask for it, fire the onDataReceived function with the XMLHttpRequest object as the only input
ajaxGet(url, onDataReceived, function(){alert('ajax failed! :(');} )
}
/*
------------------------------------------------------------
format of html the onDataReceived function needs to create
- .four_images div just once for the whole response
- .flex-item once for each item returned
------------------------------------------------------------
<div class="four_images">
<div class="flex-item">
<input type="radio" name="image" value="7.11" id="alt1" class="hidden">
<label for="alt1"><img src="images/<?php echo $data[$counter]; ?>"></label>
</div>
<div class="flex-item">
<input type="radio" name="image" value="7.12" id="alt2" class="hidden">
<label for="alt2"><img src="images/<?php echo $data[$counter+1] ?>"></label>
</div>
</div>
*/
function onDataReceived(ajax)
{
// get the raw data - it'll be a string something like `["file1.txt\n","file2.swf\n"]`
var rawData = ajax.response;
// parse it and turn it from a string into some javascript objects.
// this has same the effect as typing the following into your source-code
//
// var parsedData = [ "file1.txt\n", "file2.swf\n" ];
//
// except, you can do it with unknown data. BUT: we must know the *format*
// of the data so we know what to do with it. We happen to know that
// the data will be an array
var parsedData = JSON.parse(rawData);
// make the outer wrapper - refer above for the structure of the created HTML
// this wrapper needs to exist so the makeItem function can append content
// to it in the forEach call
var div = newEl('div');
div.className = 'four_images';
// for each of the items in the parsedData array, call the makeItem function - once this forEach call is done,
// we have the contents of the form all sitting in the [div] element - the makeItem function is inside this onDataReceived function
// so that it can 'see' the [div] variable in order to append each item to it.
forEach(parsedData, makeItem);
// show the results
byId('myForm').innerHTML = '';
byId('myForm').appendChild(div);
// this function has now finished executing. the makeItem function exists here (unfortunately) so that
// the [div] element remains in scope.
// called with the current element in the collection as dataItem, it's index in the collection as index and the collection itself as arrayOfItems
// we're making use of the item's index to correctly set the id of the radio-button and then to make the label refer to it (which it doesn't actually
// need to do in this case, since the label element contains the input)
// another use of index is to place a comma between items i.e "1,2,3,4,5,6" - there are two approaches. The naive one is to place a comma after each
// item except the last one. To do this - we need to know how many items there are in total - sometimes this is very expensive to compute.
// the other approach, is to put a comma _before_ all items except the first one.
function makeItem(dataItem, index, arrayOfItems)
{
var itemDiv = newEl('div');
itemDiv.className = 'flex-item';
var input = newEl('input');
input.type = 'radio';
input.name = 'image';
input.value = 'putSomethingUsefulHere'; // **** the example had 7.11 and 7.12 here - I've no idea how they were determined ***
input.id = "alt" + (index+1);
input.className = 'hidden';
var label = newEl('label');
label.for = 'alt' + (index+1);
var img = newEl('img');
img.src = 'images/' + dataItem;
label.appendChild(img);
itemDiv.appendChild(input);
itemDiv.appendChild(label);
div.appendChild(itemDiv);
}
}
</script>
<style>
.panel
{
border: solid 1px black;
border-radius: 8px;
padding: 8px;
background-color: #eef;
display:inline-block;
}
</style>
</head>
<body>
<div class='panel'>
<label>Index of first record: <input type='number' id='firstRecordInput' value='0'/></label><br>
<label>Number of records: <input type='number' id='numRecordsInput' value='2'/></label>
<hr>
<div style='text-align: center'><button id='goBtn'>Retrieve records</button></div>
<hr>
<form id='myForm'>
</form>
</div>
</body>
</html>
Here's a rough example, sans error checking. I don't jQuery, so you'll need to convert this to make use of jQuery's ajax method. Can't tell what you're trying to achieve with each image click either, so you can edit that back in.
My primary aim, was to show a means by which the front-end can maintain state information and can use this to request to desired info from a (dumb) backend.
sampleInput.txt
file1.txt
file2.swf
file1.pdf
file1.exe
file1.asm
getItems.php
<?php
$firstItem = $_GET['firstItem'];
$numItems = $_GET['numItems'];
// should do error checking here
$subtestNumber = 7;
$filename = sprintf("subtests/%d.txt", $subtestNumber);
// dummy, used for testing
$filename = 'sampleInput.txt';
$fileHandle = fopen($filename, "rt");
for ($numLinesToSkip=0; $numLinesToSkip<$firstItem; $numLinesToSkip++)
fgets($fileHandle);
$results = array();
for ($itemCount=0; $itemCount<$numItems; $itemCount++)
{
$curLine = fgets($fileHandle);
//
// you may wish to remove the trailing new-line character here
//
array_push($results, $curLine);
}
fclose($fileHandle);
echo json_encode($results);
?>
getStuff.html
<!doctype html>
<html>
<head>
<script>
"use strict";
function newEl(tag){return document.createElement(tag)}
function byId(id){return document.getElementById(id)}
// useful for HtmlCollection, NodeList, String types
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need
function ajaxGet(url, onLoad, onError)
{
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){if (this.readyState==4 && this.status==200) onLoad(this);}
ajax.onerror = function() {error.log("ajax request failed to: "+url);onError(this);}
ajax.open("GET", url, true);
ajax.send();
}
/////////////////////
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
byId('goBtn').addEventListener('click', onGoBtnClicked);
}
function onGoBtnClicked(evt)
{
var firstIndex = byId('firstRecordInput').value;
var numItems = byId('numRecordsInput').value;
var url = 'getItems.php?firstItem=' + firstIndex + '&numItems=' + numItems;
ajaxGet(url, onDataReceived, function(){alert('ajax failed! :(');} )
}
/*
<div class="four_images">
<div class="flex-item">
<input type="radio" name="image" value="7.11" id="alt1" class="hidden">
<label for="alt1"><img src="images/<?php echo $data[$counter]; ?>"></label>
</div>
<div class="flex-item">
<input type="radio" name="image" value="7.12" id="alt2" class="hidden">
<label for="alt2"><img src="images/<?php echo $data[$counter+1] ?>"></label>
</div>
</div>
*/
function onDataReceived(ajax)
{
var rawData = ajax.response;
var parsedData = JSON.parse(rawData);
var div = newEl('div');
div.className = 'four_images';
forEach(parsedData, makeItem);
byId('myForm').innerHTML = '';
byId('myForm').appendChild(div);
function makeItem(dataItem, index, arrayOfItems)
{
var itemDiv = newEl('div');
itemDiv.className = 'flex-item';
var input = newEl('input');
input.type = 'radio';
input.name = 'image';
input.value = 'putSomethingUsefulHere';
input.id = "alt" + (index+1);
input.className = 'hidden';
var label = newEl('label');
label.for = 'alt' + (index+1);
var img = newEl('img');
img.src = 'images/' + dataItem;
label.appendChild(img);
itemDiv.appendChild(input);
itemDiv.appendChild(label);
div.appendChild(itemDiv);
}
}
</script>
<style>
.panel
{
border: solid 1px black;
border-radius: 8px;
padding: 8px;
background-color: #eef;
display:inline-block;
}
</style>
</head>
<body>
<div class='panel'>
<label>Index of first record: <input type='number' id='firstRecordInput' value='0'/></label><br>
<label>Number of records: <input type='number' id='numRecordsInput' value='2'/></label>
<hr>
<div style='text-align: center'><button id='goBtn'>Submit</button></div>
<hr>
<form id='myForm'>
</form>
</div>
</body>
</html>
I guess the data you got is ajax data. So need to be $(document).on(...
var counter = 0;
$(document).on('click','img', function(){
counter++;
$("p").text(counter);
});
Ok this is a bit complicated. Basically I populate a select with an array. Then, I want to create another select, and populate it with the same array again. I believe that the populate function is not called properly when a new select is created, but I cannot find when to call it, to populate the created select.
1st: I query my db to get some member names, and use json_encode my resulting array, to create a json array.
$result_array = Array();
while($stmt->fetch()) {
$result_array[] = $name;
}
$json_array = json_encode($result_array);
then I echo that array to a javascript array, and populate a select tag with the result. All this happens on window load.
<script>
var members = <?php echo $json_array; ?>;
function populate()
{
var sel = document.getElementById('members');
var fragment = document.createDocumentFragment();
members.forEach(function(member, index) {
var opt = document.createElement('option');
opt.innerHTML = member;
opt.value = member;
fragment.appendChild(opt);
});
sel.appendChild(fragment);
}
window.onload = populate;
</script>
The html div containing the select:
<div id="Members">
<select id="members"></select>
</div>
<input type="button" value="+" onClick="addInput('Members'); populate();">
and then I use another script to create more divs
<script>
var counter = 1;
var limit = 3;
function addInput(divName)
{
if (counter == limit)
{
var message = document.getElementById("linkLimit");
message.innerHTML = "Maximum amount of links reached";
}
else
{
var newdiv = document.createElement('div');
newdiv.innerHTML = "<select id='members'></select>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
However, the resulting selects are never actually populated. I believe that the populate function is not called properly, but I cannot find when to call it, to populate the created select.
Alternatively, for a static amount of select inputs, I tried doing
<div id="Members">
<select id="members" name="members"></select>
<select id="members1" name="members"></select>
<select id="members2" name="members"></select>
</div>
but again, only the first select is populated
By using a for loop and giving members, members1, members2 through an array, all three lists are populated, however, this is not so functional, since I can't know how many members the user will want to select
I am trying to build a search that uses multiple drop downs. The script for the search uses the values for the first drop down and the second drop down. It works correct for Acura and MDX, but if I choose RLX it still passes MDX to the search as the value.
I know I have so somehow set for the value for the appended option to be whatever array is chosen in the second drop down, but I have had no luck. I am new to javascript so for all I know there may be a way easier than this to accomplish my goal.
FORM FOR SUBMIT
<form name="searchform" onSubmit="return dosearch();">
Brand:
<select id="brands">
<option val="Acura">Acura</option>
<option val="Chrysler">Chrysler</option>
</select>
<select id="item">
</select>
<input type="submit" value="Submit">
</form>
SCRIPT FOR URL STARTING WITH A BASE URL
<script type="text/javascript">
function dosearch() {
var sf=document.searchform;
var baseUrl = 'http://www.spitzer.com/new-inventory/index.htm?';
location.href = baseUrl.concat('make='+ sf.brands.options[sf.brands.selectedIndex].value + '&&&&' + 'model=' + sf.item.options[sf.brands.selectedIndex].value + '&&&&' );
return false;
}
SCRIPT FOR DROP DOWNS
// JavaScript Document
$(document).ready(function(){
Acura=new Array("MDX","RLX","ILX","TLX");
Chrysler=new Array('200','3000','Town&Country');
populateSelect();
$(function() {
$('#brands').change(function(){
populateSelect();
});
});
function populateSelect(){
cat=$('#brands').val();
$('#item').html('');
eval(cat).forEach(function(t) {
$('#item').append('<option val="">'+t+'</option>');
});
}
});
Wow wow!
Please read some code style for js. If it works it doesnt mean that it's good.
DO NOT USE eval, EVER! eval = evil
You forgetting var declaration.
Inline handler in html bad practice too.
forEach will break in IE <= 8
concat is good, plus is good too
... lot of mistakes, that will cost you after.
I`ve wrote you a one liner, but it doesnt have structure. Just some ideas and removed a lot of things.
http://jsfiddle.net/gwEP5/
Whole js code:
$(function (){
// Selector
var $form = $("#searchform");
// it could be hashchange in the future
var setPath = function (url) {
window.location = url;
};
var searchHandler = function (e) {
e.preventDefault();
// You can serialize whole form just by .serialize
var url = window.location.pathname + "?" + $form.serialize();
setPath(url);
};
// Handlers, set handlers in js not in DOM, inline delegation is really nasty
// alias for .submit
$form.on("submit", searchHandler);
// Form elements
var $brands = $('#brands'),
$item = $("#item");
// Items list, dont use new Array or String. It`s good way in
var items = {
"Acura": ["MDX","RLX","ILX","TLX"],
"Chrysler": ['200','3000','Town&Country']
};
// eval is EVIL !!!! don`t use it ever
var populateItems = function () {
var elements = "",
value = $brands.val();
if (items[value] != null) {
$.each(items[value], function (i, item) {
elements += "<option value=\"" + item + "\">" + item + "</option>";
});
}
$item.html(elements);
}
// Alias .change
$brands.on("change", populateItems);
// init for start
populateItems();
});
Html form:
<form name="searchform" id="searchform">
Brand:
<select id="brands" name="make">
<option value="Acura">Acura</option>
<option value="Chrysler">Chrysler</option>
</select>
<select id="item" name="model">
</select>
<input type="submit" value="Submit"/>
</form>
The setup itself is fine. However, you have a typo:
sf.item.options[sf.brands.selectedIndex]
Should be:
sf.item.options[sf.item.selectedIndex]
Or, if you prefer the more aesthetic jQuery:
function dosearch() {
var baseUrl = 'http://www.spitzer.com/new-inventory/index.htm?';
var brand = $('#brands').find(":selected").text();
var item = $('#item').find(":selected").text();
location.href = baseUrl + 'make=' + brand + '&&&&' + 'model=' + item + '&&&&';
return false;
}
I'm looking to expand on a recent script i've coded using jquery.
I have this following code
<script type='text/javascript'>
added_departments = new Array();
$("#departments_submit").click(function(){
var depo = $("#depo_list").val();
if(jQuery.inArray(depo, added_departments) != -1)
{
return false;
}
else
{
added_departments.push(depo);
$("#depo_added_list").append("<li>" + depo + "<a href='#' title='"+ depo +"' class='remove_depo'> [X] </a></li>");
var current_value = $("#departments").val();
if(current_value)
{
$("#departments").val(current_value + "," + depo);
}
else
{
$("#departments").val(depo);
}
return false;
}
});
</script>
The above code takes information selected in a select drop down box, adds it to a div to display publicly and also into a hidden form field that processes the data.
i've tried to create now something that will reverse this effect and remove certain selections from the div and the field. which is where i have this code
<script type='text/javascript'>
$(".remove_depo").click(function(){
var removing = $(this).title();
var current_val = $("#deparments").val();
if(current_val == removing) {
$("departments").replace(removing, "");
}
else {
$("departments").replace("," + removing, "");
}
});
</script>
It doesn't cause any errors, but it doesn't do anything either? So I'm really stuck. Any ideas?
EDIT: Updated code
$(".remove_depo").click(function(){
var removing = $(this).attr('title');
var current_val = $("#deparments").val();
if(current_val == removing) {
$("#departments").replace(removing, "");
}
else {
$("#departments").replace("," + removing, "");
}
});
Here is the html
<form method="post" action="javascript:void(0);">Select Departments To Be Added:
<div class="depo_adder">
<select id="depo_list"><option value="">--- INDIVIDUAL TAGS ---</option><option value="blah">blah</option></select>
<button id="departments_submit">Go!</button>
</div></form><form method="post" action="briefings/addbriefing.php">
<div class="form">
<strong>Departments: </strong>
<ul id="depo_added_list"><li>blah [X] </li></ul>
<input name="departments" id="departments" value="blah" type="hidden">
</div>
you're referring to $('departments') - this won't work. You need to specify either an identifierm eg $('#departments') or a class, eg $('.departments)
ah - other answer is also correct, .title() is not a function. You want
$('#foo').attr('title') to get the title.