?
Solved

How to Process and Total field values before submitting form.

Posted on 2016-10-06
5
Medium Priority
?
49 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 22

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 58

Accepted Solution

by:
Julian Hansen earned 2000 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 58

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 58

Expert Comment

by:Julian Hansen
ID: 41833120
Standard jQuery.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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 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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

770 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