[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 226
  • Last Modified:

Javascript function question

Hi,

I have a javascript form that isn't working how I need it to.

I am trying to get this function to add a tax percentage to the form field whenever the user uses the state CA in the state field. The code below is what I have so far, but so far it isn't working for me.
<SCRIPT TYPE="text/javascript">
<!-- Begin
 
var sub_tot =<? echo "$sub_tot" ; ?>
 
 var tax_amt = 0.085
 var state = 0
 var total = sub_tot
 
 function gettax(total){
 
        if (form.state.value = "CA") {
                form.total.value = form.sub_tot.value + (form.sub_tot.value * tax_amt);
        else 
                form.total.value = form.sub_tot.value;
				document.order_form.total.focus();
				}
}
				
// End -->
</script>
 
<!--The form HTML -->
 
<FORM name="order_form" action="products2.php" method="post" onsubmit="return validateFormOnSubmit(this)"> 
 
<input name="state" type="text" id="state"  size="3" maxlength="3">
 
<script>
document.write("Order Total: <input type=\"text\" name=\"total\"  size=\"6\" value='"+total+"' readonly=\"readonly\" />");
</script>

Open in new window

0
jackie777
Asked:
jackie777
  • 12
  • 11
  • 3
2 Solutions
 
MMierzwaCommented:
I am not sure if it helps but shouldn't this function looks like that?

 function gettax(total){
 
     if (form.state.value = "CA") {
         form.total.value = form.sub_tot.value + (form.sub_tot.value * tax_amt);
     }
     else {
         form.total.value = form.sub_tot.value;
         document.order_form.total.focus();
     }
 }

Open in new window

0
 
HonorGodCommented:
No, use a double == sign!



if (form.state.value == "CA")  ...

Open in new window

0
 
jackie777Author Commented:
That helped because with my poorly formed code before the total field wan't showing up on the page at all, now it shows up, but it still won't change to to revised total with the tax amount included when I add CA to the state field.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
HonorGodCommented:
How about
function gettax( total ) {
  form.total.value = form.sub_tot.value + ( form.sub_tot.value * ( ( form.state.value == "CA" ) ? 1 : 0 ) )
  document.order_form.total.focus();
}

Open in new window

0
 
jackie777Author Commented:
Thanks for all your help so far this is definitely getting me closer but, still didn't work.
The total field still only shows the sub_tot value and doesn't updade to the new tax value when CA is put in the "state field"
0
 
HonorGodCommented:
ok,  how about this?
function gettax( total ) {
  var sub = parseFloat( form.sub_tot.value )
  var CA  = ( form.state.value == "CA" )
  form.total.value = ( sub + ( ( CA ? 1 : 0 ) * tax_amt ) ).toFixed( 2 )
  document.order_form.total.focus();
}

Open in new window

0
 
jackie777Author Commented:
no, sorry, still didn't work.

If it helps this is the page I am working on.

https://secure2.spiralweb.com/~dadsbourbonballs/products1.php

but the order process actually begins here:

https://secure2.spiralweb.com/~dadsbourbonballs/products.php
0
 
HonorGodCommented:
hm.  total isn't being used, so I guess it isn't needed as a parameter...
0
 
HonorGodCommented:
I don't see where on that page that you have, or call the gettax() function.

Let's see what is happening...


function gettax() {
  alert( 'enter gettax(): #parms=' + arguments.length )
  var sub = parseFloat( form.sub_tot.value )
  alert( 'subtotal: ' + sub )
  var CA  = ( form.state.value == "CA" )
  alert( 'State: "' + form.state.value + '"  CA=' + CA )
  form.total.value = ( sub + ( ( CA ? 1 : 0 ) * tax_amt ) ).toFixed( 2 )
  document.order_form.total.focus();
  alert( ' exit gettax() total = ' + form.total.value )
}

Open in new window

0
 
jackie777Author Commented:
ok, I put that function on the page
0
 
HonorGodCommented:
what output did you see when the function is called/invoked?
0
 
jackie777Author Commented:
It didn't do anything. There was no alert box. How should I have called the function? I typed CA into the state field, which i thought would work, but it didn't
0
 
jackie777Author Commented:
enter gettax(): #parms=0
0
 
HonorGodCommented:
ok, that's it though?

Then form.sub_tot.value must not be valid.

In most instances of functions already on the page, you pass a reference to the form object.  I bet that's the problem...

How/where do you call gettax() ?
0
 
jackie777Author Commented:
I didn't have a call for it before, so that was the problem. But I guess I don't really know how to properly call the function to make it work in the form.

I tried this, and it made the alert appear but it made the other Javascript validation function stop working.

<FORM name="order_form" action="products2.php" method="post" onsubmit="return validateFormOnSubmit(this), gettax() ">
0
 
HonorGodCommented:
what did it look like before?
0
 
jackie777Author Commented:
<FORM name="order_form" action="products2.php" method="post" onsubmit="return validateFormOnSubmit(this)">
0
 
HonorGodCommented:
ok, What show me what this function looks like:

validateFormOnSubmit()


0
 
jackie777Author Commented:
All the validation code is below, the first part is the function being called in the form.

function validateFormOnSubmit(theForm) {
var reason = "";
 
  reason += validateEmpty(theForm.fname);
  reason += validateEmpty(theForm.lname);
  reason += validateEmpty(theForm.address1);
  reason += validateEmpty(theForm.city);
  reason += validateEmpty(theForm.state);
  reason += validateEmail(theForm.email);
  reason += validatePhone(theForm.phone);
      
  if (reason != "") {
    alert("Some fields need correction:\n" + reason);
    return false;
  }
 
  return true;
}
 
function validateEmpty(fld) {
    var error = "";
 
    if (fld.value.length == 0) {
        fld.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        fld.style.background = 'White';
    }
    return error;  
}
 
function validateUsername(fld) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (fld.value == "") {
        fld.style.background = 'Yellow'; 
        error = "You didn't enter a username.\n";
    } else if ((fld.value.length < 5) || (fld.value.length > 15)) {
        fld.style.background = 'Yellow'; 
        error = "The username is the wrong length.\n";
    } else if (illegalChars.test(fld.value)) {
        fld.style.background = 'Yellow'; 
        error = "The username contains illegal characters.\n";
    } else {
        fld.style.background = 'White';
    }
    return error;
}
 
function validatePassword(fld) {
    var error = "";
    var illegalChars = /[\W_]/; // allow only letters and numbers 
 
    if (fld.value == "") {
        fld.style.background = 'Yellow';
        error = "You didn't enter a password.\n";
    } else if ((fld.value.length < 7) || (fld.value.length > 15)) {
        error = "The password is the wrong length. \n";
        fld.style.background = 'Yellow';
    } else if (illegalChars.test(fld.value)) {
        error = "The password contains illegal characters.\n";
        fld.style.background = 'Yellow';
    } else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) {
        error = "The password must contain at least one numeral.\n";
        fld.style.background = 'Yellow';
    } else {
        fld.style.background = 'White';
    }
   return error;
}   
 
function trim(s)
{
  return s.replace(/^\s+|\s+$/, '');
}
 
function validateEmail(fld) {
    var error="";
    var tfld = trim(fld.value);                        // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
   
    if (fld.value == "") {
        fld.style.background = 'Yellow';
        error = "You didn't enter an email address.\n";
    } else if (!emailFilter.test(tfld)) {              //test email for illegal characters
        fld.style.background = 'Yellow';
        error = "Please enter a valid email address.\n";
    } else if (fld.value.match(illegalChars)) {
        fld.style.background = 'Yellow';
        error = "The email address contains illegal characters.\n";
    } else {
        fld.style.background = 'White';
    }
    return error;
}
 
function validatePhone(fld) {
    var error = "";
    var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');    
 
   if (fld.value == "") {
        error = "You didn't enter a phone number.\n";
        fld.style.background = 'Yellow';
    } else if (isNaN(parseInt(stripped))) {
        error = "The phone number contains illegal characters.\n";
        fld.style.background = 'Yellow';
    } else if (!(stripped.length == 10)) {
        error = "The phone number is the wrong length. Make sure you included an area code.\n";
        fld.style.background = 'Yellow';
    }
    return error;
}

Open in new window

0
 
HonorGodCommented:
Well, we could certainly call gettax() within validateFormOnSubmit().
We could even pass "theForm" to it, and modify gettax() to use this form object...



function gettax( form ) {
  alert( 'enter gettax(): #parms=' + arguments.length )
  var sub = parseFloat( form.sub_tot.value )
  alert( 'subtotal: ' + sub )
  var CA  = ( form.state.value == "CA" )
  alert( 'State: "' + form.state.value + '"  CA=' + CA )
  form.total.value = ( sub + ( ( CA ? 1 : 0 ) * tax_amt ) ).toFixed( 2 )
  document.order_form.total.focus();
  alert( ' exit gettax() total = ' + form.total.value )
}
 
function validateFormOnSubmit(theForm) {
var reason = "";
 
  reason += validateEmpty(theForm.fname);
  reason += validateEmpty(theForm.lname);
  reason += validateEmpty(theForm.address1);
  reason += validateEmpty(theForm.city);
  reason += validateEmpty(theForm.state);
  reason += validateEmail(theForm.email);
  reason += validatePhone(theForm.phone);
      
  if (reason != "") {
    alert("Some fields need correction:\n" + reason);
    return false;
  }
  gettax( theForm )
 
  return true;
}

Open in new window

0
 
jackie777Author Commented:
Ok, that worked, which is great, but total field only updates after you hit the form's submit button. Is there a way to make the form total field update with the revised total amount after "CA" has been placed inside the State field?
0
 
MMierzwaCommented:
Maybe you could use onblur event on State field for that?

0
 
jackie777Author Commented:
I tried adding what you suggested and I could no longer type in the State field on the form. Do you know what I am doing wrong with the blur?
<input name="state" type="text" id="state"  onChange="javascript:copy()" onfocus="this.blur()" size="3" maxlength="3">

Open in new window

0
 
MMierzwaCommented:
onblur events happens when element looses his focus.
In you example when field get focus immediately looses it because blur() is invoked.

You asked how to do this to field updates not on clicking submit but after "CA" written to state field.

So just put it in onChange event and call function if this field contains "CA". And forget about blur(). ;)
0
 
jackie777Author Commented:
Thanks for hanging in there with me guys!
0
 
HonorGodCommented:
Thanks for the grade & points.

Good luck & have a great day.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 12
  • 11
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now