...

View Full Version : image input to form - help,lack of sleep



Ges
09-20-2006, 06:44 AM
I am trying to use an image as an input to a form and getting confused. I pass the inputs to a small javascript but keep getting 'document.gerald.my_pic.value is null or not an object'. Heres the simplified code - it just takes 2 text inputs and then the pic. I do not want to use the pic as the submit button to the form.

!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 sort me out I would be gratefull cos I'm using a lap top at the top of a local bridge and calculating how long it would take me to hit the water and die!!!
Thanks
Ges.

_Aerospace_Eng_
09-20-2006, 06:55 AM
Try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function do_it()
{
var thestuff1 = document.forms['gerald'].stuff1.value;
var thestuff2 = document.forms['gerald'].stuff2.value;
var mypic = document.forms['gerald'].my_pic.value;
return false;
}
</script>
</head>
<body>
<form name="gerald" id="gerald" action="#" method="post" onsubmit="return do_it()">
<label for="stuff1">Text entry1
<input type="text" size="17" name="stuff1" id="stuff1">
</label>
<br>
<label for="stuff2">Text entry2
<input type="text" size="17" name="stuff2" id="stuff2">
</label>
<br>
<input type="image" src="pic1.jpg" alt="select this pic" border="0" name="my_pic" id="my_pic">
<br>
<input type="submit" value="Enter">
</form>
</body>
</html>
Its a little more efficient but your main problem was your variables were the same name as your NAMEs of your input elements.

Ges
09-20-2006, 08:13 PM
Thanks Aerosapce but when I use your code I get exactley the same error. It always complains about the my_pic.value being null or not an object.
I'll keep on trying but that water is looking very very inviting.
Thanks,
Ges.

_Aerospace_Eng_
09-20-2006, 08:19 PM
I think you should explain better what is that you are trying to do. As it is now you really aren't accomplishing anything with the simple script you are using. You can't set a value to an input type image which why you are probably getting the error.

Ges
09-20-2006, 08:26 PM
Sorry Aerospace. I'm trying to display some thumbnails so that you can click on one of them and then proceed to enter some text fields. So in other words I present a set of pictures, you select one of them and then fill out the rest of the form. I then use the info in a jacascript. But I can't seem to access or select the the picture.
Ges.

_Aerospace_Eng_
09-20-2006, 08:39 PM
Okay where will the text go? Is it supposed to go on top of the image or something? Are you trying to allow users to create images with their own text on them allowing them to save them?

Ges
09-20-2006, 09:36 PM
The text will go inder the pic. Once they selct the pic by clicking it, fill in the form I generate a HTML page using the variables. The page displays a photo and some text with the background that they hace selected.
This code works with my_pic hard coded to show what I'm trying to do.
<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.form.logo.value;
var photo1=document.form.photo.value;
var photo_width1=document.form.photo_width.value;
var photo_height1=document.form.photo_height.value;

document.result.endresult.value="<html><head><title>Flowers In Eden - 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=form>

<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>


This is where I am trying to let the background be selected using the type=img input. This is the problem. It's the same code as above but has the problem in that I can't get hold pf the my_pic input variable.

<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.form.my_pic.value;
var logo1=document.form.logo.value;
var photo1=document.form.photo.value;
var photo1_width=document.form.photo_width.value;
var photo1_height=document.form.photo_height.value;

document.result.endresult.value="<html><head><title>Flowers In Eden - 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='"+photo+1"' width='"+photo_width1+"' height='"+photo_height1+"'></a></td></tr>\
</table><br>\
</body>\
</html>"
}
</script>
</head>

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

<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>

I know I'm bothering you to bits but I promise not to jump yet if you can point me in the right direction, ( not down to the water! ).
Thanks,
Ges.

_Aerospace_Eng_
09-20-2006, 10:53 PM
A server side language is a lot better for this type of thing. However you should probably use a select drop down that gives the users a choice, you can use DOM to put the image in with the form then open the new window with the variables from the form. I don't have time right now, will give an example later but if you can post the images you are going to be using or at least a link. On top of that you need to learn how to use code tags, its the little # pound sign.

Ges
09-20-2006, 11:24 PM
Thanks Aerospace for your time and effort. I will look into doing the whole thing in PHP. This will give me the kick I needed anyway cos I keep putting PHP off. I know enough to get through but I'll just have to give it more time. I can't upload the background pics cos they're too big for the uploader.
But thanks. When I come up with a solution I'll post it here so that other scan use it.

Thanking you for your precious time. It's good people like you that keep things turning on an even score.

Regards,
Ges Scott.

Ges
09-30-2006, 07:49 AM
Hi Aerospace, I 've solved the problem with a little help from my friends at PHP.net. It is based on the DOM info you provided. Basically you put the script in to the folder where the pictures are. Then call the script from your Javascript. This is the PHP script ( 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()
?>

And here is my HTML file. Raw but I will refine it later.

<!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>
<!-- this is the path to the PHP script. Put the script in the folder containing the pictures -->
<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>

Thank you for your excellent advice etc.
Ges.

Arbitrator
09-30-2006, 08:42 AM
Heh, I think you should utilize some of the given advice:


On top of that you need to learn how to use code tags, its the little # pound sign.
i.e., put your posted code within [code] tags so that users need not scroll so much to read the thread and your code is formatted in a monospace font. I believe that most coding forums offer such a mechanism.

Ges
09-30-2006, 09:04 AM
Ever so sorry Arbitrator.

put your posted code within [code] tags so that users need not scroll so much to read the thread and your code is formatted in a monospace font.

I will make sure I comply in future and accept your 'telling off' and yes I know that this is'nt code.

Gerald.

Arbitrator
09-30-2006, 10:42 AM
I will make sure I comply in future and accept your 'telling off' […]Assuming that your comment is meant to be derogatory, how is asking you to use a feature at your disposal, that makes it easier for other users to reference threads and posts on this forum, “telling [you] off”? You're receiving the courtesy of a solution to (or at least help with) your problem here, so I don't see why you take issue being asked to show such a simple courtesy in turn. My post could hardly be called rude either so I can only assume that your response was one of those (IMO stupid) matters of pride. With the energy wasted on your prior post, you could have just edited your prior two posts, adding the relevant tags.

By the way, normally, I wouldn't post just for that, except that I've seen a lot of members that don't know what [code] tags are and Aerospace's post may not have been clear being that the “#” button doesn't exist when the WYSIWYG post editor is disabled. I also saw that you had either not understood or ignored the given advice.

Ges
09-30-2006, 11:04 AM
No, I was'nt being rude or anything of the sort. At the time that Aerospace was giving me sound advice I failed to understand him. I in no way meant any discourtesy and aplogise if that is the way you found me to be. I value all advice and I was'nt quite sure how to use the features such as '#' etc.
Your original post put me right on that so I responded in a way in order to show that I would comply in future, ( now that I know how ).
Once again I aplogise for comming across that way.
Ges Scott.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum