Update
jsfiddle.net/xDA9p/2 Symbolical of this. Besides email or website, this will automatically determine Image_ID
In fact, if someone can help me by showing me how easy it is to automatically update the input form for the image ID when a certain button is clicked, this will be enough to get what I need. Thanks!
Currently, if you notice that Image_ID needs to be placed manually. I'm trying to get rid of the input of this text, so when someone selects an image to watch, they can instantly comment on this image!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>
Untitled Document
</title>
<cfquery datasource="AccessTest" name="qTest">
SELECT P.Account, P.Image, P.Image_ID, C.Remarks, C.Users, C.Accounts, C.Date_Time
FROM PictureDB AS P
INNER JOIN CommentsDB AS C
ON C.Image_ID = P.Image_ID
ORDER BY P.Image_ID
</cfquery>
<script src="http://code.jquery.com/jquery-2.0.3.js">
</script>
<script>
$(document).ready(function(){
var images = {
<cfoutput query="qTest" group="Image_ID">
"#qTest.Image_ID#": {
"image": "#qTest.Image#",
"remarks": [
<cfoutput>
"#qTest.Users#, #qTest.Date_Time# <br> #qTest.Remarks# <br> </br>",
</cfoutput>
]
},
</cfoutput>
};
$("button").click(function(event){
event.preventDefault();
var id = $(this).data("id");
var src = images[id].image;
var desc = images[id].remarks.toString();
$("#theImage").attr("src", src).removeClass("hide");
$("#theDescription").html(desc).removeClass("hide");
});
});
</script>
</head>
<body>
<cfoutput query="qTest" group="Account">
<button data-id="#qTest.Image_ID#">
#qTest.Account#
</button>
</cfoutput>
<cfform name="InsertComments" id="InsertComments">
<fieldset>
<div id="container">
<div id="mainContent">
<textarea name="Remarks" cols="55" rows="4" label="Tour Description"
required="yes" validateat="OnSubmit" message="Please enter your comment here"
enabled="no">
</textarea>
<input type="text" name="Image_ID" message="Please enter Account Here."
validateat="onSubmit" required="yes" id="Image_ID" size="10"
maxlength="60">
</input>
<input type="submit" name="insertComments" value="Insert Comments" id="submit">
</input>
</div>
</div>
</fieldset>
</cfform>
<cfif IsDefined("form.InsertComments")>
<cfquery datasource="AccessTest">
INSERT INTO CommentsDB (Remarks, Image_ID, Date_Time )
VALUES
(<cfqueryparam value="#form.Remarks#" cfsqltype="CF_SQL_LONGVARCHAR">
, <cfqueryparam value="#form.Image_ID#" cfsqltype="cf_sql_integer">
, <cfqueryparam value="#now()#" cfsqltype="cf_sql_timestamp">
)
</cfquery>
</cfif>
<img id="theImage" class="hide">
<div id="theDescription" class="hide">
</div>
</body>
</html>
