Picture ID Form

  • James
  • Newbie
  • Newbie
  • User avatar
  • Posts: 10

Post 3+ Months Ago

Hi, just wondering if anyone can help me with this...


I want people have the ability to buy photographs off my website, the images will have a "Buy" button next to them. When this is clicked I want it to be re-directed to the "purchase" page where the photo ID is automatically placed into a form ready for the next stage.

Do I need to embed the picture ID somewhere into the "buy" button so the form on the second page can use something to collect the ID from?

I haven't a clue about how to do this, sorry if it's something thats piss-easy.

Cheers
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • b_heyer
  • Web Master
  • Web Master
  • User avatar
  • Posts: 4581
  • Loc: Maryland

Post 3+ Months Ago

Two ways:

Code: [ Select ]
<!----form button----->
<form action="buy.html?picture=1">

<!----link--->
<a href="buy.html?picture=1">Purchase</a>
  1. <!----form button----->
  2. <form action="buy.html?picture=1">
  3. <!----link--->
  4. <a href="buy.html?picture=1">Purchase</a>


Then just put this in the purchase form:

Code: [ Select ]
<input type='text' value='<? echo $picture; ?>'>


Eep I just realized I only knwo how to do it in php...but I am sure there is a way to do it with javascript, just don't know how... I guess you could try:

Code: [ Select ]
<input type='text' value='<script>document.write=picture</script>'>


I don't know if that will work. Basically you are sending the variable for the picture along with the URI (what is after the ? ).
  • James
  • Newbie
  • Newbie
  • User avatar
  • Posts: 10

Post 3+ Months Ago

Thanks for replying.

I put the href="buy.html?picture=1" link in the button, and that is gong through ok.

The problem is that instead of printing the picture ID in the form, the actual script is displayed like that-->

<script>document.write=picture</script>

any ideas?
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

To extract the picture number from the url you could add this to the head portion of your page:

Code: [ Select ]
<script language="javascript">
<!--
window.onload = getPicNum
function getPicNum()
{
    var url = document.location.search;
    pic=url.substring(url.indexOf("=")+1,url.length);
    document.getElementById("picture").value=pic;
}
//-->
</script>
  1. <script language="javascript">
  2. <!--
  3. window.onload = getPicNum
  4. function getPicNum()
  5. {
  6.     var url = document.location.search;
  7.     pic=url.substring(url.indexOf("=")+1,url.length);
  8.     document.getElementById("picture").value=pic;
  9. }
  10. //-->
  11. </script>


and then put id="picture" in the form tag where you want the number to appear. For example:

Code: [ Select ]
<input id="picture" type="text" value="">


This will only work as along as the value of the picture is the only one you are passing (like you have it now). Otherwise it will grab all the name/value pairs after the first equal sign and put them in the text box.
  • James
  • Newbie
  • Newbie
  • User avatar
  • Posts: 10

Post 3+ Months Ago

Thanks for clearing that up, i've now got it working.

The trouble i've found now is that it only enters that information into the first form, but not the other four below it.

http://www.jamesakers.com/paypal.html?pic=test

If you try to buy the 6x4 print it puts the ID in, but for the others it just comes up blank.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

If I understand correctly you want to give your customers the option to buy the same picture at different sizes, so you want the same value to show in all four of the fields. To do this you would need to give each a unique id (id values always must be unique or only the first will be recognized and the others ignored). You will also need to change the script, so that it takes the extra id's into account. The new script would look like this:
Code: [ Select ]
<script language="javascript">
<!--
window.onload = getPicNum
function getPicNum()
{
  var url = document.location.search;
  pic=url.substring(url.indexOf("=")+1,url.length);
  document.getElementById("size1").value=pic;
  document.getElementById("size2").value=pic;
  document.getElementById("size3").value=pic;
  document.getElementById("size4").value=pic; 
}
//-->
</script>
  1. <script language="javascript">
  2. <!--
  3. window.onload = getPicNum
  4. function getPicNum()
  5. {
  6.   var url = document.location.search;
  7.   pic=url.substring(url.indexOf("=")+1,url.length);
  8.   document.getElementById("size1").value=pic;
  9.   document.getElementById("size2").value=pic;
  10.   document.getElementById("size3").value=pic;
  11.   document.getElementById("size4").value=pic; 
  12. }
  13. //-->
  14. </script>


and then your fields would look something like this:
Code: [ Select ]
<input type="hidden" value="" id="size1" name="item_name">
<input type="hidden" value="" id="size2" name="item_name">
<input type="hidden" value="" id="size3" name="item_name">
<input type="hidden" value="" id="size4" name="item_name">
  1. <input type="hidden" value="" id="size1" name="item_name">
  2. <input type="hidden" value="" id="size2" name="item_name">
  3. <input type="hidden" value="" id="size3" name="item_name">
  4. <input type="hidden" value="" id="size4" name="item_name">

You could call them picture1, picture2, etc. but I think that would be a little confusing since it's the same picture at different sizes, so I used "size" instead.

There is a drawback to doing it this way because the user must have javascript enabled for the value to be inserted . You might want to check with your web hosting company to see if they offer PHP as it would be easier to do and wouldn't be dependent on the user's browser setup. Only a small percentage of people viewing my site have javascript disabled, but if you have the option of using PHP it wouldn't be a factor at all.
  • James
  • Newbie
  • Newbie
  • User avatar
  • Posts: 10

Post 3+ Months Ago

Thanks Rich that worked a treat.

My webhost does support php, but I don't have a clue of how to script it.

I'll stick with that for now and develop it as my knowlege increases.

Cheers again.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I'm glad it's working. You might want to consider adding a noscript tag for your users who have javascript disabled, to they will know that they need to turn it back on for the form to work properly. I would put something like this just inside the opening body tag.
Code: [ Select ]
<noscript>Please enable javascript for this form to work properly</noscript>


PHP is actually much easier to use than javascript for this kind of thing though, because it is designed to work with form-type input, so there is no need for a special script to extract the value. You can just echo it where you need it. To use the PHP method just change the form fields to:

Code: [ Select ]
<input type="hidden" value="<? if(isset($pic)) echo $pic; ?>" name="item_name">


A couple of thing to keep in mind:

The file extension must be ".php" and not ".html" (some hosts may use other extensions, but all that I've worked with recognize .php)

Make sure you remove the javascript function when you test it, so they don't conflict, and you won't need the individual id's anymore.
  • James
  • Newbie
  • Newbie
  • User avatar
  • Posts: 10

Post 3+ Months Ago

Oh fantastic...thats so much simpler!

I've put the php in now and its working great.

Thanks for all your help Rich.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

No problem. Glad it worked out for you. :D
  • SniperDevil
  • Beginner
  • Beginner
  • User avatar
  • Posts: 42

Post 3+ Months Ago

If you are using Linux, and therefore most likely Apache, and you have access to httpd.conf, the main configuration file for Apache, you can add whatever extensions you want under the AddModule directives somewhere in the middle of the file... it's really EZ; for example, I could make a php file known as <file>.robert with a little bit of tweaking!

This is especially useful if, for some reason, you don't want people to know what language you coded an app in. (surprised Microsoft isn't doing this; then again, they are using ASP)

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: Bigwebmaster and 93 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.