• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 69
  • Last Modified:

How to Process and Total field values before submitting form.

In a product configurator, as a user fills fields in on a form, I want to update a Total field.

So, if the user selects this or that configuration option, rules will dictate the value added to the total and, perhaps, change the choices available on other options when they are either dependent on one another or mutually exclusive.

This would be easy if there was a submit after each selection, but I want to save the submit for when the form is complete.

I'm starting fresh, so I can go in whatever is the best direction.  Is there a JQuery script that already does this?

Thanks!

- Ron
0
Ron1959
Asked:
Ron1959
  • 3
1 Solution
 
Kim WalkerWeb Programmer/TechnicianCommented:
I'm not aware of a jQuery script that does all these myriad of different things. How are the choices being presented that you want to change? Are you wanting to change the options in a select list? ...hide and show checkboxes or radio buttons? ...edit content in paragraphs?

The HTML DOM is rich with event handlers that can execute routines when selections or values are changed in a form. For some form fields, the onChange event can trigger routines. For others, the onClick event can trigger routines. These events and the routines they trigger can be configured using either native javascript or jQuery or both.
0
 
Julian HansenCommented:
Here is a rudimentary example but it demonstrates the concept
HTML
<form>
  Shipping : <input type="text" data-type="add" name="field1" class="total2way"/><br/>
  Quantity <input type="text" data-type="link" data-link="price" name="field1" class="total2way"/><br/>
  Price: <input type="text" id="price" name="price" class="total2way" /><br/>
  Total: <input type="text" id="total" name="total"/>
</form>

Open in new window

jQuery
$(function() {
  // bind to a change on any of the fields that affect the total
  $('.total2way').change(function() {
    // Reset total
    var total = 0;
    // iterate over the fields that affect total
    $('.total2way').each(function() {
      // check the data-type to see what rule to apply
      var t = $(this).data('type');
      // Add: just add to total
      if (t == 'add') {
        total += $(this).val() * 1;
      }
      // Link: this field is linked to another field by a product (mult)
      // the data-link specifies the linked field - this rule gets the two
      // values and multiplies them
      else if (t == 'link') {
        var link = $('#' + link).val();
        total += $(this).val() * $('#' + $(this).data('link')).val();
      }
    });
  // All done so update the total
    $('#total').val(total);
  });
});

Open in new window

Working sample here
0
 
Julian HansenCommented:
It might be a bit of overkill in terms of a learning curve, but you will be able to do this extremely easily with AngularJs.
0
 
Ron1959Author Commented:
This is exactly what I'm looking for, Julian.  

Do I need an include statement, or is this part of the standard JQuery distribution?

Thanks!

- Ron
0
 
Julian HansenCommented:
Standard jQuery.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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