Jump to content
jiyeonnie

[Javascript] HTML5 Form to generate answer

Recommended Posts

Hello people, i need help on my HTML5 Form with javascript. I have been looking over and over at my textbook as reference to do the scripting. [some with google] However, i dont seem to be able to generate a answer out from my codes. Does anyone know why and how i can fix it?Your help is deeply appreciated! Thank you! Here are my codes <script type="text/javascript"> function CalculateMEPS() { var amt = document.getElementsByName('mepsAMT').value; var bank = document.getElementsByName('bank').value; var selectedbank = document.getElementsByName('bank').options[bank.selectedIndex].value; if (selectedbank == "DBS" || selectedbank == "OCBC" || selectedbank == "UOB") { document.getElementsByName('mepsCost').value = (amt * 0.003); } else if (selectedbank == "HSBC" || selectedbank == "SChart") { document.getElementsByName('mepsCost').value = (amt * 0.005); } else { document.getElementsByName('mepsCost').value = (amt * 0.007); } } </script> <form name="mepsCharge" action="" method="post"><fieldset><legend>Charges for MEPS</legend><label for="Amount">Amount Transferred:</label><input type="text" name="mepsAMT" id="mepsAMT" size="16" maxlength="8" /> <label for="Bank">Name of Recieving Bank</label> <select size="1" name="bank" id="bank"> <option value="DBS">DBS/POSB Bank</option> <option value="OCBC">OCBC Bank</option> <option value="UOB">UOB Bank</option> <option value="HSBC">HSBC Bank</option> <option value="SChart">Standard Chartered Bank</option> <option value="CITI">CitiBank</option> </select> <input type="button" name="Calculate" value="Calculate" onclick="CalculateMEPS()" /> <label for="cost">Total Cost of Transfer</label><input type="text" name="mepsCost" size="16"/></fieldset></form>

Share this post


Link to post
Share on other sites

I would suggest instead of getElementsByTagName(), to use getElementById() and see if you get the results you're intending to get.

Share this post


Link to post
Share on other sites

Hi jiyeonnie, I would suggest you to reach / contact dsonesuk or Ingolme or justsomeguy. dsonesuk = http://w3schools.inv...?showuser=29663Ingolme = http://w3schools.inv...?showuser=18212justsomeguy = http://w3schools.inv...p?showuser=4190

Edited by creative1977

Share this post


Link to post
Share on other sites

IF you are going to use ByName you have to add [0] after defining the name to target specific named object, in this case it is only one, but if radio, checkbox it could be many with identical names so your script with a bit adjustment

  function CalculateMEPS() {var amt = document.getElementsByName('mepsAMT')[0].value;var bank = document.getElementsByName('bank')[0];var selectedbank = bank.options[bank.selectedIndex].value; if (selectedbank == "DBS" || selectedbank == "OCBC" || selectedbank == "UOB") {document.getElementsByName('mepsCost')[0].value = (amt * 0.003);}else if (selectedbank == "HSBC" || selectedbank == "SChart") {document.getElementsByName('mepsCost')[0].value = (amt * 0.005);}else {document.getElementsByName('mepsCost')[0].value = (amt * 0.007);}}

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites
IF you are going to use ByName you have to add [0] after defining the name to target specific named object, in this case it is only one, but if radio, checkbox it could be many with identical names so your script with a bit adjustment
  function CalculateMEPS() {var amt = document.getElementsByName('mepsAMT')[0].value;var bank = document.getElementsByName('bank')[0];var selectedbank = bank.options[bank.selectedIndex].value; if (selectedbank == "DBS" || selectedbank == "OCBC" || selectedbank == "UOB") {document.getElementsByName('mepsCost')[0].value = (amt * 0.003);}else if (selectedbank == "HSBC" || selectedbank == "SChart") {document.getElementsByName('mepsCost')[0].value = (amt * 0.005);}else {document.getElementsByName('mepsCost')[0].value = (amt * 0.007);}}

Hi jiyeonnie, I would suggest you to reach / contact dsonesuk or Ingolme or justsomeguy. dsonesuk = http://w3schools.inv...?showuser=29663Ingolme = http://w3schools.inv...?showuser=18212justsomeguy = http://w3schools.inv...p?showuser=4190
I would suggest instead of getElementsByTagName(), to use getElementById() and see if you get the results you're intending to get.
Thank you everyone! Thanks for your suggestion and help! My codes are working well now! Cheers! :)

Share this post


Link to post
Share on other sites
Thank you everyone!Thanks for your suggestion and help! My codes are working well now! Cheers! :)
Hi jiyeonnie,That's Great :) Congratulations! I am happy for you. Could you please show me your link? I would like to see it :) By the way I request you to please read the following Thread Carefully and share your Thoughts, Comments, Feedback and Willingness.http://w3schools.invisionzone.com/index.php?showtopic=43240I hope you received my Private Message?

Share this post


Link to post
Share on other sites

Hey, i tried doing the codes again and i found another problem. For my radio buttons, only my first radio button ( Less than 20) Is not working. However, the second and third radio button is working well. I Checked and the wording are actually same. :o <script type="text/javascript"> function CalculateSO() { var amt = document.getElementsByName('soAMT')[0].value; var bank = document.getElementsByName('bank')[0]; var selectedbank = bank.options[bank.selectedIndex].value; if (selectedbank == "DBS" || selectedbank == "OCBC" || selectedbank == "UOB") { if (document.getElementById("less20").checked == true) { document.getElementByName("soCost")[0].value = (amt * 0.010); } else if (document.getElementById("21-50").checked == true) { document.getElementsByName("soCost")[0].value = (amt * 0.015); } else { document.getElementsByName("soCost")[0].value = (amt * 0.020); } } else if (selectedbank == "HSBC" || selectedbank == "SChart") { if (document.getElementById("less20").checked == true){ document.getElementByName("soCost")[0].value = (amt * 0.020); } else if (document.getElementById("21-50").checked == true){ document.getElementsByName("soCost")[0].value = (amt * 0.025); } else { document.getElementsByName("soCost")[0].value = (amt * 0.030); } } else{ if (document.getElementById("less20").checked == true){ document.getElementByName("soCost")[0].value = (amt * 0.025); } else if (document.getElementById("21-50").checked == true) { document.getElementsByName("soCost")[0].value = (amt * 0.030); } else{ document.getElementsByName("soCost")[0].value = (amt * 0.035); } } } </script> <form name="soCharge" action="" method="post"> <fieldset> <legend>Charges for Standing Order</legend> <dl> <dt><label for="Amount">Amount Transferred:</label></dt> <dd><input type="number" name="soAMT" id="soAMT" size="16" maxlength="8" placeholder="Amount in SGD" step="1000"/></dd> </dl> <dl> <dt><label for="Bank">Name of Recieving Bank</label></dt> <dd> <select size="1" name="bank" id="bank"> <option value="DBS">DBS/POSB Bank</option> <option value="OCBC">OCBC Bank</option> <option value="UOB">UOB Bank</option> <option value="HSBC">HSBC Bank</option> <option value="SChart">Standard Chartered Bank</option> <option value="CITI">CitiBank</option> </select> </dd> </dl> <dl> <dt><label for="people">Number of Standing orders</label></dt> <dd> <input type="radio" value="less20" name="people" id="less20"/> Below 20 <input type="radio" value="21-50" name="people" id="21-50"/> 21-50 <input type="radio" value="more51" name="people" id="more51"/> Above 51 </dd> </dl> <dl> <dt></dt> <dd><input type="button" name="Calculate" value=" Calculate " onclick="CalculateSO()" /> <input type="reset" name="reset" value=" Reset "/></dd> </dl> <dl> <dt><label for="cost">Total Cost of Transfer</label></dt> <dd><input type="text" name="soCost" size="16"/></dd> </dl> </fieldset> </form>

Share this post


Link to post
Share on other sites

Hi jiyeonnie,You need to wait untill dsonesuk or someone pop-up with their comment. Just keep your fingers crossed. So, did you visit that link to read it?

Share this post


Link to post
Share on other sites
I Checked and the wording are actually same.
if (document.getElementById("less20").checked == true){document.getElementByName("soCost")[0].value = (amt * 0.020);}else if (document.getElementById("21-50").checked == true){document.getElementsByName("soCost")[0].value = (amt * 0.025);} LOOK closer Edited by dsonesuk

Share this post


Link to post
Share on other sites
if (document.getElementById("less20").checked == true){document.getElementByName("soCost")[0].value = (amt * 0.020);}else if (document.getElementById("21-50").checked == true){document.getElementsByName("soCost")[0].value = (amt * 0.025);} LOOK closer
>.< I starred at it for quite some time and still dont get it.. omg. :( *Edit! I found it >.< I got an extra 's' on the element!!! Omg ~_~ Thanks so much again! Edited by jiyeonnie

Share this post


Link to post
Share on other sites

Hi jiyeonnie,Glad to know that dsonesuk helped you to resolve your issue. dsonesuk is an awesome person.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...