Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,152,729 members, 7,816,997 topics. Date: Friday, 03 May 2024 at 10:36 PM

Please Kindly Help With This Html/javascript Problem. - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Please Kindly Help With This Html/javascript Problem. (1389 Views)

Creating A Group Chat With Html/javascript/php/mysql For Beginners / Help With This Html Web (2) (3) (4)

(1) (Reply) (Go Down)

Please Kindly Help With This Html/javascript Problem. by ogunsexy: 5:27am On Aug 15, 2014
I will be very grateful if anyone can kindly help me with this HTML/JavaScript Problem( I think it is mainly a javascript problem).
I have been trying to make it work but to no avail.
below is the code of the problem. Thanks in advance.


<doctype html>
<html lang=" en ">
<head>
<script type="text/javascript">

var price = new Array();
price["A"]=2;
price["B"]=1.8;
price["C"]=1.7;
price["E "]=1.6;



function getPrice()
{
//get the price of the plan

var price=0;

var plan = document.forms[0].selectedplan;

for(var i = 0; i < plan.length; i++)
{
if( plan[i].checked)
{

price = price[selectedplan[i].value];

break;
}
}

return price;
}


function getQuantity()
{
//gets the amount of the plan

var quantity = document.forms[0].numb;
var howmany = 0;
if(quantity.value!=" " )
{
howmany = parseInt(quantity.value);
}
return howmany;
}


function calculateTotal()
{
var totalValue = getPrice() * getQuantity();
//display the result of the calculation

var divobj = document.getElementById('');
divobj.style.display='block';
divobj.innerHTML = "Total Cost is " + totalValue;


}



function syncValue()
{
// a function that updates the totalValue to the value of price_1 in the second form.
document.form [1].name ['price_1'].value = getQuantity *getPrice ;
}
</script>


</head>
<div>
<form action=" " style="width:500px">
<fieldset>
<legend> SM</legend>
<label > Choose Plan </label>
<p><input type="radio" name="selectedplan" value="A" />
PLAN A</p>
<p><input type="radio" name="selectedplan" value="B"/>
PLAN B</p>
<p><input type="radio" name="selectedplan" value="C" />
PLAN C</p>
<p><input type="radio" name="selectedplan" value=" E"/>
PLAN D</p>
<p>Quantity</p><p><input type="text" id="numb"
name="numb" value=" "/></p>
<input type="button" value="Calculate" onclick="calculateTotal()" name="calculate"/>
<input type ="button" value= "Update" onclick= "syncValues()" name="update"/>
</p>
<div id="totalPrice"> </div>

</fieldset>
</form>

<div width="120px">
<form method="post" action="">
Enter Amount<br />
<input type="text" name="total" style="width:120px" /><br />
<input type="hidden" name="id" value=" " />
<input type="hidden" name="notify_url" value="" />
<input type="hidden" name="success_url" value="" />
<input type="hidden" name="fail_url" value="" />
<input type="hidden" name="memo" value=" " />
<input type="hidden" name="item_1" value="" />
<input type="hidden" name="price_1" value="" />
<input type="hidden" name="description_1" value="" />
</form>
</div>
<div>

</html>
Re: Please Kindly Help With This Html/javascript Problem. by Nobody: 5:53am On Aug 15, 2014
Any takers? Me i no fit understand am walahi. Mister oga, i can see smiling teeth inside your code - na the bug be that? Try use pastebin nau?
Re: Please Kindly Help With This Html/javascript Problem. by ogunsexy: 10:20am On Aug 15, 2014
dhtml18: Any takers? Me i no fit understand am walahi. Mister oga, i can see smiling teeth inside your code - na the bug be that? Try use pastebin nau?


I have tried removing the the smiling teeth. it is happens that emoticons on NL have same values as my variable.

I have gone through the codes, the JavaScript part refuse to behave as expected. I don't know what is the problem is . I sincerely need help.
I will try the patebin option too. Thanks.
Re: Please Kindly Help With This Html/javascript Problem. by Nobody: 11:32am On Aug 15, 2014
Mehn, the errors are too much. There is too many patch patch in the code. I cannot help you except to rewrite the entire code, and I dont have that time write now. There is both logical and syntax error within this code. invalid use of document.getElementById mostly.
Re: Please Kindly Help With This Html/javascript Problem. by ogunsexy: 9:13pm On Aug 15, 2014
dhtml18: Mehn, the errors are too much. There is too many patch patch in the code. I cannot help you except to rewrite the entire code, and I dont have that time write now. There is both logical and syntax error within this code. invalid use of document.getElementById mostly.



Many thanks.

I have refactored the code and I still couldn't get the Javascript part to behave. Below is the refactored code.




<doctype html>
<html lang=" en ">
<head>
<script >

//declare price in array

var price = new Array();
price["A"]=2;
price["B"]=1.8;
price["C"]=1.7;
price["E"]=1.6;

function getPrice()
{
// get the price of the selected plan

var price=0;

var plan = document.forms[0].selectedplan;

for(var i = 0; i < plan.length; i++)
{
if(plan[i].checked)
{
price = price[selectedplan[i].value];
break;
}
}

return price;
}


function getQuantity()
{
//get the quantity of the plan wanted

var quantity = document.forms[0].numb;
if(quantity.value!= " " )
{
quantity = parseInt(quantity.value);
}
return quantity;
}


function calculateTotal()
{
//calculates the total cost

var totalValue = getPrice() * getQuantity();

// displays the result of the calculation

var divobj = document.getElementById('totalPrice');
divobj.style.display ='block';
divobj.innerHTML = " Total Cost is " + totalValue;

}


function syncValues()
{
// updates the value of the textbox to the with the result of the calculated value.

// document.forms[1].name['price_1'].value = getQuantity * getPrice;

document.forms[1].name[7].value = getQuantity * getPrice;
}

</script>

</head>
<!--- <div> ---->

<form action="" style="width:350px;padding:10px; border:400px" name="form1">
<fieldset>
<legend> SM</legend>
<label > Choose Plan </label>
<p><input type="radio" name="selectedplan" value="A" />
PLAN A</p>
<p><input type="radio" name="selectedplan" value="B"/>
PLAN B</p>
<p><input type="radio" name="selectedplan" value="C" />
PLAN C</p>
<p><input type="radio" name="selectedplan" value=" E "/>
PLAN E </p>
<p>Quantity</p>
<p><input type="text" name="numb" value=" "/></p>
<input type= "button" value = "Calculate" onclick = "calculateTotal()" name ="calculate"/>
<input type = "button" value = "Update" onclick = "syncValues()" name ="update">
<p></p>
<p></p>
<div id="totalPrice"> </div>

</fieldset>
</form>
<!---</div> ---->



<div width="120px">
<form method="post" action="">
Enter Amount<br />
<input type="text" name="total" style="width:120px" /><br />
<input type="hidden" name="id" value=" " />
<input type="hidden" name="notify_url" value="" />
<input type="hidden" name="success_url" value="" />
<input type="hidden" name="fail_url" value="" />
<input type="hidden" name="memo" value=" " />
<input type="hidden" name="item_1" value="" />
<input type="hidden" name="price_1" value="" />
<input type="hidden" name="description_1" value="" />
</form>
</div>

</html>






I hope this makes things clearer. Thanks in advance.
Re: Please Kindly Help With This Html/javascript Problem. by Nobody: 11:32pm On Aug 15, 2014
Solved

<doctype html>
<html lang=" en ">
<head>
<style>
form {width:350px;padding:10px; border:400px}
label {display:block;margin-bottom:10px;cursor:pointer;}
</style>

<script >
function getPrice(frm)
{
//loop through all checkboxes inside this form to get the price
price=0; var pos=-1; checks=frm.selectedplan;
for (key in checks) {pos++;
radio=checks[pos];
if(typeof(radio)!=='undefined' && radio.checked) {
price= parseFloat(radio.getAttribute('rel'));
}
}
return price;
}


function getQuantity(frm)
{
//get the quantity of the plan wanted
var q=frm.numb.value=='' ? 0 : parseFloat(frm.numb.value);
return q;
}


function calculateTotal(frm)
{
var totalValue = getPrice(frm) * getQuantity(frm);

// displays the result of the calculation
document.getElementById('totalPrice').innerHTML = " Total Cost is " + totalValue;
}


function syncValues(frm) {
document.forms[1].price_1.value = getQuantity(frm) * getPrice(frm);
}

</script>

</head>
<form action="" name="form1">
<fieldset>
<legend> SM</legend>
<label > Choose Plan </label>
<label><input type="radio" name="selectedplan" value="A" rel="2"/>
PLAN A</label>
<label><input type="radio" name="selectedplan" value="B" rel="1.8"/>
PLAN B</label>
<label><input type="radio" name="selectedplan" value="C" rel="1.7"/>
PLAN C</label>
<label><input type="radio" name="selectedplan" value="grin" rel="1.6"/>
PLAN D </label>
<p>Quantity</p>
<p><input type="text" name="numb" value=""/></p>
<input type= "button" value = "Calculate" onclick = "calculateTotal(this.form)" name ="calculate"/>
<input type = "button" value = "Update" onclick = "syncValues(this.form)" name ="update">
<p></p>
<p></p>
<div id="totalPrice"> </div>

</fieldset>
</form>



<div width="120px">
<form method="post" action="">
Enter Amount<br />
<input type="text" name="total" style="width:120px" /><br />
<input type="hidden" name="id" value=" " />
<input type="hidden" name="notify_url" value="" />
<input type="hidden" name="success_url" value="" />
<input type="hidden" name="fail_url" value="" />
<input type="hidden" name="memo" value=" " />
<input type="hidden" name="item_1" value="" />
<input type="hidden" name="price_1" value="" />
<input type="hidden" name="description_1" value="" />
</form>
</div>

</html>


There is a material somewhere on my blog that can help you improve your javascript - http://dhtmlhub.com/l/kxfm9eq
Re: Please Kindly Help With This Html/javascript Problem. by Nobody: 7:34am On Aug 16, 2014
Bro u didn't even state your problem you just gave us some code.
Re: Please Kindly Help With This Html/javascript Problem. by Nobody: 8:00am On Aug 16, 2014
^^^He does not know the problem actually. And he really tried with the code, it was just some little tweakings that were required.
Re: Please Kindly Help With This Html/javascript Problem. by ogunsexy: 8:35pm On Aug 16, 2014
dhtml18: ^^^He does not know the problem actually. And he really tried with the code, it was just some little tweakings that were required.
Many thanks dhtml18 D D D . I am sincerely grateful for your help. you've saved a Nation!!.
I hope you don't mind explaining some of the codes in your solution.:
1. You dispense with the array for storing the variables .Why?
2. I still need a special class on the elegance of implementation of getPrice() D D. why didn't you use a for or while loop.
3. Please kindly explain the idiom you used in getQuantity() and why did you use parseFloat() and not parseInt().
4. what is the reason behind parsing 'frm' to all the functions.


Once again thank you very much. The next I need is to try my hand on form validation.

May I also add that I tried your solution in 5 browsers( opera, chrome,Firefox,safari and IE ) it worked well in all of them.
Re: Please Kindly Help With This Html/javascript Problem. by Nobody: 9:25pm On Aug 16, 2014
I am supposed to be a JavaScript expert anyway. I decided to do it just that way so that you might learn a few things or two. I removed some of the codes you have that are not necessary.

Explanation:
The calculate and synvalues functions were called with a parameter - this.form - that is the form element that contains them (their parent so to speak).
<input type= "button" value = "Calculate" onclick = "calculateTotal(this.form)" name ="calculate"/>
<input type = "button" value = "Update" onclick = "syncValues(this.form)" name ="update">

The following functions have one argument, frm - which is a form object in this case (via this.form parameter that was passed from the buttons).
function getPrice(frm) {}
function getQuantity(frm) {}
function calculateTotal(frm) {}
function function syncValues(frm) {}

since frm is the form object, i can use it to access the other objects that are its descendants.

For example, instead of saying document.forms[0].numb.value - i could just say frm.numb.value (because frm is the same as document.forms[0])

Getting the price:
Notice that i modified the radio buttons:
<input type="radio" name="selectedplan" value="A" rel="2"/>
i use rel tag to store the price - instead of your array.

frm.selectedplan => this will give me an object containing all the form objects bearing that name - which are radio buttons. Even if you have 1000 radio buttons, this technique will detect them.
So i simply looped through all the radio buttons to test for the ones that are checked so that i can retrieve their values (stored in rel tags).
parseInt(2.6) will give you 2 (parseInt will convert string or number to an integer - a number without a decimal place), while parseFloat(2.6) will give you 2.6 (a floating point number that can hold decimals).

As for getQuantity:
var q=frm.numb.value=='' ? 0 : parseFloat(frm.numb.value);
is called ehm, i don forget that name - trinary or unuary, or whatever operator.
The above statement can be rewritten as if(frm.numb.value=='') {q=0;} else {q=parseFloat(frm.numb.value);}

That should clarify it, i hope.
Re: Please Kindly Help With This Html/javascript Problem. by Nobody: 9:28pm On Aug 16, 2014
I missed one:
checks=frm.selectedplan;
checks is an object and not an array. There is difference in javascript between object and array.
for (key in checks) { } - called for. . .in loop is used to iterate an object, and not the other looping styles.
Re: Please Kindly Help With This Html/javascript Problem. by slightlyMad(f): 11:32pm On Aug 16, 2014
learn jquery, your life will be easier

btw document.forms[0] is a lazy approach that will make coders reading your codes dash you swear
why not give the element an id and do a document.getElementByID
given that you have to write barebone javascript.

learn jquery pls
less code, readable and effective
Re: Please Kindly Help With This Html/javascript Problem. by Nobody: 11:37pm On Aug 16, 2014
slightlyMad: learn jquery, your life will be easier
Na only you waka come? oya give us the solution in jQuery. It will still take someone with good hold on javascript to solve this task - jquery or not.

This poster will not have much problem learning node.js or any javaScript technology, I can see he is skilled in programming. My solving the problem was just because I was more experienced (and so have made more mistakes in the past than the op), that is why I can write raw JavaScript to work on all platforms without needing jQuery. I can use jQuery very well mind you, but sometimes due to performance issues, i will just use ordinary javascript.
Next issue, if you cant write ordinary javascript without jquery, how will you cope with technologies like node.js and mongodb both of rely heavily on javascript (and jquery cannot help you on the serve side of node.js anyway).
Re: Please Kindly Help With This Html/javascript Problem. by ogunsexy: 12:51pm On Aug 17, 2014
slightlyMad: learn jquery, your life will be easier
btw document.forms[0] is a lazy approach that will make coders reading your codes dash you swear
why not give the element an id and do a document.getElementByID
given that you have to write barebone javascript.
learn jquery pls
less code, readable and effective


Please can you help me implement the problem in JQuery. I think I read or heard somewhere that document.forms[0] is a cross-platform implementation(ie works in all browser); easier for a page with multiple forms and also think a code should be clear enough to be read and understood by another programmer with or without comments.

I love to be a competent JS programmer. JS can be used for almost anything just like C and C++( it is a pity I no sabi dem ooo). I look forward to a day when all the implementation of JS in every JS Engine will be standardized to evey minute detail. Then there will be no need for JQuery.
Re: Please Kindly Help With This Html/javascript Problem. by ogunsexy: 12:58pm On Aug 17, 2014
dhtml18: I am supposed to be a JavaScript expert anyway. I decided to do it just that way so that you might learn a few things or two. I removed some of the codes you have that are not necessary.

Explanation:
The calculate and synvalues functions were called with a parameter - this.form - that is the form element that contains them (their parent so to speak).
<input type= "button" value = "Calculate" onclick = "calculateTotal(this.form)" name ="calculate"/>
<input type = "button" value = "Update" onclick = "syncValues(this.form)" name ="update">

The following functions have one argument, frm - which is a form object in this case (via this.form parameter that was passed from the buttons).
function getPrice(frm) {}
function getQuantity(frm) {}
function calculateTotal(frm) {}
function function syncValues(frm) {}

since frm is the form object, i can use it to access the other objects that are its descendants.

For example, instead of saying document.forms[0].numb.value - i could just say frm.numb.value (because frm is the same as document.forms[0])

Getting the price:
Notice that i modified the radio buttons:
<input type="radio" name="selectedplan" value="A" rel="2"/>
i use rel tag to store the price - instead of your array.

frm.selectedplan => this will give me an object containing all the form objects bearing that name - which are radio buttons. Even if you have 1000 radio buttons, this technique will detect them.
So i simply looped through all the radio buttons to test for the ones that are checked so that i can retrieve their values (stored in rel tags).
parseInt(2.6) will give you 2 (parseInt will convert string or number to an integer - a number without a decimal place), while parseFloat(2.6) will give you 2.6 (a floating point number that can hold decimals).

As for getQuantity:
var q=frm.numb.value=='' ? 0 : parseFloat(frm.numb.value);
is called ehm, i don forget that name - trinary or unuary, or whatever operator.
The above statement can be rewritten as if(frm.numb.value=='') {q=0;} else {q=parseFloat(frm.numb.value);}

That should clarify it, i hope.





Yes it did! But I am yet to internalise the concept. Many thanks!! I am once again very grateful . I have downloaded the PDF tutorial on your site and I am studying it ( just got to page 16). I Hope to make significant progress.
Re: Please Kindly Help With This Html/javascript Problem. by Nobody: 1:19pm On Aug 17, 2014
It is alright, I am expert with using jquery as well. Rewriting this in jQuery will not take me more than 2 minutes. Maybe , I shall show you.
But if you don't know javascript basics, you will not be able to really advance in jquery.
And yes document.getElementById is crossplatform, but you did not use it well.
Re: Please Kindly Help With This Html/javascript Problem. by slightlyMad(f): 4:16pm On Aug 17, 2014
ogunsexy:


Please can you help me implement the problem in JQuery. I think I read or heard somewhere that document.forms[0] is a cross-platform implementation(ie works in all browser); easier for a page with multiple forms and also think a code should be clear enough to be read and understood by another programmer with or without comments.

I love to be a competent JS programmer. JS can be used for almost anything just like C and C++( it is a pity I no sabi dem ooo). I look forward to a day when all the implementation of JS in every JS Engine will be standardized to evey minute detail. Then there will be no need for JQuery.

yes it is cross-platform but what happens when the management ask that you add a small search form to the page,
just above the main content.

document.forms[0] becomes document.forms[1]
so you may have to visit every instance of that form to fix that.

and oops!, there are more forms, so you start changing all forms[1] to forms[2] and all forms[2] to forms[3]

but when you do this

<form id='loginform' ...

you only have to do a document.getElementByID('loginform').style.display='none'; for example and in the future, other developers will remember you in prayers.

in jquery
you just have to

$('#loginform').hide();

to help you, tell me what you are trying to do.
Re: Please Kindly Help With This Html/javascript Problem. by Nobody: 6:54pm On Aug 17, 2014
This is the original correction required in jQuery. I still maintained the functions as much as possible so that you can follow it.

Too many shiny teeth, i am attaching it.

jscript2 is the jquery version
jscript is the original non-jquery version
i attached jquery in case you wish to use it offline. My code is using the cdn of jquery

Re: Please Kindly Help With This Html/javascript Problem. by HighwayTech: 9:55pm On Aug 18, 2014
dhtml18:
Na only you waka come? oya give us the solution in jQuery. It will still take someone with good hold on javascript to solve this task - jquery or not.

This poster will not have much problem learning node.js or any javaScript technology, I can see he is skilled in programming. My solving the problem was just because I was more experienced (and so have made more mistakes in the past than the op), that is why I can write raw JavaScript to work on all platforms without needing jQuery. I can use jQuery very well mind you, but sometimes due to performance issues, i will just use ordinary javascript.
Next issue, if you cant write ordinary javascript without jquery, how will you cope with technologies like node.js and mongodb both of rely heavily on javascript (and jquery cannot help you on the serve side of node.js anyway).

No doubt dhtml18 is a guru Js/web programmer. I am an upcoming js (mostly jquerymobile) developer, I wud like to av u as a programmer mentor; pls can u honor my request, I am currently deeping my toes in a mega project for my startup; and I really need someone wu cud just help me figure things out when I'm lost , I will be EXTREMeLY grateful if u cud honor my request
Re: Please Kindly Help With This Html/javascript Problem. by Nobody: 10:33pm On Aug 18, 2014
I shall do my bit, just subscribe to http://facebook.com/dhtmlhub to get started.
Re: Please Kindly Help With This Html/javascript Problem. by ogunsexy: 1:10am On Aug 20, 2014
dhtml18: I shall do my bit, just subscribe to http://facebook.com/dhtmlhub to get started.


I will surely be one of your students. I want to make a significant progress in JS before the year ends . I really appreciate you effort . More power to your elbow.
Re: Please Kindly Help With This Html/javascript Problem. by ogunsexy: 1:36am On Aug 20, 2014
dhtml18: This is the original correction required in jQuery. I still maintained the functions as much as possible so that you can follow it.

Too many shiny teeth, i am attaching it.

jscript2 is the jquery version
jscript is the original non-jquery version
i attached jquery in case you wish to use it offline. My code is using the cdn of jquery


Many Thanks for your effort. I quite like the elegance and brevity of the JQuery version although I find it less intuitive compared to the barebone JavaScript. I have heard many developers/programmers sing the praise of JQuery but I still dont get what the "hype" is all about apart from the brevity of LOC .
Re: Please Kindly Help With This Html/javascript Problem. by ogunsexy: 1:41am On Aug 20, 2014
slightlyMad:

yes it is cross-platform but what happens when the management ask that you add a small search form to the page,
just above the main content.

document.forms[0] becomes document.forms[1]
so you may have to visit every instance of that form to fix that.

and oops!, there are more forms, so you start changing all forms[1] to forms[2] and all forms[2] to forms[3]

but when you do this

<form id='loginform' ...

you only have to do a document.getElementByID('loginform').style.display='none'; for example and in the future, other developers will remember you in prayers.

in jquery
you just have to

$('#loginform').hide();

to help you, tell me what you are trying to do.

I want to get my hands dirty first grin grin . I am rest-assured you will come to my aid when i get trapped.

(1) (Reply)

Help A Beginner Pls. / 5 Programming Languages Marked For Death / Android AIDE Premium Key Problem

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 80
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.