[Javascript] HTML5 Form to generate answer

[jiyeonnie]

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>

[Don E]

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

[amitamberker]

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 July 7, 2012 by creative1977

[dsonesuk]

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 July 7, 2012 by dsonesuk

[jiyeonnie]

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!

[amitamberker]

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?

[jiyeonnie]

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. <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>

[amitamberker]

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?

[dsonesuk]

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 July 9, 2012 by dsonesuk

[jiyeonnie]

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 July 9, 2012 by jiyeonnie

[amitamberker]

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