Java Script Coach Wanted

Java Script Coach Wanted
0

#1

I am a coder of necessity, namely my own necessity. I have some html and java code that I’d like to add to my site that would provide my customers with an automated overall cost estimate on services the site provides, but I need help with the fine tuning. If this sound of interest to someone, I would really appreciate the help…


#2

#3

#4

#5

#6

I’m actually looking for help with the code I have put together and is somewhat working, but yes I do need help with roadblocks… I understand you are not wanting a post of a solicitous nature and would appreciate it if you could unhide my post so that I can post the code and my issues, thanks


#7

This is the code I am working with:

Html Form Code


<form action="" id="estimateform" onsubmit="return false;">
<fieldset><legend>Get An Overall Title Service Cost Estimate</legend>

<p><label>Enter Presumptive Value Below:</label></p>

<p><input id="presumptive_value" name="Presumptive Value" type="number" /></p>

<p><label>List of Title Services:</label></p>

<p><select id="service" name="service" onchange="calculateTotal()"><option value="None">Choose A Service</option><option value="Vehicle Information">Vehicle Information($15)</option><option value="Duplicate Title">Duplicate Title($25)</option><option value="Title Transfer">Title Transfer($35)</option><option value="Bonded Title">Bonded Title($50)</option><option value="Salvage Title">Salavge Title($50)</option><option value="Mechanic Lien">Mechanics Lien($50)</option></select></p>

<div id="bondValue">&nbsp;</div>

<div id="bondFee">&nbsp;</div>

<div id="bondoverageValue">&nbsp;</div>

<div id="ttlValue">&nbsp;</div>

<div id="totalPrice">&nbsp;</div>
</fieldset>
</form>

Java Script Code


 //Set up an associative array 
 //The keys represent the service type
 //The value represents the cost of the service i.e. Vehicle Info is $15,Duplicate Title is $25
 //We use this this array when the user selects a service from the form
 var service_prices= new Array();
 service_prices["None"]=0;
 service_prices["Vehicle Information"]=15;
 service_prices["Duplicate Title"]=25;
 service_prices["Title Transfer"]=35;
 service_prices["Bonded Title"]=50;
 service_prices["Salvage Title"]=50;
 service_prices["Mechanic Lien"]=50;
 
//This function finds the service price based on the 
//drop down selection
function getServicePrice()
{
    var ServicePrice=0;
    //Get a reference to the form id="estimateform"
    var theForm = document.forms["estimateform"];
    //Get a reference to the select id="service"
     var selectedService = theForm.elements["service"];
     
    //set Service Price equal to value user chose
    //For example service_prices["Vehicle Information".value] would be equal to 5
    ServicePrice = service_prices[selectedService.value];

    //finally we return ServicePrice
    return ServicePrice;
}



function getBond_Value()
{
    //Assume form with id="estimateform"
    var theForm = document.forms["estimateform"];
    //Get a reference to the TextBox
    var presumptive_value = theForm.elements["presumptive_value"];
    var Bond_Value =0;
    //If the textbox is not blank
    if(presumptive_value.value!="")
    {
        //presumptive value x 1.5 should give bondValue of $1500 on a $1000 presumptive value entry
        Bond_Value = parseInt((presumptive_value.value*1.5);
    }
    return Bond_Value;
    
    //display the result
    var divobj = document.getElementById('bondValue');
    divobj.style.display='block';
    divobj.innerHTML = "This Is Your Vehicle's Bond Value $"+Bond_Value;
 }

function hideTotal()
{
    var divobj = document.getElementById('bondValue');
    divobj.style.display='none';
}





function getBondFee_Value()
{
    //Assume form with id="estimateform"
    var theForm = document.forms["estimateform"];
    //Get a reference to the TextBox
    var presumptive_value = theForm.elements["presumptive_value"];
    var BondFee_Value =0;
    //If the textbox is not blank
    if(presumptive_value.value!="")
    {
        //presumptive value x 1.5 - 5000 x 0 + 150 should give BondFee_Value of $150 
        BondFee_Value = parseInt((((presumptive_value.value*1.5)-5000)*0)+150);
    }
    return BondFee_Value;
    
    //display the result
    var divobj = document.getElementById('bondFee');
    divobj.style.display='block';
    divobj.innerHTML = "Your Vehicle Bond Fee is $"+BondFee_Value;
 }

function hideTotal()
{
    var divobj = document.getElementById('bondFee');
    divobj.style.display='none';
}


function getBondOverage_Value()
{
    //Assume form with id="estimateform"
    var theForm = document.forms["estimateform"];
    //Get a reference to the TextBox
    var presumptive_value = theForm.elements["presumptive_value"];
    var BondOverage_Value =0;
    //If the textbox is not blank
    if(presumptive_value.value!="")
    {
        //presumptive value x 1.5 - 5000/1000 x 35 should give bondoverageValue of $35 for every 1k>5K
        BondOverage_Value = parseInt((((presumptive_value.value*1.5)-5000)/1000)*35);
    }
    return BondOverage_Value;
    
    //display the result
    var divobj = document.getElementById('bondoverageValue');
    divobj.style.display='block';
    divobj.innerHTML = "Your Vehicle Bond Overage Fee is $"+BondOverage_Value;
 }

function hideTotal()
{
    var divobj = document.getElementById('BondOverage_Value');
    divobj.style.display='none';
}




function getTTL_Value()
{
    //Assume form with id="estimateform"
    var theForm = document.forms["estimateform"];
    //Get a reference to the TextBox
    var presumptive_value = theForm.elements["presumptive_value"];
    var TTL_Value =0;
    //If the textbox is not blank
    if(presumptive_value.value!="")
    {
        //presumptive value x .0625 + 33 + 85 should give TTL_Value of 62.50 for $1k of presump value + 33 + 85 = 180.50 
        TTL_Value = parseInt((presumptive_value.value*0.0625) + 118);
    }
    return TTL_Value;
    
    //display the result
    var divobj = document.getElementById('ttlValue');
    divobj.style.display='block';
    divobj.innerHTML = "Your Vehicle's Tax, Title and License Fee is $"TTL_Value;
 }

function hideTotal()
{
    var divobj = document.getElementById('ttlValue');
    divobj.style.display='none';
}


        
function calculateTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
    var OverallPrice = getServicePrice() + getBondFee_Value() + getBondOverage_Value() + getTTL_Value();
    
    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total Overall Service Price $"+OverallPrice;

}

function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}

Notes:


The html code shows what I need, however…

On the script side when inputing a $1000 into the presumptive_value field
with the Bonded Title selection of $50 the form is not giving customers a

bondValue of $1500

bondFee of $150

bondoverageValue of $0 if bondValue is $5k<

ttlValue of .0625 of presumptive_value + $118 which should be $180.50

It is giving me the totalPrice of 258.00

But should be return a totalPrice of
ServicePrice = $ 50.00
bondFee = $150.00
bondoverageValue = $ 0.00
ttlValue =$180.50


totalPrice =$380.50

The page which holds the html code is at: losttitleconnection.net/estimate


#8

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

Note: Backticks are not single quotes.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

That is a lot of code to post in a single post. If you put this code into Codepen or JSFiddle, it would be better. Plus, it will make it easier for everyone helping you to always see the latest version of what you have, so you don’t have to keep posting code in the topic.

Also, when you run your current code, you should be seeing error in the browser’s console (Ctrl+Shft+J in Chrome) that you should address first before posting your code.

Also, I notice you seem to be trying to use php syntax instead of JavaScript in many parts of your code, which is causing most of your errors.


#9

FYI - The bulk of your calculation issue resides in the getBondOverage_Value function. In your example, this function is returning the value -122 instead of 0 (what you said you expected). Also, since you are using parseInt, you will be rounding all values to integers, so you would never have a value like $180.50 for the ttlValue.


#10

If you go with something like the following for the HTML:

<form action="" id="estimateform" onsubmit="return false;">
    <fieldset><legend>Get An Overall Title Service Cost Estimate</legend>
        <p><label for="presumptive_value">Enter Presumptive Value Below:</label></p>
        <p><input id="presumptive_value" name="Presumptive Value" type="number" /></p>
        <p><label for="service">List of Title Services:</label></p>
        <p>
            <select id="service" name="service" onchange="calculateTotal()">
                <option value="None">Choose A Service</option>
                <option value="Vehicle Information">Vehicle Information($15)</option>
                <option value="Duplicate Title">Duplicate Title($25)</option>
                <option value="Title Transfer">Title Transfer($35)</option>
                <option value="Bonded Title">Bonded Title($50)</option>
                <option value="Salvage Title">Salavge Title($50)</option>
                <option value="Mechanic Lien">Mechanics Lien($50)</option>
            </select>
        </p>
    </fieldset>
</form>
<div id="results">
    <div id="bondValue"></div>
    <div id="bondFee"></div>
    <div id="bondoverageValue"></div>
    <div id="ttlValue"></div>
    <div id="totalPrice"></div>
</div>

then your JavaScript could be as simple as:

//Set up object
//The properties represent the service type
//The value represents the cost of the service i.e. Vehicle Info is $15,Duplicate Title is $25
//We use this this array when the user selects a service from the form
var service_prices= {
  "None": 0,
  "Vehicle Information": 15,
  "Duplicate Title": 25,
  "Title Transfer": 35,
  "Bonded Title": 50,
  "Salvage Title": 50,
  "Mechanic Lien": 50
};

//This function finds the service price based on the
//drop down selection
function getServicePrice()
{
    return service_prices[service.value];
}

function getBond_Value()
{
  //presumptive value x 1.5 should give bondValue of $1500 on a $1000 presumptive value entry
   var Bond_Value =  parseInt(presumptive_value.value*1.5);
    bondValue.innerHTML = "This Is Your Vehicle's Bond Value $"+Bond_Value;
    return Bond_Value;
}

function getBondFee_Value(){
    //presumptive value x 1.5 - 5000 x 0 + 150 should give BondFee_Value of $150
    var BondFee_Value = parseInt((((presumptive_value.value*1.5)-5000)*0)+150);
    bondFee.innerHTML = "Your Vehicle Bond Fee is $"+BondFee_Value;
    return BondFee_Value;
}

function getBondOverage_Value()
{
    var BondOverage_Value =0;
    if( presumptive_value.value*1.5 > 5000)
    {
        //presumptive value x 1.5 - 5000/1000 x 35 should give bondoverageValue of $35 for every 1k>5K
        BondOverage_Value = parseInt((((presumptive_value.value*1.5)-5000)/1000)*35);
    }
    bondoverageValue.innerHTML = "Your Vehicle Bond Overage Fee is $"+BondOverage_Value;
    return BondOverage_Value;
}

function getTTL_Value()
{
    //presumptive value x .0625 + 33 + 85 should give TTL_Value of 62.50 for $1k of presump value + 33 + 85 = 180.50
    var TTL_Value = parseFloat((presumptive_value.value*0.0625) + 118);
    ttlValue.innerHTML = "Your Vehicle's Tax, Title and License Fee is $" + TTL_Value;
    return TTL_Value;
}

function calculateTotal()
{
    results.style.display='none';
    if (presumptive_value.value!="")
    {
        //Here we get the total price by calling our function
        //Each function returns a number so by calling them we add the values they return together
        var OverallPrice = getServicePrice() + getBondFee_Value() + getBondOverage_Value() + getTTL_Value();
        totalPrice.innerHTML = "Total Overall Service Price $"+OverallPrice;

        //display the result
        results.style.display='block';
    }
}

#11

@randelldawson, first let me say thanks for the help previously…

The code is producing, however, for some reason, it isn’t producing a $ value for the function getBond_Value.

My other issue is that I’ve realized I need some IF THEN statements as some services require only get Service and a general court fee, others require getService and getTTL_Value. Other require getService, getTTL_Value, and general court fee, and yet others require getService, getTTL_Value, getBondFee_Value, and fetBondOverage_Value.

I’m currently working to put those lines of code together, but for now, I could really use your help with the issue of the getBond_Value not showing. Can you please give me some guidance on this, Sir?

Thanks is advance for all your efforts


#12

I don’t mind helping you at all, but could you please put the code for this particular page on Codepen or JSFiddle? It would make it easier for anyone helping you to see the same code you are working on without you having to constantly update this thread with code changes. Also, it allows others helping you to fork the pen to test it out and tweak it to give you suggestions.

Thank you.


#13

@randelldawson, thanks for the advice…

This morning I set up an account with Codepen and entered the HTML and js code.
Here is the link: https://codepen.io/ttsprez/pen/VGEPzE?editors=0010

Funny thing now is that the code isn’t producing any results in Codepen or on the live site, where it had at least been giving BondFee, OverageFee, TTL_Value, and TotalCost previously.

I will be working on this to try and establish some IF-THEN statements for each service.

Thanks again for the Codepen advice again. Now I just need to find something like it for PHP.


#14

Take a look at your browser’s console. You are getting an error there which when fixed will allow your calculateTotal function to complete.

Maybe check out http://phpfiddle.org? I have not used it, but from the site description, it sounds like it might work.


#15

Sorry, I don’t know what you mean by browser’s console. I’m using Chrome and don’t see any error messages at the top, bottom or address bar area. As for the PHPfiddle, thanks. I think that is gonna be of great help too.


#16

In addition, it’s not producing totals in the Codepen program either.


#17

To access the browser’s console in Chrome, you can use Ctrl+Shft+J.


#18

Mr. @randelldawson, can you please have a look at my code. Combed through it all and fixed everything I could that I thought could be the issue but still keep getting “index.js: Unexpected token (102:1)” error on my last line of code.

This is the link to the Codepen

Many thanks sir…


#19

You have some many extra curly brackets which are causing issues.

In the getBond_Value function, why do you have this section wrapped in curly brackets? These are unnecessary and should be removed.

   {
   bondValue.innerHTML = "This Is Your Vehicle's Bond Value $"+Bond_Value;
   return Bond_Value;
   }

The getBondOverage_Value has a similar section wrapped in curly brackets.

The getBondOverage_Value function has an extra opening curly bracket after the return statement line.

The getTTL_Value function has a section wrapped in curly brackets.

Lastly, I have a question concerning the if statement in the calculateTotal function. Of all places, you decided not to wrap a section of code in curly braces, where it would help the most with readability. Which of the 3 lines which following the if statement should be contained in it’s block?


#20

So I broke down and just re-inserted the original code you sent me…

for whatever reason, the code on the HTML side was preventing the totals from showing. So it’s showing now.

Here is the actual page it’s on:
losttitleconnection.net/estimate

Use this login to access it
User: temp
pass: temporary

As I stated in an earlier message, my only concern is that the getBondValue() isn’t returning a $, but everything else seems to be showing the way it should. Can I ask you to take a look at that in the pen for me, please?

Going forward, I need to add some if statements as each service only need certain functions added together, some services only need the service_price, and others require all of them. I’ll put those together and let you tell me what you think…

Again, thanks for the time…