image input to form - help,lack of sleep

**Ges** · 09-19-2006, 12:36 PM

I am trying to click on an image to enter it into a form together with text inputs. But I keep getting 'document.gerald.my_pic.value is null or not an object'. I do not want the picture to act as the submit button. I merely want to enter it as any other input. I submit the form later in the code. This is a simplified version. The Javascript is complaining with the above error.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language=javascript>
function do_it ()
{
var stuff1=document.gerald.stuff1.value;
var stuff2=document.gerald.stuff2.value;
var my_pic=document.gerald.my_pic.value;
}
</script>
</head>

<body>
<form name=gerald>

Text entry1
<input type=text size=17 name=stuff1>
<br>
Text entry2
<input type=text size=17 name=stuff2>
<br>
<input type=image src="pic1.jpg" height=145 width=200 alt="select this pic" border=0 name=my_pic>
<br>
</form>
<input type=button value=Enter onClick=do_it()>

</body>
</html>

If anyone could help please cos I've tried all sorts and I'm now at the point of calculating how long it would take me to hit the water from the local bridge and die!!
Thanks
Ges.

**mwinter** · 09-19-2006, 07:22 PM

Originally Posted by Ges

I am trying to click on an image to enter it into a form together with text inputs.

What do you mean by "enter it into a form"? What exactly are you expecting to receive server-side?

I do not want the picture to act as the submit button.

That is precisely the point of input elements of image type.

Mike

**Ges** · 09-21-2006, 03:24 PM

Sorry Professor. I am basically trying to show a set of thumbnails where you can select one by clicking on it. Then fill out the rest of the form. When this is done, you press the submit button. The variables go to a javascript. The javascript then generates some html code and when you press the test button the page is displayed in a new browser window using the picture as a background.
The follwing code has the picture background 'hard coded' into it and works fine.

<html>
<head>
<title>Page Generator</title>
<script language=javascript>

function testingPage ()
{
myWin=open('', 'testwindow',
'width=950,height=550,status=yes,toolbar=yes,menubar=yes,scrollbars=yes,resizable=yes');
myWin.document.open();
myWin.document.write(document.result.endresult.value);
myWin.document.close();
}

function makepage ()
{

var logo1=document.ges.logo.value;
var photo1=document.ges.photo.value;
var photo_width1=document.ges.photo_width.value;
var photo_height1=document.ges.photo_height.value;

document.result.endresult.value="<html><head><title>Page Test</title>\
<link rel='stylesheet' href='pagedem.css'>\
</head>\
<body background='my_pic.jpg' bgproperties='fixed'>\
<table border=0 align=center cellspacing=0>\
<tr>\
<td align=center width=650 height=120><font size=7>"+logo1+"</font></td>\
</tr>\
</table>\
<table border=15 width='"+photo_width1+"' height='"+photo_height1+"' align=center><tr><td valign=top align=center>\
<a href='"+photo1+"'>\
<img src='"+photo1+"' width='"+photo_width1+"' height='"+photo_height1+"'></a></td></tr>\
</table><br>\
</body>\
</html>"
}
</script>
</head>

<body bgcolor="#CCCCCC">
<form name=ges>

<table border=1>
<tr>
<td width=62px>Name</td>
<td width=*><input type=text size=17 name=logo></td>
</tr>
</table>

<table border=1>
<tr>
<td width=62px>Photograph</td>
<td width=*><input type=file size=17 name=photo></td>
</tr>
</table>

<table border=1>
<tr>
<td width=62px>Photograph width</td>
<td width=*><input type=text size=5 name=photo_width value=500></td>
</tr>
</table>

<table border=1>
<tr>
<td width=62px>Photograph height</td>
<td width=*><input type=text size=5 name=photo_height value=700></td>
</tr>
</table>

</form>

<input type=button value=Create! onClick=makepage()>
<input type=button value=Test! onClick=testingPage()>

<form name=result>
<textarea name=endresult cols=100 rows=15></textarea>
</form>

</body>
</html>

When I add the picture input stuff I get the error 'document.ges.my_pic.value is null or not an object'.
This is the erronous code - only has the picture stuff added.

<html>
<head>
<title>Make page</title>
<script language=javascript>

function testingPage ()
{
myWin=open('', 'testwindow',
'width=950,height=550,status=yes,toolbar=yes,menubar=yes,scrollbars=yes,resizable=yes');
myWin.document.open();
myWin.document.write(document.result.endresult.value);
myWin.document.close();
}

function makepage ()
{

var my_pic1=document.ges.my_pic.value;
var logo1=document.ges.logo.value;
var photo1=document.ges.photo.value;
var photo1_width=document.ges.photo_width.value;
var photo1_height=document.ges.photo_height.value;

document.result.endresult.value="<html><head><title>Page Test</title>\
<link rel='stylesheet' href='pagedem.css'>\
</head>\
<body background='"+my_pic1+"' bgproperties='fixed'>\
<table border=0 align=center cellspacing=0>\
<tr>\
<td align=center width=650 height=120><font size=7>"+logo1+"</font></td>\
</tr>\
</table>\
<table border=15 width='"+photo_width1+"' height='"+photo_height1+"' align=center><tr><td valign=top align=center>\
<a href='"+photo1+"'>\
<img src='"+photo1+"' width='"+photo_width1+"' height='"+photo_height1+"'></a></td></tr>\
</table><br>\
</body>\
</html>"
}
</script>
</head>

<body bgcolor="#CCCCCC">
<form name=ges>

<input type=image src="pic1.jpg" width=145 width=200 alt="click for this" border=0 name=my_pic>

<table border=1>
<tr>
<td width=62px>Name</td>
<td width=*><input type=text size=17 name=logo></td>
</tr>
</table>

<table border=1>
<tr>
<td width=62px>Photograph</td>
<td width=*><input type=file size=17 name=photo></td>
</tr>
</table>

<table border=1>
<tr>
<td width=62px>Photograph width</td>
<td width=*><input type=text size=5 name=photo_width value=500></td>
</tr>
</table>

<table border=1>
<tr>
<td width=62px>Photograph height</td>
<td width=*><input type=text size=5 name=photo_height value=700></td>
</tr>
</table>

</form>
<input type=button value=Create! onClick=makepage()>
<input type=button value=Test! onClick=testingPage()>

<form name=result>
<textarea name=endresult cols=100 rows=15></textarea>
</form>

</body>
</html>

If I have to use a server side script I will but I just can't believe that it can't be done easier.
I am am at the moment on top of the local bridge with a calculator seeing how long it would take me to hit the water and die!!!
Thanks,
Ges.

**mwinter** · 09-21-2006, 07:23 PM

Originally Posted by Ges

Sorry Professor.

Those titles are added automatically by the forum software based on post count.

I am basically trying to show a set of thumbnails where you can select one by clicking on it.

Place radio buttons alongside or under each thumbnail, and use those to identify the selected thumbnail.

A few notes:

<html>

Documents should start with a document type declaration (DOCTYPE). When both a formal public identifier (like "-//W3C//DTD HTML 4.01//EN") and a system identifier ("http://www.w3.org/TR/html4/strict.dtd" corresponds with that FPI) are present, browsers that switch between "Quirks" and "Standards" rendering modes will use the latter. This leads to more consistent and predictable behaviour across user agents.

The language attribute has been deprecated for years. Use the type attribute, instead:

HTML Code:

<script type="text/javascript">

function testingPage ()
{
myWin=open('', 'testwindow',

All variables should be explicitly declared (especially global ones to avoid falling foul of IE silliness).

'width=950,height=550,status=yes,toolbar=yes,menubar=yes,scrollbars=yes,resizable=yes');

Boolean features just have to be present to be enabled. That is:

Code:

'width=950,height=550,status,toolbar,menubar,scrollbars,resizable'

Then again, relying on pop-ups isn't typically a good idea these days.

document.result.endresult.value="<html><head><title>Page Test</title>\

Don't use a backslash to split string literals: it's forbidden in ECMAScript, and no derivative (to my knowledge) formally supports it.

The most efficient alternative is to define an array, which you then join with a new line between each element:

Code:

document.forms.result.elements.endresult.value
    = ['<html><head><title>Page Test<\/title>',
    '<link rel="stylesheet" href="pagedem.css">',
    '<\/head>',
    '<body background="my_pic.jpg" bgproperties="fixed">',
    /* ... */ ].join('\n');

</head>\

The character sequence "</" should not occur inside a script or style element, as this is allowed to be considered the end of the element. As shown above, in a string literal, the slash can be escaped to break apart this sequence (into "<\/").

The width attribute does not include units: it is always interpreted as pixels. In CSS, the situation is different as units are always required for any non-zero length value.

Get into the habit of quoting all attribute values. Some characters are not permitted unquoted (and an asterisk is one of them).

When I add the picture input stuff I get the error 'document.ges.my_pic.value is null or not an object'.

The element has not been added as form element. I don't know why (there's no real reason not to), but nevertheless it hasn't. It is possible to use an alternate approach, but there's no need to as the images should simply be images, and radio buttons should indicated the chosen one.

Mike

**Ges** · 09-21-2006, 08:20 PM

Thank you very much Mike. I am getting on with it now and will let you know how I've got on, ( just as soon as I climb down from this bridge!!).
I will also study more of the syntax aspects of HTML as you've indicated.
The DOCTYPE etc is never missing from any of my stuff, I just did a quick cut and paste to show code but thanks for adding info that I was'nt aware of.

Thanks once again,
Ges.

**Ges** · 09-30-2006, 07:26 AM

Hi Professor. The problem is fixed using DOM methods. I am using a PHP script to find all the pics in a folder then accessing them using some mods to my Javascript. The PHP script sits in the folder containing the pics. This is the PHP script, ( Ive called it getpics.php ).

<?php
Header("content-type: application/x-javascript");
$pathstring=pathinfo($_SERVER['PHP_SELF']);
$locationstring="http://" . $_SERVER['HTTP_HOST'].$pathstring['dirname'] . "/";

function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)";
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){
echo 'picsarray[' . $curimage .']="' . $file . '";';
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var locationstring="' . $locationstring . '";';
echo 'var picsarray=new Array();';
returnimages()
?>

This is my HTML file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Page Generator</title>
<style type="text/css">

#picturearea
{
filter:alpha(opacity=100);
-moz-opacity: 0;
}

</style>

<script src="getpics.php" type="text/javascript">
</script>
<script type="text/javascript">

function populateSelect(selectobj)
{
for (var i=0; i<picsarray.length; i++)
selectobj.options[selectobj.options.length]=new Option(picsarray[i], picsarray[i])
if (selectobj.options.length>1)
{
selectobj.selectedIndex=0
showpicture(document.getElementById("picsform").picslist)

}
}

function showpicture(selectobj)
{
piccontainerobj=document.getElementById("picturearea")
piccontainerobj.innerHTML='<img height=200 src="'+locationstring+selectobj.options[selectobj.selectedIndex].value+'">'
}

function makepage()
{
var bg_pic = picsform.picslist.value;
var loves_name = pic_vars.logo.value
var photograph = pic_vars.photo.value;
var width = pic_vars.photo_width.value;
var height = pic_vars.photo_height.value;

// set the path for bg_pic - omitted here
document.result.endresult.value="<html><head><title>Test</title>\
</head>\
<body background="+bg_pic+" bgproperties='fixed'>\
<table border=0 align=center cellspacing=0>\
<tr>\
<td align=center width=650 height=120><font size=7>"+loves_name+"</font></td>\
</tr>\
</table>\
<table border=15 width='"+width+"' height='"+height+"' align=center><tr><td valign=top align=center>\
<a href='"+photograph+"'>\
<img src='"+photograph+"' width='"+width+"' height='"+height+"'></a></td></tr>\
</table><br>\
</body>\
</html>"

}

function testingPage ()
{
myWin=open('', 'testwindow',
'width=950,height=550,status=yes,toolbar=yes,menubar=yes,scrollbars=yes,resizable=yes');
myWin.document.open();
myWin.document.write(document.result.endresult.value);
myWin.document.close();
}
window.onload=function()
{
populateSelect(document.getElementById("picsform").picslist)
}

</script>
</head>

<body>
<div style="float: left; width: 300px;">

<form id="picsform">
<select name="picslist" size="20" style="width: 200px" onClick="showpicture(this)">
</select>
</form>

<form id="pic_vars">
Name : <input type=text size=17 name=logo><br>
Photo : <input type=file size=17 name=photo><br>
Photo width : <input type=text size=5 name=photo_width value=500 ><br>
Photo height : <input type=text size=5 name=photo_height value=600 ><br>

</form>
<input type=button value=Create! onClick=makepage()>
<input type=button value=Test! onClick=testingPage()>
</div>

<div id="picturearea" style="float: left; width: 20px; height: 14px; margin-left: 20px">
</div>

<form name=result>
<textarea name=endresult cols=100 rows=15></textarea>
</form>
<br style="clear: left" />

</body>
</html>

Obviously change the path to the script. Thanks for your advice etc. All this is quite new to me but as I am a C/C++ programmer it is relatively easy to pick up. I am now looking into CGI stuff to see where I can use C++ in future as I would feel more comfortable.
Once again, thank you,
Ges.

Thread: image input to form - help,lack of sleep

Thread Tools

Search Thread

image input to form - help,lack of sleep

Fixed and working.

Bookmarks

Bookmarks

Posting Permissions