Click to See Complete Forum and Search --> : Image input does not submit
bodywise
01-15-2003, 11:21 AM
I am still trying to write a form that submits with dynamic images instead of submit buttons. These are PHP images.
I think I have discovered some major design flaws in the input statement for type="image" You cannot get it to submit data directly.
I have at least 4 of the best books on
Javascript and *none* describe how to do this -- as simple as it ought to
be. I have this down to one line.
This works! But it is a type="submit" (the onClick part is just
ignored) -- it shows a series of buttons with labels
<?php do { ?>
<td>
<input name="ProductID" type="submit" value="<?php echo
$row_rsProducts['ProdID']; ?>" src="<?php echo $row_rsProducts['ImgSrc'];
?>" alt="<?php echo $row_rsProducts['Prod_Desc']; ?>" onClick=
"submitForm( this.form )" >
</td>
This does *not* work. This only change is the type="image" with an onclick=
submitForm. But it shows all the graphic images
<?php do { ?>
<td>
<input name="ProductID" type="image" value="<?php echo
$row_rsProducts['ProdID']; ?>" src="<?php echo $row_rsProducts['ImgSrc'];
?>" alt="<?php echo $row_rsProducts['Prod_Desc']; ?>" onClick=
"submitForm( this.form )" >
</td>
the small function call is:
function submitForm( form ) {
alert( form );
document.ProductID.submit( form );
Charles
01-15-2003, 11:24 AM
Can you give us the URL?
For me this works, you have a value on the image type, maybe that's the problem:
<script language="JavaScript">
<!--
function submitForm( form ) {
alert( form );
document.ProductID.submit(form);
}
//-->
</script>
<noscript></noscript>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<form action="1.html" name=ProductID method=post>
<input type=image src="<?php echo $row_rsProducts['ImgSrc'];?>" onClick="submitForm(this)" width="20" height="20">
</form>
</body>
</html>
bodywise
01-15-2003, 11:59 AM
Thanks.
There is a difference between what works and what is needed. The value is the whole point. This input statement is supposed to pass the variable ProductID which is the value.
I am really sytmied on this because I think I have run into design limtations of the stetement and the fact that there is no simple way of doing something quite simple:
Submitting dynamics images rather than the traditional (and silly submit buttons).
I want the images to be the submit vehicle that then pass the ProductID form POST variable.
Any further thoughts? Thanks
If you have for every image a seperate form, have you? Then you can put an input type=hidden field with the name and the value!
bodywise
01-15-2003, 01:40 PM
Thanks for your suggestions.
Any comment on why the line input type="image" cannot be forced to submit with the js expression?
and a hidden field is not allowed to have a js expression.
Input type="submit" value is really a label
Input type="image" value is a real value but this is not a common type and is poorly written about.
Charles: the url is www.AntiAgingNow.com but the starting page is www.AntiAgingNow.com/Catalog10.php That is where I start with graphic buttons. I cheated here by manually entering the form variable. From this point on you will see drop down menu choices in www.AntiAgingNow.com/catalog20.php
That is where I want graphic images, not text.
People want to buy with images, not text. I am being hampered by conventions that are not allowing me to do this simply and elegantly, because it "is not done this way."
This whole site has been a eries of the same issues.
Swon: making separate forms for each image is not compact and would be too much overhead. I think there is a simpler way of doing this.
Thanks
Charles
01-15-2003, 02:00 PM
I'm just not seeing the problem, but the solution is going to be to stop trying to submit a form with JavaScript. Forms work fine without it but JavaScript will fail at least one inten times.
bodywise
01-15-2003, 02:36 PM
Charles,
If you will just bear with me a little longer. I gave you the URLs so you could see the larger picture
The central problem is submitting with dynamic images not submit buttons. Everything I have given are just lines of code. This is really an elegant problem with no simple solution because "no one is doing it."
But in the real world that is how people buy things -- with images. Just look at your McDonald's or Burger King (or don't) and look how they enter today. Little smiley faces. Better yet, go to Victoria's Secret and look at how thing are displayed. Images. Now these are nice images!
I just included the js to force the submit. Didn't work because it didn't like the type="image"
So how would you write 1 or 2 lines for a PHP or ASP dynamic *image* that you click, then sumbits the proper form POST variable to the next page?
Charles
01-15-2003, 02:56 PM
<input type="image" src="someImage.png" alt="This is some image."> "Creates a graphical submit button." (http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT) You do not need to be using JavaScript and you ought not to be using JavaScript here. You might want to take a look at another, recent thread at http://forums.webdeveloper.com/showthread.php?s=&threadid=2364.
bodywise
01-15-2003, 03:41 PM
Thanks again. I think we have now come full circle. None of this is new to me. So it is time to go back and keep trying the right combination of statements.
As I said, and referring to my site, this is really a major issue and is not arcane. It is just not done this way so everyone just forgets it and resorts to these silly submit buttons.
Great advances are made when some one decides to invent or augment the older routines taking into account newer user demands.
Thanks for your input.
Charles
01-15-2003, 03:52 PM
You didn't read my post. The image input element already is a submit button. Use it as such. You need no JavaScript to make this work.
bodywise
01-15-2003, 04:55 PM
Charles,
Yes I understand and was endeavoring to be polite. I understand that this is an input that should be a submit. But it includes no value. There is where I started. That all these statements, going back to my first post, says that I can submit but the variables are not being passed because there is no value input.
What I need to play with later today is to see if in 2 lines I can reference the values and then submit with the line you provided.
I will let you know tonight if this works.
Thanks for your persistence. But acknowledge how really confusing the convention is with various input types. I have been using these for years and just lately applied myself to getting it right.
There is room for improvemeent in these conventions just like the CSS and CSS2 conventions.
Charles
01-15-2003, 05:05 PM
Try giving them different names and stop using JavaScript to do this.
utahsaint
01-15-2003, 05:21 PM
Usually what I do when I want to go to different locations or have different actions is to use fusebox. Its a Cold Fusion methodology. This way when a user clicks on a button or image or what have you I can change the location it post to.
How is this done? Rather easy, on the button I make it change a hidden text field then based of the value in that hidden field change the location. Maybe this would fix your problem of what image, just put it into the hidden text field.
Just a thought.
Charles
01-15-2003, 05:26 PM
And what of the one in ten that do not use JavaScript?
bodywise
01-15-2003, 06:24 PM
utahsaint:
Thank you for your suggestion, but I am afraid I don't quite follow it. It is more help for me to see specific code. But I do appreciate the suggestion. I need to think about this.
Charles:
Say what you will, but I don't program for legacy situations or the few that may have outdated browsers. Trying to program for all sitations can drive you nuts. So I am willing to lose a few along the way. Like trying to program for NS 4.0 or IE4.0 why? Everyone has access to the latest versions at no cost. I also frequently send out forms with Adobe Acrobat. If you don't have it, then download it. So there have to be some accomodations in that regard. Most the the CSS and CSS2 and browser conventions are now at least 3-5 years old.
Remember, in the end, it is the user that determines successful applications not the programmer. But you do have to make some choices and compromises along the way in terms of support.
I have been programming for 18 years (although a doc by profession) and my numero uno goal is the user-interface and application. That is why this topic is so important to me.
I would ask that you go back and look at my original post.
Your suggestions did not work -- but again I do appreciate the input. Try this www.antiagingnow.com/catalog20-images-B.php to see how it is layed out but only pulls up one product. Because it is missing an onClick directive.
with regards
Phil
Charles
01-16-2003, 04:42 AM
My suggestion works fine, but in your stubbornness you cannot understand it. You will have noticed that when you specify a name for your image input control the name of that control is passed with the HTTP request along with the coordinates where the image was clicked. Id est:foo.x=7&foo.y=6. Instead of
<input name="ProductID" type="image" src="images/antiox-bodyblock-spf.jpg" align="bottom" height="150" hspace="8" border="1" alt="Jan Marini AntiOxidant Body Block SPF 30" value="100">
you should use
<input type="image" src="images/antiox-bodyblock-spf.jpg" align="bottom" height="150" hspace="8" border="1" alt="Jan Marini AntiOxidant Body Block SPF 30" name="100">
Or if you don't want to do so much parsing at the server then simply put each image input control in its own form:
<form name="ProductSelect" method="POST" action="catalog30.php">
<input type="hidden" name="ProductID" value="100">
<input type="image" src="images/antiox-bodyblock-spf.jpg" align="bottom" height="150" hspace="8" border="1" alt="Jan Marini AntiOxidant Body Block SPF 30">
</form>
<form name="ProductSelect" method="POST" action="catalog30.php">
<input type="hidden" name="ProductID" value="101">
<input name="ProductID" type="image" src="images/antiox-daily-facial-spf30-glass.jpg" align="bottom" height="150" hspace="8" border="1" alt="Jan Marini AntiOxidant Daily Face Protectant SPF 30 - Pump Bottle">
</form>
There, I've given you two very simple ways to accomplish your goals. Both will work on all browsers, new and old, graphical and Braille, and neither use JavaScript.
The problem isn't with "outdated browsers" it's with two distinct classes of users. You have people like myself who disable JavaScript because of preference and you have people who cannot use JavaScript because of their disabilities. I notice that you are in the US and that you are engaging in a commercial enterprise. As such Title III of the Americans With Disabilities applies to your web site. You are required to make it accessible.
Bodywise, that's what I meant with input type=hidden in my post above, but you didn't understand I think!
posted by charles:
<form name="ProductSelect" method="POST" action="catalog30.php">
<input type="hidden" name="ProductID" value="101">
<input name="ProductID" type="image" src="images/antiox-daily-facial-spf30-glass.jpg" align="bottom" height="150" hspace="8" border="1" alt="Jan Marini AntiOxidant Daily Face Protectant SPF 30 - Pump Bottle">
</form>
Webskater
01-16-2003, 08:05 AM
If you accept the fact that an input tag of type=image cannot accept a value, you are stuckwith using Javascript.
I can't understand why you are not calling a javascript function in the onclick event of the image(s) and passing the productID to the function. You then simply concatenate the productID with the form's action.
So, you have a form like:
<form name=productform action=somepage.asp method=post>
<tr>
<td><img border="0" src="../images/productA.gif" onclick="submitform(ProductIDhere);"></td>
<td><img border="0" src="../images/productB.gif" onclick="submitform(ProductIDhere);"></td>
</tr>
</form>
and a function like this:
<script>
function submitform(ProductID)
{
var ID = ProductID;
productform.action += '?ProductID=' + ID;
productform.submit();
}
</script>
If you want to get fancy you could detect if it is a javascript enabled browser and hide or show submit buttons accordingly and disable or enable the onclick event on the pictures.
utahsaint
01-16-2003, 10:20 AM
I would show you code for the input type=hidden but webskater has already shared the code to do such a thing. Look at his example of the onClick=submitForm(). This is exactly what I would sugest this is what I use.
bodywise
01-16-2003, 08:07 PM
I want to thank all of you for the input and help.
If you look at the suggestions you will all see that each had their own solution -- all quite different. No one seemed to agree. Emphatically
I thought this was originally a javascript site, so am puzzled by comments to the contrary.
Actually, the one that came the closest to solving this was Webskater, although there is one criticial flaw. Although this forced a variable it is done as a GET variable and not a POST variable so it does not pass the variable to the next page.
Notice that you declared the form as a POST form but then declared the variable on the command line. And, it does so in very literal fashion, so it bypasses some of Dreamweaver's internal conventions -- which I still can't precisely get.
The problem is that this is an array -- a loop so it passes at least 4 if not up to 9 product IDs. Most of these routines don't pick up the ProductID so it picks up either the first or the last one.
That is the problem with using a type="image" as a button. This routine is for "dumb" button submits that don't need to know the value. These buttons (or images) need to know the value associated with each one. That is why I think the js routine is the only way of solving this.
So maybe I should have semantically framed this as a dynamic navigation bar, although you all realize that this is still an array of submit buttons that needs to know the value associated with each button.
I, inelegantly solved this by using the <img> display for the images on top and buttons on the bottom for the actual submission. I still am wondering what precisely is happening with the submit command that it is so unique.
Someone needs to come up with a routine that does this with one line of code.
Again, I thank all of you.
Charles
01-16-2003, 09:20 PM
Originally posted by Dave Clark
INPUT TYPE=IMAGE buttons will submit nothing to the server-side except the x and y coordinate position of the associated image. Period. It also submits the name of the control if you've given it one. And you can use that to transmit information.
bodywise
01-16-2003, 09:34 PM
Ah ......
As I have maintained ... The type="image" will not submit variables as a type="submit" Over and over again that is what I found.
So here is how I solved the problem.
And, yes, a work-around, which I really dislike. I always prefer solutions not work-arounds.
Look here www.AntiAgingNow.com/catalog20-images-C.php and this is the only way to approach a solution. Display the graphics with a small number of submit buttons underneath.
Not perfect, but about 90% of what I wanted.
Webskater
01-17-2003, 03:35 AM
In reply to my suggestion you stated:
Actually, the one that came the closest to solving this was Webskater, although there is one criticial flaw. Although this forced a variable it is done as a GET variable and not a POST variable so it does not pass the variable to the next page.
Of course it is passed to the next page but in the querystring. I assumed you wanted to submit a form because you had other data to submit at the same time. If you don't want to pass the ProductID in the querystring for security reasons then simply pass the value to a hidden field thus:
<script>
function submitform(ProductID)
{
var ID = ProductID;
productform.productID.value = ID;
productform.submit();
}
</script>
What's wrong with Charles' suggestion. Apart from the slight downside of having to loop through the Request collection it seems fine to me - in fact it seems like a good idea and I will use it in future.
Given that <input type=image) will not accept a value I can't help thinking you are making this more difficult than it is.
Webskater
01-17-2003, 03:37 AM
And something else. Why did you mention an array? Are you trying to click on more than one image, store the productIDs in an array and then submit them? If so, you should have mentioned this at the beginning.
Charles
01-17-2003, 04:41 AM
Originally posted by bodywise
As I have maintained ... The type="image" will not submit variables as a type="submit" Over and over again that is what I found. Oddly, I've found something else. And I've given you two different ways to do what you want without JavaScript. And it seems that Webskater and swon have both attested that my JavaScript free methods work.
Webskater
01-17-2003, 06:33 AM
I have to have a last word. I had a look at your web site and I have to agree with your admission that you have had to adopt an "inelegant" solution. Inelegant is not the word - in fact it is quite literally not a word. The buttons look awful - old-fashioned and unnecessary.
You've only got 5 products on the page so Charles' solution of a form for each product would be fine. If you don't fancy that - again Charles' solution of passing the value in the name attribute of the input tag would do the job with only one form.
Finally, if you don't mind a little bit of javascript, my solution (and others suggested here) will do the job for you. I see you have a javascript function written on the page - get rid of the buttons!
AdamBrill
01-17-2003, 07:50 AM
bodywise- Try this code:
<html>
<body>
<form method="POST" name=form1>
<input type="text" name="T1" size="20"></p>
<p>
<script language=javascript>
<!--
document.write("<img border='0' src='Ball.gif' onclick='document.form1.submit()'>");
-->
</script>
<noscript>
<img border="0" src="Ball.gif"></p>
<p><input type="submit" value="Submit" name="B1">
</noscript>
<input type="reset" value="Reset" name="B2"></p>
</form>
</body>
</html>
It will put the image as the submit button if they have javascript, and if they don't have javascript, it will put a button under the image to do it. Hope that helps!
everyone else- Why don't you guys help the people with the actual problem rather then tell them again and again a way that they don't really want to do it anyway? You can make your site however you want, but let other people do it how they want. That's my opinion in the matter... :)
Charles
01-17-2003, 08:16 AM
Originally posted by AdamBrill
Why don't you guys help the people with the actual problem rather then tell them again and again a way that they don't really want to do it anyway?
- Because no matter what he does, if he relies upon JavaScript then it will not work for one or more in ten users.
- Because, as he is working on a commercial site in the United States, publishing a page that relies upon JavaScript violates Title III of the Americans for Disabilities Act.
- I may be wrong here, but I believe that it's a crime to encourage other people to violate the law.
AdamBrill
01-17-2003, 08:48 AM
Well, I don't think it is a crime. If they made a law about it(which you never did show the actual law), then it is certainly not constitutional. I can write anything that I want. If I am going to publish something, I don't have to write it in Braille, too, so what is the difference? Somebody that is blind can't read the publication. Oh, and my way WILL work for the other 10%...
Webskater
01-17-2003, 09:00 AM
Adam
You might want to modify your last solution to show bodywise how to pass the ProductID when the image is clicked.
Charles
01-17-2003, 09:22 AM
Originally posted by AdamBrill
Well, I don't think it is a crime.The US Government says otherwise. And they have lots of guns and people with sticks that like to put people like you in cages. (http://www.usdoj.gov/crt/foia/tal712.txt)If they made a law about it(which you never did show the actual law), then it is certainly not constitutional.Do you really think that you are smarter and better educated in constitutional law than the lawyers who wrote the law and the Judges who enforce it? And as I wrote before, "Title II, applying to the States and local governments, rests upon Amendment XIV but Titles I and III of the ADA apply strictly to commerce and Congress is given the right to regulate commerce." As to the law itself; http://www.usdoj.gov/crt/ada/pubs/ada.txt, read it and weep. I can write anything that I want. If I am going to publish something, I don't have to write it in Braille, too, so what is the difference? Somebody that is blind can't read the publication. The law only applies to certain enterprises and commerce is one of them. Those little bumps on the ATM, that's Braille. Oh, and my way WILL work for the other 10%... I didn't write that one cannot use JavaScript, only that certain web swites cannot rely upon it.
AdamBrill
01-17-2003, 09:36 AM
Originally posted by Charles
The US Government says otherwise. And they have lots of guns and people with sticks that like to put people like you in cages.
Give me a break, Charles.
Originally posted by Charles
The law only applies to certain enterprises and commerce is one of them. Those little bumps on the ATM, that's Braille.
Well, if you have to make an online catalog useable by people with "certain disablilities", then what about printed catalogs? I haven't EVER seen somewhere to order a braille version of a catalog. Is there such a thing? And, if not, why not? Every company with "more than 14 employees" should have to make them, right? What's the difference?
WebSkater- What do you mean? I thought he only wanted to submit the form. Clicking the image does exactly the same thing as clicking a submit button. I must have missunderstood somewhere in there! ;)
Webskater
01-17-2003, 09:46 AM
Hello Adam
bodywise's second post said:
"There is a difference between what works and what is needed. The value is the whole point. This input statement is supposed to pass the variable ProductID which is the value.
I am really sytmied on this because I think I have run into design limtations of the stetement and the fact that there is no simple way of doing something quite simple:
Submitting dynamics images rather than the traditional (and silly submit buttons).
I want the images to be the submit vehicle that then pass the ProductID form POST variable."
As we have all expressed our opinions and offered our various solutions, I think the questioner may be getting confused by now. Have a look at his web page - it's just a typical page. 5 products. Click on a product to order. Click the image - submit the form - pass the productID. He wanted to pass the ProductID in the value attribute of an input tag of type image - but there isn't one. Now, I have a question. How do you quote other people's code in this forum?
Here's how to format your posts. http://forums.webdeveloper.com/misc.php?s=&action=bbcode
Charles
01-17-2003, 09:55 AM
Originally posted by AdamBrill
Well, if you have to make an online catalog useable by people with "certain disablilities", then what about printed catalogs? I haven't EVER seen somewhere to order a braille version of a catalog. Is there such a thing? And, if not, why not? Every company with "more than 14 employees" should have to make them, right? What's the difference?Do you really think that the ADA doesn't exist or that it doesn't have the force of law?From http://www.usdoj.gov/crt/ada/q&aeng02.htm:
Appropriate auxiliary aids and services may include services and devices such as qualified interpreters, assistive listening devices, notetakers, and written materials for individuals with hearing impairments; and qualified readers, taped texts, and Brailled or large print materials for individuals with vision impairments. ... The ADA does not require the provision of any auxiliary aid that would result in an undue burden or in a fundamental alteration in the nature of the goods or services provided by a public accommodation. However, the public accommodation is not relieved from the duty to furnish an alternative auxiliary aid, if available, that would not result in a fundamental alteration or undue burden. Both of these limitations are derived from existing regulations and caselaw under section 504 of the Rehabilitation Act and are to be determined on a case-by-case basis.[/b]In the case of a catalog if a Braille version is an undue burden then it would not be required. However, it's not clear that it is such a burden. Just because you haven't seen one doesn't mean that it doesn't exist. And just because everybody speeds doesn't mean that there aren't laws against it. In the case of a web site, it's just too easy to make the page accessible to get away with the "undue burden" argument.
The "more than 14 employees" applies to Title I, employment. If the employees don't have to use the catalog or the web site then Title I wouldn't apply if they had 100 employees. Title III applies even if there are no employees keeping in mind that From http://www.usdoj.gov/crt/ada/pubs/ada.txt
The term "commerce" means travel, trade, traffic, commerce, transportation, or communication (A) among the several States; (B) between any foreign country or any territory or possession and any State; or (C) between points in the same State but through another State or foreign country. That would apply to the Internet but not to every business.
bodywise
01-17-2003, 10:19 AM
Again, I am glad that this generated sufficient debate.
Nothing to the contrary, problems of these sort always seem to go back to "listen to what is the question, not what is it I want to listen to."
I made it quite clear that this was a loop and an array. The original statement make this very clear and I pointed to code indicating a series of objects not just one. Then I gave a few examples. What is presented here is only a "small" part of the site. Right now I have at least 50 products, so it is not 4 as surmised.
But eventually, I want to be able to scale up to 1000 products. That is the power of using a scripting language like ASP oir PHP which is database-based. So you can construct HTML pages on the fly. I am always looking for economy of code.
I will not engage in the the rather heated polemic and even accusations being bandied about. We are becoming a society where virtually everything is potentially illegal. I know only too well as a physician. More than you know. I thought that was different in Europe.
So the easiest solution was to use Webskaters solution but it requires a GET statement not a POST.
I still don't see any possibility of using an image statement as an input -- and there seems to be great arguement here about this.
If you look at Victoria's Secret site there is plenty of Javascript. Quite frankly, although quite savvy, I am not sure how to turn off the Javascript so that I think that 1 in 10 is generous. Maybe 1 in 100 or even 1 in 1000. And what about AOL where the whole site is "proprietary" to begin with. And why would you wnt to turn it off anyway?
Remember, in the end it is the end user that matters. That is your client
I greatly appreciate all the help ... but could do without accusations.
And, I agree inelegant is may not be a word (actually I'm not sure about that), but does describe what I am trying to convey. This is not the solution I desired. I don't like the buttons either.
Go look at the code for www.victoriasecret.com then just smile a little.
AdamBrill
01-17-2003, 10:19 AM
Charles, are you a lawyer? If not, how do you know so much about the law? :)
Originally posted by Charles
Do you really think that the ADA doesn't exist or that it doesn't have the force of law?
I didn't say that. I was just wondering why it applied to the internet and not anything else. Lets say that you have a HUGE company(Dell or Microsoft or something), they can just say that it will be too hard? I can't believe that that works for them. Another thing.
Originally posted by Charles
- I may be wrong here, but I believe that it's a crime to encourage other people to violate the law.
I think that is wrong. I think that is freedom of press again. Even though, you seem to be pretty good at understanding the law, so maybe there are exceptions to it! :) I certainly don't think that THAT would be constitutional, but that doesn't mean they didn't do it...
Charles
01-17-2003, 10:41 AM
Originally posted by bodywise
Go look at the code for www.victoriasecret.com then just smile a little. So, I'm looking at http://www2.victoriassecret.com/collection/index.cfm?rfnbr=316&cgnbr=OSSALCLOSWT and they are not using JavaScript with a form. They are simply using links with the form information appended to the URL a la a GET request. There's no form and no JavaScript involved. If you want a POST then have your server side script generate a separate form for each image and use hidden fields for your values. This is neither cutting edge nor very complicated.
And as for the number of JavaScript free people in the world, I didn't just pull that number out of the air. And I posted a link to the source. (http://www.thecounter.com/stats/2002/November/javas.php)