Solved

How to Process and Total field values before submitting form.

Posted on 2016-10-06
5
29 Views
Last Modified: 2016-10-07
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
Comment
Question by:Ron1959
  • 3
5 Comments
 
LVL 21

Expert Comment

by:Kim Walker
ID: 41832624
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
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41832760
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41832762
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
 

Author Closing Comment

by:Ron1959
ID: 41832793
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
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41833120
Standard jQuery.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now