Help in totaling $ amount on web form

Pdesignz
Pdesignz used Ask the Experts™
on
Hello, I am newbie to javascript and Jquery. I would like to use jquery as a solution if possible. I have a form that am developing for a non-profit organization's annual luncheon. The old form was pdf and am converting to html/web format to have responses via email. On the form I have 3 fields. # of tickets, Donation and Total.

The # of tickets would be the # entered at a rate of $65.00 per ticket
Donation would be amount that the user would enter.
Total field would be the total amount of tickets ordered @ $65.00 per ticket + total donation being sent.

In addition, not sure if possible but wanted to find out if doable...
People purchasing tickets will also be able to bring up to 8-10 guests. Information collected for guests would be Name, Phone and email. I currently have setup for 8 additional guests, but as you can imagine this makes the form extremely long. Is there a way to maybe have a + icon or "Add guest" and then be able to enter information for additional guests. I am thinking on a guest to guest basis. So Add guest or + would only add a single guest not field for 8-10 additional guests and maybe if they hit again it would now have room for 2 additional guests and so on...

Staged url is here, http://dev.coronadosoroptimist.org/coronado-soroptimist-legends.asp

Any help or code provided would be most helpful and appreciated!

Thanks
webpage.txt
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
you can have your guest div on page with proper controls and using jquery you can open it in another dialog on the click of AddGuest button/image.

<div id="dialog" title="Dialog Title"><!--Here goes your html for add guest --></div>

Assuming you have button with id btnGuest, here is how you can use jquery to open a dialog:-

$('document').ready(function()
{
$('#btnGuest').click = $('#dialog').dialog();
});

Open in new window


read more about dialog here:-
http://docs.jquery.com/UI/Dialog
PdesignzPPC Specialist

Author

Commented:
Is there a way to limit the # of users you can add to 8-10. Also would this then add to the existing form and then results would then be received via email.
Not sure what exactly you want.

Please go to below URL and see if that's what you wanted.

http://jsfiddle.net/attu143/wuqA9/2/

I have attached the code file as well.

Let me know if you need more details.

donations-calculations.php
Exploring SharePoint 2016

Explore SharePoint 2016, the web-based, collaborative platform that integrates with Microsoft Office to provide intranets, secure document management, and collaboration so you can develop your online and offline capabilities.

PdesignzPPC Specialist

Author

Commented:
atique - Is there a way to set the labels and id's of the inputs that are generated dynamically. I am using an asp formmail script to process the form and in that asp file it references the id's that are then sent with data to specified email...

Thanks
Yes it is possible to add labels and id's of the inputs that are generated dynamically.

Change below code as per your needs.

var html = '<div class="guestRow"><label>Name</label>&nbsp;<input type="text" name="name[]" value="" />&nbsp;&nbsp;<label>Phone</label>&nbsp;<input type="text" name="phone[]" value="" />&nbsp;&nbsp;<label>Email</label>&nbsp;<input type="text" name="email[]" value="" />&nbsp;&nbsp;&nbsp;<a href="#" id="remove_guest" title="Click to remove guest">Remove Guest</a></div>';
Ex:

<script language="javascript" type="text/javascript">
            jQuery(document).ready(function($)
            {
                  var no_of_users = 0;
                  
                  var no_of_fields= 0;
                  
                  // code to calculate the total
                  $("input.calculations").live('focus', function(e)
                  {
                        $(this).select();
                  });
                  
                  $("input.calculations").live('change', function(e)
                  {
                        var no_of_tickets = Number($("input#no_of_tickets").val());
                        var donation = Number($("input#donation").val());
                        var total = 0;                        
                        var tickets_amount = 0;
                        
                        tickets_amount = no_of_tickets * 65;
                        
                        total = tickets_amount + donation;
                        
                        $("input#total").val(total);
                  });
                  
                  // Code to add guest dynamically
                  $("a#add_guest").live('click', function(e)
                  {
                        e.preventDefault();
                        
                        if( no_of_users == 10 )
                        {
                              alert('You can only add 10 guests.');
                              return false;
                        }
                        
                        no_of_fields++;
                        
                        var html = '<div class="guestRow"><label>Name</label>&nbsp;<input type="text" name="name[]" id="name_'+no_of_fields+'" value="" />&nbsp;&nbsp;<label>Phone</label>&nbsp;<input type="text" name="phone[]" id="phone_'+no_of_fields+'" value="" />&nbsp;&nbsp;<label>Email</label>&nbsp;<input type="text" name="email[]" id="email_'+no_of_fields+'" value="" />&nbsp;&nbsp;&nbsp;<a href="#" id="remove_guest" title="Click to remove guest">Remove Guest</a></div>';
                        
                        $("div.guestContainer").append(html);
                        
                        no_of_users++;
                        
                        return false;
                  });
                  
                  // Code to remove guest
                  $("a#remove_guest").live('click', function(e)
                  {
                        e.preventDefault();
                        
                        if( confirm('Are you sure want to remove this guest?') )
                        {
                              $(this).parent().remove();
                              no_of_users--;
                        }
                        
                        return false;
                  });
            });
      </script>
PdesignzPPC Specialist

Author

Commented:
Not sure if possible but if it can be done, I would like to see if we can make it so...
On the Donations and Total input, instead of displaying as125 could you make it so that it can display as $125.00

On the add guest/remove guest feature can you show me how this would would be written into a 2 or column table as the form I have at the moment is in a table and want to have the labels and inputs line up. If also possible how could this also be written into a ul within a div, so I can see how that is accomplished as well. Not sure if the add guest link could be an image as well or instead of a link...

I appreciate the help, it is most helpful!
On the Donations and Total input, instead of displaying as125 could you make it so that it can display as $125.00

<!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=ISO-8859-1"/>
      <meta name="description" content="" />
      <meta name="keywords" content="" />
      <title>Help in totaling $ amount on web form</title>      
      
      <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
      <script language="javascript" type="text/javascript">
            jQuery(document).ready(function($)
            {
                  var no_of_users = 0;
                  
                  var no_of_fields= 0;
                  
                  // code to calculate the total
                  $("input.calculations").live('focus', function(e)
                  {
                        $(this).select();
                  });
                  
                  $("input.calculations").live('change', function(e)
                  {
                        var no_of_tickets = Number($("input#no_of_tickets").val());
                        var donation = Number($("input#donation").val());
                        var total = 0;                        
                        var tickets_amount = 0;
                        
                        tickets_amount = no_of_tickets * 65;
                        
                        total = tickets_amount + donation;
                        
                        $("input#total").val('$'+CommaFormatted(total));
                  });
                  
                  // Code to add guest dynamically
                  $("a#add_guest").live('click', function(e)
                  {
                        e.preventDefault();
                        
                        if( no_of_users == 10 )
                        {
                              alert('You can only add 10 guests.');
                              return false;
                        }
                        
                        no_of_fields++;
                        
                        var html = '<div class="guestRow"><label>Name</label>&nbsp;<input type="text" name="name[]" id="name_'+no_of_fields+'" value="" />&nbsp;&nbsp;<label>Phone</label>&nbsp;<input type="text" name="phone[]" id="phone_'+no_of_fields+'" value="" />&nbsp;&nbsp;<label>Email</label>&nbsp;<input type="text" name="email[]" id="email_'+no_of_fields+'" value="" />&nbsp;&nbsp;&nbsp;<a href="#" id="remove_guest" title="Click to remove guest">Remove Guest</a></div>';
                        
                        $("div.guestContainer").append(html);
                        
                        no_of_users++;
                        
                        return false;
                  });
                  
                  // Code to remove guest
                  $("a#remove_guest").live('click', function(e)
                  {
                        e.preventDefault();
                        
                        if( confirm('Are you sure want to remove this guest?') )
                        {
                              $(this).parent().remove();
                              no_of_users--;
                        }
                        
                        return false;
                  });
            });
            
            function CommaFormatted(amount)
            {
                  var delimiter = ","; // replace comma if desired
                  var amount = amount + '';
                  var a = amount.split('.',2);      
                  if( a[1] )
                  {
                        var d = a[1];
                  }
                  else
                  {
                        var d = 0;
                  }
                  var i = parseInt(a[0]);
                  if(isNaN(i)) { return ''; }
                  var minus = '';
                  if(i < 0) { minus = '-'; }
                  i = Math.abs(i);
                  var n = new String(i);
                  var a = [];
                  while(n.length > 3)
                  {
                        var nn = n.substr(n.length-3);
                        a.unshift(nn);
                        n = n.substr(0,n.length-3);
                  }
                  if(n.length > 0) { a.unshift(n); }
                  n = a.join(delimiter);
                  if(d.length < 1) { amount = n; }
                  else { amount = n + '.' + d; }
                  
                  amount = minus + amount;
                  
                  var a = amount.split('.',2);
                  if( a[1].length == 1 )
                  {
                        amount = amount + '0';
                  }
                  
                  return amount;
            }
      </script>
</head>
<body>

<div class="formContainer">
      <form name="name_of_form" id="id_of_form" method="post" action="">
            
            <div class="rowContainer">
                  <label for="no_of_tickets"># of tickets</label>
                  <input type="text" name="no_of_tickets" id="no_of_tickets" class="calculations" value="0" />
                  
                  <label for="donation">Donation</label>
                  <input type="text" name="donation" id="donation" class="calculations" value="0" />
                  
                  <label for="total">Total</label>
                  <input type="text" name="total" id="total" class="calculations" value="$0.00" readonly="" />
            </div>
            <br /><br />
            
            <div class="guestContainer">
                  
                  <div>
                        <a href="#" id="add_guest" title="Click to add guest">Add Guest</a>
                  </div>
                  
                  <br /><br />
            </div>
            
      </form>
</div>

</body>
</html>
On the add guest/remove guest feature can you show me how this would would be written into a 2 or column table as the form I have at the moment is in a table and want to have the labels and inputs line up.

Replace below code

var html = '<div class="guestRow"><label>Name</label>&nbsp;<input type="text" name="name[]" id="name_'+no_of_fields+'" value="" />&nbsp;&nbsp;<label>Phone</label>&nbsp;<input type="text" name="phone[]" id="phone_'+no_of_fields+'" value="" />&nbsp;&nbsp;<label>Email</label>&nbsp;<input type="text" name="email[]" id="email_'+no_of_fields+'" value="" />&nbsp;&nbsp;&nbsp;<a href="#" id="remove_guest" title="Click to remove guest">Remove Guest</a></div>';

with

var html = '<table border="0" align="center" width="100%" cellpadding="0" cellspacing="0"><tr class="guestRow"><td valign="top" align="left"><label>Name</label></td><td valign="top" align="left"><input type="text" name="name[]" id="name_'+no_of_fields+'" value="" /></td></tr><tr class="guestRow"><td valign="top" align="left"><label>Phone</label></td><td valign="top" align="left"><input type="text" name="phone[]" id="phone_'+no_of_fields+'" value="" /></td></tr><tr class="guestRow"><td valign="top" align="left"><label>Email</label></td><td valign="top" align="left"><input type="text" name="email[]" id="email_'+no_of_fields+'" value="" /></td></tr><tr class="guestRow"><td valign="top" align="left"><a href="#" id="remove_guest" title="Click to remove guest">Remove Guest</a></td><td valign="top" align="left">&nbsp;</td></tr></table>';

And also change replace

   // Code to remove guest
                  $("a#remove_guest").live('click', function(e)
                  {
                        e.preventDefault();
                       
                        if( confirm('Are you sure want to remove this guest?') )
                        {
                              $(this).parent().remove();
                              no_of_users--;
                        }
                       
                        return false;
                  });

with

// Code to remove guest
                  $("a#remove_guest").live('click', function(e)
                  {
                        e.preventDefault();
                        
                        if( confirm('Are you sure want to remove this guest?') )
                        {
                              $(this).parent().parent().parent().remove();
                              no_of_users--;
                        }
                        
                        return false;
                  });
I am not very good with UL tag. Just replace your HTML code with var html = '... variable.
PdesignzPPC Specialist

Author

Commented:
Appreciate the help, thanks!
Welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial