Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Adding *ALL* fields in Form together

geekindisguise

geekindisguise

macrumors 6502
Original poster
Jul 22, 2008
297
0
Oklahoma
I am making a form that will have fields added to it with jQuery, I then want to have all of the fields added together. I know of a way if it WASNT dynamically being added, but I need it to be all dynamic. So I need an array or something that will gather ALL of the fields values and just ADD (+) them together.

Its really important, and I have NO idea what to do!
So, please help.
 
Can you elaborate on what you want to do and maybe show some example HTML? I can likely help, but have to understand what you're talking about first.
 
angelwatt said:
Can you elaborate on what you want to do and maybe show some example HTML? I can likely help, but have to understand what you're talking about first.
Click to expand...

Code: 
<body>
	<form>
<input type="text" name="TextField1">
        </form>
		<a href="#" class="add">ADD</a>
		<a href="#" class="remove">REMOVE</a>
</body>
- HTML

Code: 
$(function(){
        var i=$('form input').size() + 1;
		
        $('a.add').click(function(){
            $('<br><input type="text" name="TextField' + i + '">').appendTo('form');
            i++;
        });

        $('a.remove').click(function(){ 
            $('form input:last').remove();
            i--;
        });
    });
- jQuery for adding inputs.

I have NO idea how to add all of the inputs, so I haven't even tried yet. Don't even know where to start.
 
When you say, "I then want to have all of the fields added together" you mean? Are you wanting to add values in the fields, or are you trying to create a bigger input, or something?

If it's about adding values of the fields, here's a way, though I don't use jQuery so it'll be straight JavaScript.

PHP: 
var inputs = document.getElementsByTagName('form')[0].getElementsByTagName('input');
var total = 0;
for (var a=0, b=inputs.length; a<b; a++) {
  // Make sure it's a text field and not another form tag
  if (inputs[a].type == 'text') {
    total += inputs[a].value;
  }
}
 
jaikob said:
The question we all probably have is: What Fields?!? :confused:
Click to expand...

There are Text INputs in a form, and each one will have a number in them. I then want all the numbers added together and shown in the last Text Input. Is this clearer for anyone??
 
I haven't done jQuery in a while and I haven't tested this, but you should be able to do something like this. If you change your code to this (added class="toAdd"):

Code: 
$(function(){
        var i=$('form input').size() + 1;
		
        $('a.add').click(function(){
            $('<br><input type="text" name="TextField' + i + '" class="toAdd">').appendTo('form');
            i++;
        });

        $('a.remove').click(function(){ 
            $('form input:last').remove();
            i--;
        });
    });

I think something along these lines will work to total the fields:

Code: 
var total = 0;
$(".toAdd").each(function() {total += parseFloat(this.value);});

You probably also want to do some error checking on the fields to make sure that they are actually numbers.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back