Adding *ALL* fields in Form together

Discussion in 'Web Design and Development' started by geekindisguise, Sep 30, 2009.

  1. geekindisguise macrumors 6502

    geekindisguise

    Joined:
    Jul 22, 2008
    Location:
    Oklahoma
    #1
    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.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. geekindisguise thread starter macrumors 6502

    geekindisguise

    Joined:
    Jul 22, 2008
    Location:
    Oklahoma
    #3
    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.
     
  4. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    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=0b=inputs.lengtha<ba++) {
      
    // Make sure it's a text field and not another form tag
      
    if (inputs[a].type == 'text') {
        
    total += inputs[a].value;
      }
    }
     
  6. jaikob macrumors 6502

    jaikob

    Joined:
    Jul 1, 2008
    Location:
    Freeland, MI
    #6
    The question we all probably have is: What Fields?!? :confused:
     
  7. geekindisguise thread starter macrumors 6502

    geekindisguise

    Joined:
    Jul 22, 2008
    Location:
    Oklahoma
    #7
    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??
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Which my post will do for you then.
     
  9. rowsdower macrumors 6502

    Joined:
    Jun 2, 2009
    #9
    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.
     

Share This Page