Submit Button for html

forms + dropdownlist + javascript

Page 1 of 1

9 Replies - 752 Views - Last Post: 11 February 2010 - 03:41 AM

#1 useletters

D.I.C Head

Reputation: -1

Posts: 111
Joined: 20-November 08

Submit Button for html

Posted 07 February 2010 - 05:19 AM

here's the thing. i want to make a currency converter that has USD as the main currency, and it will convert to the currency that is selected on the dropdownlist,. but i don't know how to do that. here's my code.

<html>
<head><title>
Form
</title></head>
<body>
<form>
<h1>Currency Converter</h1>
USD to:
<select name="currency">
<option value="eur">Euro</option>
<option value="thb">Thai Bhat</option>
<option value="php">Philippine Peso</option>
<option value="hkd">Hong Kong Dollar</option>
<option value="sar">Saudi Arabia Riyal</option>
</select>
<br />
Input USD: <input type=textbox name="input" size=13>
<br />
Converted Value: <input type=textbox name="value" size=7>
<br />
<input type=button name="convert" value="Convert">
</select>
</form>
</body>
</html>

and after reading some things that is related to this. i came-up with this things.

<html>
<head><title>
Form
</title>
<script type="text/javascript">
function convert()
{
var usd,eur,php,thb,hkd,sar;
usd = parseInt(document.form1.inp.value);
eur = (usd*0.73);
document.form1.eur.value = eur;
php = (usd*46.60);
document.form1.php.value = php;
thb = (usd*33.25);
document.form1.thb.value = thb;
hkd = (usd*7.8);
document.form1.hkd.value = hkd;
sar = (usd*4.00);
document.form1.sar.value = sar;
}
</script>
</head>
<body>
<form method="post" name="form1" onsubmit="convert();return false;">
<h1>Currency Converter</h1>
<input type="textbox" name="inp" size="13" value="1" /> USD
<br />
is
<br />
<input type="textbox" name="eur" size="13" value="0.73" /> Euro
<br />
<input type="textbox" name="php" size="13" value="46.6" /> Philippine Peso
<br />
<input type="textbox" name="thb" size="13" value="33.25" /> Thai Bhat
<br />
<input type="textbox" name="hkd" size="13" value="7.8" /> Hong Kong Dollar
<br />
<input type="textbox" name="sar" size="13" value="4" /> Saudi Arabia Riyal
<br />
<input type="button" value="Convert" onclick="convert()" />
</select>
</form>
</body>
</html>

now. is there anyone could help me? thanks in advance. and btw. sorry for posting another thread. my first thread's title is not right.please delete it. thnx.

This post has been edited by useletters: 07 February 2010 - 05:36 AM

Is This A Good Question/Topic? 0

Replies To: Submit Button for html

#2 psyking

D.I.C Head

Reputation: 20

Posts: 165
Joined: 17-January 10

Re: Submit Button for html

Posted 07 February 2010 - 01:37 PM

useletters said:

<html>
<head><title>
Form
</title></head>
<body>
<form>
<h1>Currency Converter</h1>
USD to:
<select name="currency">
<option value="eur">Euro</option>
<option value="thb">Thai Bhat</option>
<option value="php">Philippine Peso</option>
<option value="hkd">Hong Kong Dollar</option>
<option value="sar">Saudi Arabia Riyal</option>
</select>
<br />
Input USD: <input type=textbox name="input" size=13>
<br />
Converted Value: <input type=textbox name="value" size=7>
<br />
<input type=button name="convert" value="Convert">
</select>
</form>
</body>
</html>

If you still want to use the select box, you could use this Javascript code:

<script type="text/javascript">
function convertCurrency(selVal){
     var cur;
     if (selVal=="eur"){ cur=document.getElementById("usd_input").value * (0.73); }
     if (selVal=="thb"){ cur=document.getElementById("usd_input").value * (33.25); }
     if (selVal=="php"){ cur=document.getElementById("usd_input").value * (46.60); }
     if (selVal=="hkd"){ cur=document.getElementById("usd_input").value * (7.80); }
     if (selVal=="sar"){ cur=document.getElementById("usd_input").value * (4.00); }
     document.getElementById("converted_input").vaue = cur.toFixed(2);
}
</script>

The select option would need to have the new command onchange="javascript:convertCurrency(this.value);" and give the text inputs an id.

Was This Post Helpful? 0

#3 useletters

D.I.C Head

Reputation: -1

Posts: 111
Joined: 20-November 08

Re: Submit Button for html

Posted 07 February 2010 - 05:48 PM

psyking, on 08 February 2010 - 03:37 AM, said:

<script type="text/javascript">
function convertCurrency(selVal){
     var cur;
     if (selVal=="eur"){ cur=document.getElementById("usd_input").value * (0.73); }
     if (selVal=="thb"){ cur=document.getElementById("usd_input").value * (33.25); }
     if (selVal=="php"){ cur=document.getElementById("usd_input").value * (46.60); }
     if (selVal=="hkd"){ cur=document.getElementById("usd_input").value * (7.80); }
     if (selVal=="sar"){ cur=document.getElementById("usd_input").value * (4.00); }
     document.getElementById("converted_input").vaue = cur.toFixed(2);
}
</script>

The select option would need to have the new command onchange="javascript:convertCurrency(this.value);" and give the text inputs an id.

sir thanks for this. i had an idea on it and try to understand how to put it in the html code. so i came-up to this codes.

<html>
<head><title>
Form
</title>
<script type="text/javascript">
function convertCurrency(selVal)
{
     var cur;
     if (selVal=="eur"){ cur=document.getElementById("usd").value * (0.73); }
     if (selVal=="thb"){ cur=document.getElementById("usd").value * (33.25); }
     if (selVal=="php"){ cur=document.getElementById("usd").value * (46.60); }
     if (selVal=="hkd"){ cur=document.getElementById("usd").value * (7.80); }
     if (selVal=="sar"){ cur=document.getElementById("usd").value * (4.00); }         
}
function convert()
{
document.getElementById.value("converted_input") = cur.toFixed(2);
}
</script>
</head>
<body>
<form onsubmit="convert();return false;">
<h1>Currency Converter</h1>
USD to:
<select name="currency" onchange="javascript:convertCurrency(this.value);">
<option value="eur">Euro</option>
<option value="thb">Thai Bhat</option>
<option value="php">Philippine Peso</option>
<option value="hkd">Hong Kong Dollar</option>
<option value="sar">Saudi Arabia Riyal</option>
</select>
<br />
Input USD: <input id="usd" type=textbox size=13 />
<br />
Converted Value: <input id="converted_input" type=textbox size=7 />
<br />
<input type=button name="convert_input" value="Convert" onclick="convert()">
</select>
</form>
</body>
</html>

but it still doesn't work when i click the convert button.
btw. i modified your script sir. just the name and add another function.
now. how could i make Convert button working?... and what is the (selVal) on the function convertCurrency(selVal) and the .toFixed(2) on the cur.toFixed(2).

Was This Post Helpful? 0

#4 psyking

D.I.C Head

Reputation: 20

Posts: 165
Joined: 17-January 10

Re: Submit Button for html

Posted 07 February 2010 - 07:57 PM

useletters, on 07 February 2010 - 04:48 PM, said:

psyking, on 08 February 2010 - 03:37 AM, said:

<script type="text/javascript">
function convertCurrency(selVal){
     var cur;
     if (selVal=="eur"){ cur=document.getElementById("usd_input").value * (0.73); }
     if (selVal=="thb"){ cur=document.getElementById("usd_input").value * (33.25); }
     if (selVal=="php"){ cur=document.getElementById("usd_input").value * (46.60); }
     if (selVal=="hkd"){ cur=document.getElementById("usd_input").value * (7.80); }
     if (selVal=="sar"){ cur=document.getElementById("usd_input").value * (4.00); }
     document.getElementById("converted_input").vaue = cur.toFixed(2);
}
</script>

The select option would need to have the new command onchange="javascript:convertCurrency(this.value);" and give the text inputs an id.

sir thanks for this. i had an idea on it and try to understand how to put it in the html code. so i came-up to this codes.

<html>
<head><title>
Form
</title>
<script type="text/javascript">
function convertCurrency(selVal)
{
     var cur;
     if (selVal=="eur"){ cur=document.getElementById("usd").value * (0.73); }
     if (selVal=="thb"){ cur=document.getElementById("usd").value * (33.25); }
     if (selVal=="php"){ cur=document.getElementById("usd").value * (46.60); }
     if (selVal=="hkd"){ cur=document.getElementById("usd").value * (7.80); }
     if (selVal=="sar"){ cur=document.getElementById("usd").value * (4.00); }         
}
function convert()
{
document.getElementById.value("converted_input") = cur.toFixed(2);
}
</script>
</head>
<body>
<form onsubmit="convert();return false;">
<h1>Currency Converter</h1>
USD to:
<select name="currency" onchange="javascript:convertCurrency(this.value);">
<option value="eur">Euro</option>
<option value="thb">Thai Bhat</option>
<option value="php">Philippine Peso</option>
<option value="hkd">Hong Kong Dollar</option>
<option value="sar">Saudi Arabia Riyal</option>
</select>
<br />
Input USD: <input id="usd" type=textbox size=13 />
<br />
Converted Value: <input id="converted_input" type=textbox size=7 />
<br />
<input type=button name="convert_input" value="Convert" onclick="convert()">
</select>
</form>
</body>
</html>

Oops! Sorry, I didn't mean the select to have the onchange value of convertCurrency(selVal)! Sorry. The (selVal) on the function convertCurrency(selVal) is the value on the selected option on the drop down menu. The .toFixed(2) on the cur.toFixed(2) rounds the value to 2 decimal places. To get it to work, instead of creating another function, you can do this:

<html>
<head><title>
Form
</title>
<script type="text/javascript">
function convertCurrency(selVal)
{
   var cur;
   if (selVal=="eur"){ cur=document.getElementById("usd").value * (0.73); }
   if (selVal=="thb"){ cur=document.getElementById("usd").value * (33.25); }
   if (selVal=="php"){ cur=document.getElementById("usd").value * (46.60); }
   if (selVal=="hkd"){ cur=document.getElementById("usd").value * (7.80); }
   if (selVal=="sar"){cur=document.getElementById("usd").value*(4.00);}         
   document.getElementById.value("converted_input") = cur.toFixed(2);
}
</script>
</head>
<body>
<form onsubmit="javascript:convertCurrency(document.getElementById('currency').value);">
<h1>Currency Converter</h1>
USD to:
<select id="currency">
<option value="eur">Euro</option>
<option value="thb">Thai Bhat</option>
<option value="php">Philippine Peso</option>
<option value="hkd">Hong Kong Dollar</option>
<option value="sar">Saudi Arabia Riyal</option>
</select>
<br />
Input USD: <input id="usd" type='text' size='13' />
<br />
Converted Value: <input id="converted_input" type='text' size='7' />
<br />
<input type=button name="convert_input" value="Convert" onclick="javascript:convertCurrency(document.getElementById('currency').value);">
</select>
</form>
</body>
</html>

That should fix the problem.

Was This Post Helpful? 0

#5 useletters

D.I.C Head

Reputation: -1

Posts: 111
Joined: 20-November 08

Re: Submit Button for html

Posted 08 February 2010 - 04:53 AM

psyking, on 08 February 2010 - 09:57 AM, said:

<html>
<head><title>
Form
</title>
<script type="text/javascript">
function convertCurrency(selVal)
{
   var cur;
   if (selVal=="eur"){ cur=document.getElementById("usd").value * (0.73); }
   if (selVal=="thb"){ cur=document.getElementById("usd").value * (33.25); }
   if (selVal=="php"){ cur=document.getElementById("usd").value * (46.60); }
   if (selVal=="hkd"){ cur=document.getElementById("usd").value * (7.80); }
   if (selVal=="sar"){cur=document.getElementById("usd").value*(4.00);}         
   document.getElementById.value("converted_input") = cur.toFixed(2);
}
</script>
</head>
<body>
<form onsubmit="javascript:convertCurrency(document.getElementById('currency').value);">
<h1>Currency Converter</h1>
USD to:
<select id="currency">
<option value="eur">Euro</option>
<option value="thb">Thai Bhat</option>
<option value="php">Philippine Peso</option>
<option value="hkd">Hong Kong Dollar</option>
<option value="sar">Saudi Arabia Riyal</option>
</select>
<br />
Input USD: <input id="usd" type='text' size='13' />
<br />
Converted Value: <input id="converted_input" type='text' size='7' />
<br />
<input type=button name="convert_input" value="Convert" onclick="javascript:convertCurrency(document.getElementById('currency').value);">
</select>
</form>
</body>
</html>

That should fix the problem.

sir. still isn't working. and again. i've modified the code you gave fiding a way to make it work. but still isn't working.

here's the modified code. just bit of em...

<html>
<head><title>
Form
</title>
<script type="text/javascript">
function convertCurrency(selVal)
{
   var cur;
   if (selVal=="eur"){ cur=document.getElementById("usd").value * (0.73); }
   if (selVal=="thb"){ cur=document.getElementById("usd").value * (33.25); }
   if (selVal=="php"){ cur=document.getElementById("usd").value * (46.60); }
   if (selVal=="hkd"){ cur=document.getElementById("usd").value * (7.80); }
   if (selVal=="sar"){ cur=document.getElementById("usd").value * (4.00);}         
   document.getElementById.value("converted_input") = cur.toFixed(2);
}
</script>
</head>
<body>
<form onsubmit="convertCurrency(document.getElementById("currency");return false;" >
<h1>Currency Converter</h1>
USD to:
<select id="currency">
<option value="eur">Euro</option>
<option value="thb">Thai Bhat</option>
<option value="php">Philippine Peso</option>
<option value="hkd">Hong Kong Dollar</option>
<option value="sar">Saudi Arabia Riyal</option>
</select>
<br />
Input USD: <input id="usd" type="text" size="13" />
<br />
Converted Value: <input id="converted_input" type="text" size="7" />
<br />
<input type="button" name="convert_input" value="Convert" onclick="convertCurrency(document.getElementById("currency").value);">
</select>
</form>
</body>
</html>

Was This Post Helpful? 0

#6 useletters

D.I.C Head

Reputation: -1

Posts: 111
Joined: 20-November 08

Re: Submit Button for html

Posted 09 February 2010 - 06:56 AM

here's my new code with eval() on it. but still isn't working...

<html>
<head><title>
Form
</title>
<script type="text/javascript">
function convertCurrency(selVal)
{
   var cur;
   if (selVal=="eur"){ eval(document.getElementById("usd").value * (0.73)) = cur ; }
   if (selVal=="thb"){ eval(document.getElementById("usd").value * (33.25)) = cur ; }
   if (selVal=="php"){ eval(document.getElementById("usd").value * (46.60)) = cur ; }
   if (selVal=="hkd"){ eval(document.getElementById("usd").value * (7.80)) = cur ; }
   if (selVal=="sar"){ eval(document.getElementById("usd").value * (4.00)) = cur ;}         
   document.getElementById.value("converted_input") = cur.toFixed(2);
}
</script>
</head>
<body>
<form name="form1" onsubmit="convertCurrency(document.form1.currency_name.value);return false;" >
<h1>Currency Converter</h1>
USD to:
<select name="currency_name" id="currency">
<option value="eur">Euro</option>
<option value="thb">Thai Bhat</option>
<option value="php">Philippine Peso</option>
<option value="hkd">Hong Kong Dollar</option>
<option value="sar">Saudi Arabia Riyal</option>
</select>
<br />
Input USD: <input id="usd" type="text" size="13" />
<br />
Converted Value: <input id="converted_input" type="text" size="7" />
<br />
<input type="button" name="convert_input" value="Convert" onclick="convertCurrency(document.form1.currency_name.value);">
</form>
</body>
</html>

Was This Post Helpful? 0

#7 psyking

D.I.C Head

Reputation: 20

Posts: 165
Joined: 17-January 10

Re: Submit Button for html

Posted 10 February 2010 - 03:27 PM

useletters, on 09 February 2010 - 05:56 AM, said:

here's my new code with eval() on it. but still isn't working...

<html>
<head><title>
Form
</title>
<script type="text/javascript">
function convertCurrency(selVal)
{
   var cur;
   if (selVal=="eur"){ eval(document.getElementById("usd").value * (0.73)) = cur ; }
   if (selVal=="thb"){ eval(document.getElementById("usd").value * (33.25)) = cur ; }
   if (selVal=="php"){ eval(document.getElementById("usd").value * (46.60)) = cur ; }
   if (selVal=="hkd"){ eval(document.getElementById("usd").value * (7.80)) = cur ; }
   if (selVal=="sar"){ eval(document.getElementById("usd").value * (4.00)) = cur ;}         
   document.getElementById.value("converted_input") = cur.toFixed(2);
}
</script>
</head>
<body>
<form name="form1" onsubmit="convertCurrency(document.form1.currency_name.value);return false;" >
<h1>Currency Converter</h1>
USD to:
<select name="currency_name" id="currency">
<option value="eur">Euro</option>
<option value="thb">Thai Bhat</option>
<option value="php">Philippine Peso</option>
<option value="hkd">Hong Kong Dollar</option>
<option value="sar">Saudi Arabia Riyal</option>
</select>
<br />
Input USD: <input id="usd" type="text" size="13" />
<br />
Converted Value: <input id="converted_input" type="text" size="7" />
<br />
<input type="button" name="convert_input" value="Convert" onclick="convertCurrency(document.form1.currency_name.value);">
</form>
</body>
</html>

I always forget that you can't get the value of a drop down box as easily as

this.value

. To fix that, change the onclick function in the button to:

convertCurrency(document.getElementById('currency').options[document.getElementById('currency').selectedIndex].value);

in the function convertCurrency(selVal), change the last line to

document.getElementById("converted_input").value = cur.toFixed(2);

This should fix the bugs in the code.

Was This Post Helpful? 0

#8 useletters

D.I.C Head

Reputation: -1

Posts: 111
Joined: 20-November 08

Re: Submit Button for html

Posted 10 February 2010 - 07:30 PM

psyking, on 11 February 2010 - 05:27 AM, said:

useletters, on 09 February 2010 - 05:56 AM, said:

here's my new code with eval() on it. but still isn't working...

<html>
<head><title>
Form
</title>
<script type="text/javascript">
function convertCurrency(selVal)
{
   var cur;
   if (selVal=="eur"){ eval(document.getElementById("usd").value * (0.73)) = cur ; }
   if (selVal=="thb"){ eval(document.getElementById("usd").value * (33.25)) = cur ; }
   if (selVal=="php"){ eval(document.getElementById("usd").value * (46.60)) = cur ; }
   if (selVal=="hkd"){ eval(document.getElementById("usd").value * (7.80)) = cur ; }
   if (selVal=="sar"){ eval(document.getElementById("usd").value * (4.00)) = cur ;}         
   document.getElementById.value("converted_input") = cur.toFixed(2);
}
</script>
</head>
<body>
<form name="form1" onsubmit="convertCurrency(document.form1.currency_name.value);return false;" >
<h1>Currency Converter</h1>
USD to:
<select name="currency_name" id="currency">
<option value="eur">Euro</option>
<option value="thb">Thai Bhat</option>
<option value="php">Philippine Peso</option>
<option value="hkd">Hong Kong Dollar</option>
<option value="sar">Saudi Arabia Riyal</option>
</select>
<br />
Input USD: <input id="usd" type="text" size="13" />
<br />
Converted Value: <input id="converted_input" type="text" size="7" />
<br />
<input type="button" name="convert_input" value="Convert" onclick="convertCurrency(document.form1.currency_name.value);">
</form>
</body>
</html>

I always forget that you can't get the value of a drop down box as easily as

this.value

. To fix that, change the onclick function in the button to:

convertCurrency(document.getElementById('currency').options[document.getElementById('currency').selectedIndex].value);

in the function convertCurrency(selVal), change the last line to

document.getElementById("converted_input").value = cur.toFixed(2);

This should fix the bugs in the code.

>> here's the new modified code(again haha)

<html>
<head><title>
Form
</title>
<script type="text/javascript">
function convertCurrency(selVal)
{
   var cur;
   if (selVal=="eur"){ eval(document.getElementById("usd").value * (0.73)) = cur ; }
   if (selVal=="thb"){ eval(document.getElementById("usd").value * (33.25)) = cur ; }
   if (selVal=="php"){ eval(document.getElementById("usd").value * (46.60)) = cur ; }
   if (selVal=="hkd"){ eval(document.getElementById("usd").value * (7.80)) = cur ; }
   if (selVal=="sar"){ eval(document.getElementById("usd").value * (4.00)) = cur ;}         
   document.getElementById("converted_input").value = cur.toFixed(2);
}
</script>
</head>
<body>
<form method="post" name="form1" onsubmit="convertCurrency(document.getElementById('currency').options[document.getElementById('currency').selectedIndex].value);return false;" >
<h1>Currency Converter</h1>
USD to:
<select name="currency_name" id="currency">
<option value="eur">Euro</option>
<option value="thb">Thai Bhat</option>
<option value="php">Philippine Peso</option>
<option value="hkd">Hong Kong Dollar</option>
<option value="sar">Saudi Arabia Riyal</option>
</select>
<br />
Input USD: <input id="usd" type="text" size="13" />
<br />
Converted Value: <input id="converted_input" type="text" size="7" />
<br />
<input type="button" name="convert_input" value="Convert" onclick="convertCurrency(document.getElementById('currency').options[document.getElementById('currency').selectedIndex].value);">
</form>
</body>
</html>

i've changed the onclick of the convert button and the onsubmit of the form to the codes you gave. but still isn't working....

convertCurrency(document.getElementById('currency').options[document.getElementById('currency').selectedIndex].value)

Was This Post Helpful? 0

#9 psyking

D.I.C Head

Reputation: 20

Posts: 165
Joined: 17-January 10

Re: Submit Button for html

Posted 10 February 2010 - 08:13 PM

I got this code to work for me:

<html>
<head><title>
Form
</title>
<script type="text/javascript">
function convertCurrency(selVal)
{
   var cur,usd=document.getElementById("usd").value;
   if (selVal=="eur"){ cur = usd * 0.73; }
   if (selVal=="thb"){ cur = usd * 33.25; }
   if (selVal=="php"){ cur = usd * 46.60; }
   if (selVal=="hkd"){ cur = usd * 7.80; }
   if (selVal=="sar"){ cur = usd * 4.00;}         
   document.getElementById("converted_input").value = cur.toFixed(2);
}
</script>
</head>
<body>
<form name="form1" action="convertCurrency(document.form1.currency_name.value);return false;" >
<h1>Currency Converter</h1>
USD to:
<select name="currency_name" id="currency">
<option value="eur">Euro</option>
<option value="thb">Thai Bhat</option>
<option value="php">Philippine Peso</option>
<option value="hkd">Hong Kong Dollar</option>
<option value="sar">Saudi Arabia Riyal</option>
</select>
<br />
Input USD: <input id="usd" type="text" size="13" />
<br />
Converted Value: <input id="converted_input" type="text" size="7" />
<br />
<input type="button" name="convert_input" value="Convert" onclick="convertCurrency(document.form1.currency_name.value);">
</form>
</body>
</html>

Was This Post Helpful? 0

#10 useletters

D.I.C Head

Reputation: -1

Posts: 111
Joined: 20-November 08

Re: Submit Button for html

Posted 11 February 2010 - 03:41 AM

you've got it right psyking!! THANKS FOR YOUR HELP! :^: :^: :genius:

Was This Post Helpful? 0

Page 1 of 1

Submit Button for html

forms + dropdownlist + javascript

9 Replies - 752 Views - Last Post: 11 February 2010 - 03:41 AM

#1 useletters

Submit Button for html

Replies To: Submit Button for html

#2 psyking

Re: Submit Button for html

#3 useletters

Re: Submit Button for html

#4 psyking

Re: Submit Button for html

#5 useletters

Re: Submit Button for html

#6 useletters

Re: Submit Button for html

#7 psyking

Re: Submit Button for html

#8 useletters

Re: Submit Button for html

#9 psyking

Re: Submit Button for html

#10 useletters

Re: Submit Button for html

General Discussion

Programming Help

Web Development

Follow & Share

Give It A Try!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing