How do I create multiple jQuery-UI dialog forms and have each one submit unique data? - jquery-ui-dialog

Question

I have created a jQuery-UI form to add a note to specific areas of a website. The form gets submitted to a PHP script for processing.
Each area of the site is defined by an area and a uniqueId.
The modal form works for a single form on the page (i.e. where I only have 1 area and 1 unique Id displayed at any time). How do I modify the code so that I can re-use as much as possible and cater for multiple areas / uniqueId's on the same page?
One solution I have found is to use PHP to create a separate set of JavaScript methods and a separate div for each area. This seems like the long way around.
The code is available as a JSFiddle here: JSFiddle
The HTML
<h1>Scratch Pad</h1>
<button id="create-note">Add Note</button>
<div id="dialog-form" title="Add Note">
<form>
<fieldset>
<label for="name">Note</label>
<textarea name="note" id="note" class="text ui-widget-content ui-corner-all">
</textarea>
<input type="hidden" name="uniqueId" value="1" />
<input type="hidden" name="area" value="aircraft" />
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
And the JavaScript
$(function() {
var dialog, form;
function addNote() {
farea = $('#area').val();
fnote = $("#note").val();
funiqueId = $('#uniqueId').val();
// Post the data
$.post("api/addnote.php", {
area: farea,
uniqueId: funiqueId,
note: fnote
},
function() {
window.location.reload(true);
dialog.dialog("close");
});
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create a note": addNote,
Cancel: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addNote();
});
$('button[id^="create-note"]').button().on("click", function() {
dialog.dialog("open");
});
});

Answer 1

My problem was a conceptual one. I don't need to create a new form for each button, I just need to set the hidden attributes when the button is clicked.
Full solution:
HTML
<h1>Scratch Pad</h1>
<button id="create-note-1" >Add Note</button>
<button id="create-note-2" >Add another note</button>
<div id="dialog-form" title="Add Note">
<form>
<fieldset>
<label for="name">Note</label>
<textarea name="note" id="note" class="text ui-widget-content ui-corner-all">
</textarea>
<input type="hidden" id="uniqueId" name="uniqueId" />
<input type="hidden" id="area" name="area" />
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
Javascript:
$(function() {
var dialog, form;
function addNote() {
farea = $('#area').val();
fnote = $("#note").val();
funiqueId = $('#uniqueId').val();
// Post the data
$.post("api/addnote.php", {
area: farea,
uniqueId: funiqueId,
note: fnote
},
function() {
window.location.reload(true);
dialog.dialog("close");
});
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create a note": addNote,
Cancel: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addNote();
});
});
And the small repeatable snippet for each button:
$(function() {
$("#create-note-1").button().on("click", function() {
$("#uniqueId").val('1');
$("#area").val("aircraft");
$("#dialog-form").dialog("open");
});
$("#create-note-2").button().on("click", function() {
$("#uniqueId").val('8');
$("#area").val("pilot");
$("#dialog-form").dialog("open");
});
});