Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Ges
    Ges is offline
    New to the CF scene
    Join Date
    Sep 2006
    Location
    England
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy image input to form - help,lack of sleep

    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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try this
    Code:
    <!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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Ges
    Ges is offline
    New to the CF scene
    Join Date
    Sep 2006
    Location
    England
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Ges
    Ges is offline
    New to the CF scene
    Join Date
    Sep 2006
    Location
    England
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Ges
    Ges is offline
    New to the CF scene
    Join Date
    Sep 2006
    Location
    England
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    Ges
    Ges is offline
    New to the CF scene
    Join Date
    Sep 2006
    Location
    England
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Ges
    Ges is offline
    New to the CF scene
    Join Date
    Sep 2006
    Location
    England
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Problem Fixed - image selction in forms.

    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.

  • #11
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Heh, I think you should utilize some of the given advice:

    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #12
    Ges
    Ges is offline
    New to the CF scene
    Join Date
    Sep 2006
    Location
    England
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Told off

    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.
    Code:
    I will make sure I comply in future and accept your 'telling off' and yes I know that this is'nt code.
    Gerald.

  • #13
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by Ges View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #14
    Ges
    Ges is offline
    New to the CF scene
    Join Date
    Sep 2006
    Location
    England
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •