how to submit values to JavaScript using image selector

Recommend this page to a friend!

      Image Selector  >  All threads  >  how to submit values to JavaScript...  >  (Un) Subscribe thread alerts  
Subject:how to submit values to JavaScript...
Summary:submitting valve by getElementById
Messages:3
Author:ALEX
Date:2012-03-02 21:34:49
Update:2012-03-03 10:15:46
 

  1. how to submit values to JavaScript...   Reply   Report abuse  
Picture of ALEX ALEX - 2012-03-02 21:34:49
Hello webmasters Iam trying to submit values to java script using two pages "index.php" and "fonts.html".

here is the java script code that i have used in index.php

<script language=javascript>
var cp = new ColorPicker();
var fp = new FontPicker('window');

function pickFont(font) {
document.getElementById('fimg').src='http://example.com/im/font/' + font + '.png';
document.getElementById('fid').value=font;
}

if (document.getElementById('fid').value) {
pickfont(document.getElementById('fid').value);
}
</script>

the values should be submitted from "fonts.html" which has the code:

<body>
<p><form method=get action="/fonts.html" style="display:inline"><input type=submit name=cat value="Favorites"></form>
<div id="Favorites">
<A HREF="#" onClick="window.opener.FontPicker_pickFont(Times-Roman,window); return false;" STYLE="text-decoration:none;"><img alt="Times-Roman " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="http://www.example.com/im/font/Times-Roman.png"></a>
<A HREF="#" onClick="window.opener.FontPicker_pickFont(ariel,window); return false;" STYLE="text-decoration:none;"><img alt="ariel " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="http://www.example.com/im/font/font/ariel.png"></a>
</div>
</body>

When user opens index.php he will get a link when he clicks on the link he will be redirected to "fonts.html" where he gets an option to click on one of images "Times-Roman.png" and "ariel.png" .


Now what iam trying to do two things
1]when the user clicks on "Times-Roman.png". '('fimg').src' should get the location of "Times-Roman.png"

and

2]"('fid').value" should hold the value "Times-Roman.ttf"

I know this can be implemented by modifying "image selector" code ..can any one help me with this?? your response is appreciated...

  2. Re: how to submit values to JavaScript...   Reply   Report abuse  
Picture of Arturs Sosins Arturs Sosins - 2012-03-03 07:57:00 - In reply to message 1 from ALEX
Well it all depends on what really you want to accomplish.
If you want to allow user select the font and preview the font while selecting, then with Image select you can do something like this:

<p><select name='image' id='fonts'>
<option value='http://www.example.com/im/font/Times-Roman.png'>Times-Roman</option>
<option value='http://www.example.com/im/font/font/ariel.png'>ariel</option>
</select></p>
<script type="text/javascript" src="./image_selector.packed.js" ></script>
<script type="text/javascript">
var imgs = new image_selector("fonts",{
//width of images
width: 100,
//height of images
height: 100,
//change image on click
changeOnClick: true,
//hide original input
hideInput: true,
});
</script>

But I don't really see how it's related with your code.
If you want to accomplish things you wrote, then first you need to change pickFont function by adding ttf to fid (so youd have to pass only one value):

function pickFont(font) {
document.getElementById('fimg').src='http://example.com/im/font/' + font + '.png';
document.getElementById('fid').value=font+".ttf";
}

And then call this function from fonts.html and pass font name as string:

<A HREF="#" onClick="window.opener.pickFont('Times-Roman'); return false;" STYLE="text-decoration:none;"><img alt="Times-Roman " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="http://www.example.com/im/font/Times-Roman.png"></a>
<A HREF="#" onClick="window.opener.pickFont('ariel'); return false;" STYLE="text-decoration:none;"><img alt="ariel " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="http://www.example.com/im/font/font/ariel.png"></a>

  3. Re: how to submit values to JavaScript...   Reply   Report abuse  
Picture of ALEX ALEX - 2012-03-03 10:15:46 - In reply to message 2 from Arturs Sosins
Thanks alot for your reply Arturs ,you are just amazing 80% of my problem solved ..but i have two more questions.

1]what if my font files{.ttf files} are saved in different directories/folders lets assume my font files are saved in "http://www.example.com/im/folder" ,how to change the fonts location in that case???

2]If you notice "fonts.html" it has category "Favorites" ,Times-Roman and ariel are the elements belonging to category "Favorites".

<body>
<p><form method=get action="/fonts.html" style="display:inline"><input type=submit name=cat value="Favorites"></form>
<div id="Favorites">
<A HREF="#" onClick="window.opener.FontPicker_pickFont(Times-Roman,window); return false;" STYLE="text-decoration:none;"><img alt="Times-Roman " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="http://www.example.com/im/font/Times-Roman.png"></a>
<A HREF="#" onClick="window.opener.FontPicker_pickFont(ariel,window); return false;" STYLE="text-decoration:none;"><img alt="ariel " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="http://www.example.com/im/font/font/ariel.png"></a>
</div>
</body>

Iam planning to add more categories like "fun" , "general" and "others" .. my question is when the user clicks on "Favorites" it should only show elements within "Favorites" . and next when the user clicks on "fun" it should only show "fun" elements by hiding "Favorites elements" ...i mean to say it should hide the categories which are not clicked... i know this can be desghned using javascript but not sure .. how... please Arturs solve this problem you will be my 'GodFather' :}