additions

Javascript & Ajax
#1

how would I get something similar to this:

[code] 

   function foo() {
	   var text = document.getElementById("total");

	   var val1 = parseFloat(document.getElementById("payment").value);

var val2 = parseFloat(document.getElementById(“payment1”).value);var val3 = parseFloat(document.getElementById(“payment2”).value);var val4 = parseFloat(document.getElementById(“payment3”).value);
text.value = val1 + val2 + val3 + val4;

   }

</script>[/code]

to post the added numbers to this form

[code]

<?php // Query member data from the database and ready it for display $sql = mysql_query("SELECT * FROM cart where cart_id = '".$_SESSION['complete']."' && product123 !=''"); while($row = mysql_fetch_array($sql)){ $product = $row["product123"]; $price1 = $row["price"]; $id = $row["product_id"]; $qty = $row["quantity"]; $month = date("F Y"); $day = date("d"); $year = date("Y"); $date = date("Y-m-d"); ?> 
    <input name="product[]" type="hidden" value="<?php echo $product; ?>" />
    <input name="academy[]" type="hidden" value="<?php echo $academy; ?>" />
    <input name="month[]" type="hidden" value="<?php echo $month; ?>" />
    <input name="day[]" type="hidden" value="<?php echo $day; ?>" />
    <input name="year[]" type="hidden" value="<?php echo $year; ?>" />
    <input name="date[]" type="hidden" value="<?php echo $date; ?>" />
    <input name="price[]" type="hidden" value="<?php echo $price1; ?>" />
    <input name="id[]" type="hidden" value="<?php echo $id; ?>" />
    <input name="qty[]" type="hidden" value="<?php echo $qty; ?>" />
    
    <?php

}
?>

Please enter value given
do not enter commas (,) or dollar signs ($) 
    <input name="submit1" type="submit" value="Save Payment" onclick="foo()" />  
    
  

                   
    
    
  </p></div> <div class='label1' id='Credit1' style="display:none"> Please enter value given

do not enter commas (,) or dollar signs ($) 
    <input name="submit2" type="submit" value="Save Payment" onclick="foo()" />  
    
  

                   
    
    
  </p></div> <div class='label1' id='Check1' style="display:none"> Please enter value given

do not enter commas (,) or dollar signs ($) 
    <input name="submit3" type="submit" value="Save Payment" onclick="foo()" />  
    
  

                   
    
    
  </p></div> <div class='label1' id='Gift1' style="display:none"> Please enter value given

do not enter commas (,) or dollar signs ($) 
    <input name="submit4" type="submit" value="Save Payment"  onclick="foo()" />  
    
  

                   
    
    
  </p></div> 

</form>[/code]

hopefully the code logic will make more sense than my words have…sorry.

#2

Well, not really sure what your question was, but, here are a few notes on your code. Hope it helps…

First, in your HTML form’s code, you set names of fields different than ID’s of fields. This just mixes things up.
Usually, the name and ID are both the same. The name is used in the HTML side and ID is used in Javascript.
(Well, normally!) The Javascript function you posted should work. Let us know exactly what error you are receiving…

Also, what does this code do: onfocus=“fieldfocus(this.id);” ??? On focus, you set focus? It already has focus at the onfocus function.

Lastly, this code: onblur=“foo()” executes the foo-function if the mouse moves over the field. Is this what you wanted?

Well, not sure what you. Give us a hint to what it’s doing…

#3

don’t pay attention to the onblur and onfocus and such. also don’t pay attention to the names. nothing will post into the total field :frowning:
Ok, so I have 4 textboxes with ids payment, payment1, payment2, payment3 and with each box is a submit button, named submt1-4

I need to know how I can add all of the values into one textbox named total. so when submit1 is clicked, it will add payment to the total, then when submit2 is clicked, it will add payment1 to the value, etc. But, each text box could be used more than once, so payment could be used 8 times, and each of the 8 times, it needs to add the proper value to the total.

how would I do something like this?

#4

Well, other than being horrible to read, it appears to look like the code should work.
You do have fields set up correct, although they will NOT display due to the hidden and style-no-displays.

Searls03, Don’t get upset if I point out incorrect programming techniques to you. If you ask for a professional programmer’s help with a project, it must be readable first. You must help us help you.

On the other hand, if that Javascript is your actual code, then, NO it will not work that way. Here it is formatted in a somewhat more standard way. Compare the two! But, I figured out your code below this…

<script type="text/javascript">
  function foo() {
     var text = document.getElementById("total");
     var val1 = parseFloat(document.getElementById("payment").value);
     var val2 = parseFloat(document.getElementById("payment1").value);
     var val3 = parseFloat(document.getElementById("payment2").value);
     var val4 = parseFloat(document.getElementById("payment3").value);
     text.value = val1 + val2 + val3 + val4;
  }
</script>

Now, It seems that the getElementById does not work correctly. I did many various tests for you and came up with an answer. The following is a sample you can put online and test. It just adds 3 fields and puts the total in a fourth. The code is simple to follow. I think it is exactly what you are looking for. Hope this helps!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form addition testing...</title>
</head>
<body>

<script type="text/javascript">
  function foo() {
     var val1 = parseFloat(document.myform2.payment1.value);
     var val2 = parseFloat(document.myform2.payment2.value);
     var val3 = parseFloat(document.myform2.payment3.value);
     document.myform2.total.value = val1 + val2 + val3;
  }
</script>

<form id="myform2" name="myform2" method="post">
   <input type="text" name="payment1" id="payment1" value="<? echo $_POST['payment1']; ?>"><br />
   <input type="text" name="payment2" id="payment2" value="<? echo $_POST['payment2']; ?>" /><br />
   <input type="text" name="payment3" id="payment3" value="<? echo $_POST['payment3']; ?>" /><br /><br />
   <input name="submit3" type="submit" value="Save Payment" onclick="foo();"> 
   <br><br>TOTAL:  <input type="text" name="total" id="total" value="<? echo $_POST['total']; ?>">
</form>

</body>
</html>
Good luck...
#5

I know I am not the best at organizinbg code…there is no offense. I appreciate the criticism. A lot of the code I throw together pretty quickly, and if it works, I keep it. I will try the code, and see if it works :slight_smile:

#6

the code you gave me puts the php total in the foruth box, I want the javascript total in that box…

#7

I’m sorry Searls03, I just gave you a sample on how it would work. I used my own version so you could see how it works.

You should be able to change your lines like:
var val2 = parseFloat(document.getElementById(“payment1”).value);
to something like this so it works:
var val2 = parseFloat(document.myform2.payment1.value);

The main item was not using the getElementById part! Hope that makes sense. It should work. Give it a try!

#8

I have it working …I think, but it returns NaN meaning that there is no value in one box…how do I make empty boxes equal 0?

#9

Great! Now we are cooking… LOL…

For each input, use something like this… (Only an example, customize it for your code!)

 var val2 = parseFloat(document.getElementById("payment1").value);
 if (val2="NaN")
   {
    var2 = 0;
    }

Don’t forget to do it for each input field… Good luck, I think you are close!

#10

Ok, just a few more questions…since we are not using getelementbyid, would it still be the same?

#11

Well, on some systems you need to use it that way. Like we were doing before:

    var val2 = parseFloat(document.getElementById("payment1").value);

So, what that is doing is getting the document and then looking down thru the entire page (document) locating the ID that equals payment1. Then, it acquires the value of that field. Once the value is pulled, it is sent thru the parseFloat function.

What happens is sometimes the getElementById part will not be able to locate the correct handle that points to the document. this sometimes happens if you have more than one form on a page or two fields that have the same names. There is a way around it, but, it is complicated. You would have to set objects that point to the current document. Just a harder way to do it. The way I came up with:

 var val2 = parseFloat(document.myform2.payment1.value);

Does almost exactly the same thing. But, it uses the newer way of accessing fields in Javascript. It gets the document the same way, then, the form-name (which narrows down the search for the field) and then the field in the form. Lastly the value. So, almost the exact same thing.

What is nice about this new version, is that you can have more than one form on a page and it’s easy to access items from each form. Sometimes you want two forms on a page such as a log-in form and a registration form on one page. Each form would post to different PHP processing pages. But, all the fields could be accessed within Javascript for validation. Did that make sense, or mix you up?

Either way, we are still doing what we were originally, just with a slight change in the command format.

Hope that helps explain it… It worked in my tests, so, if you can’t get it to work, repost your code…

Good luck…

#12

one other thing, how would I do a sequence of when the value in total equals 10, a div will unhide?

#13

Sure, this is how you hide and show DIV’s with Javascript: (This is a sample, you have to customize it!)

( first get a pointer to the DIV you want to hide or show. Change the “yourdivname” to it’s name!)
divname = document.getElementById(“yourdivname”);

( to hide that DIV, do the following… Place this anywhere you need it, but, after the above line. )
divname.style.display = “none”;

( to show the DIV, use this line… )
divname.style.visibility = “block”;

Easy enough… Hope that helps…
PS: Not sure on the “getElementById” above, if you have trouble, let me know!

#14

but how do I make it show when total is 10?

#15

and how do I include it inside of this?
function blob() {
var val1 = parseFloat(document.myform2.payment1.value);
var val2 = parseFloat(document.myform2.payment2.value);
var val3 = parseFloat(document.myform2.payment3.value);
var val4 = parseFloat(document.myform2.payment4.value) ;
document.myform2.total123.value = parseFloat(document.myform2.total123.value) + val1 + val2 + val3 + val4;

}

#16

Well, something like this would work… (Not tested, I am leaving for a few hours!) Good luck!
[php]
function blob() {
var val1 = parseFloat(document.myform2.payment1.value);
var val2 = parseFloat(document.myform2.payment2.value);
var val3 = parseFloat(document.myform2.payment3.value);
var val4 = parseFloat(document.myform2.payment4.value) ;
document.myform2.total123.value = parseFloat(document.myform2.total123.value) + val1 + val2 + val3 + val4;
if (document.myform2.total123.value=10)
{
divname = document.getElementById(“yourdivname”);
divname.style.visibility = “block”;
}
}
[/php]
Something like that should do it… Make sure you change the “yourdivname” to the one you want to show…
If you can’t figure it out show your code again with your new changes and I will look at it late tonight!
Good luck…

#17

so close to figuring it out.

[code] [/code]
this code works very well up to the point where deletevali comes into play. when I try to run delte vali, the #more always disappears, even if the total123 is greater than the total. can you see why?

#18

Well, I do not see where deletevali(del) is called from, but, are you sure it is passing the correct
value for “del”?? Also, is the parseFloat("<?php echo $total; ?>")) section actually storing the correct
total value? You need to display or alert both of these and see if they are in the function correctly.

The code looks correct, so I am guessing that it is one of these two. Let us know…

#19

ok, well I have total123 as a text box and it shows the correct value. here is where it is called from

<?php setlocale(LC_MONETARY, "en_US"); echo money_format("%n", $payment12);?> <?php echo $type12; ?>
#20

Okay, so this is the problem line:

onClick="update(<?php echo $idp; ?>); deletevali(this.value);vali1();return false"

It in turn calls 1: update() 2: deletevali() 3: vali1()

You show the “deletevali” function in a post, and a vali() function, but, not update() or vali1()…
(I think you posted this is an earlier message, but, can you repost these two again? Thanks!)

update() and vali1()

Sponsor our Newsletter | Privacy Policy | Terms of Service