如何在Drupal View表单中用jQuery定位fieldset最后一个<input>并实现求和

Hey there! I totally get that dealing with dynamically generated Drupal Views forms when you're not deep into jQuery/JS can feel overwhelming. No worries though—we can build a solution that works with the auto-generated markup, no custom classes/IDs needed, and it’ll handle new fields added down the line too.

Here’s the plan: #

• Loop through every <fieldset> on the page (since we don’t have custom identifiers, we’ll target the element directly)
• For each fieldset, grab all the form fields that hold numeric values (we’ll assume they’re text or number inputs—we can adjust if needed)
• Skip the last field in each fieldset (this is where we’ll put the total sum)
• Add up all the values from the other fields
• Populate that sum into the final field in the set

The jQuery Code (with explanations): #

I’ll walk through each part so you know what’s going on, even if you don’t know much JS:

// Wait until the page is fully loaded before running our code
$(document).ready(function() {
  // Create a reusable function to calculate sums for all fieldsets
  function calculateFieldsetTotals() {
    // Go through each fieldset one by one
    $('fieldset').each(function() {
      var $currentFieldset = $(this);
      // Grab all input fields inside this fieldset (adjust the selector if your fields are not inputs)
      var allFields = $currentFieldset.find('input[type="number"], input[type="text"]');
      
      // If there are fewer than 2 fields, skip (we need at least one to sum and one for the total)
      if (allFields.length < 2) return;
      
      // Split the fields: all except the last are for summing, last is for the total
      var fieldsToSum = allFields.slice(0, -1);
      var totalField = allFields.last();
      
      // Calculate the sum
      var total = 0;
      fieldsToSum.each(function() {
        // Convert the field value to a number; if it's empty or not a number, use 0
        var fieldValue = parseFloat($(this).val()) || 0;
        total += fieldValue;
      });
      
      // Put the total into the last field (use toFixed(2) if you want 2 decimal places)
      totalField.val(total.toFixed(2));
    });
  }

  // Run the calculation once when the page first loads
  calculateFieldsetTotals();

  // Optional: Update the total in real-time when someone types in a field
  $('fieldset').on('input', 'input[type="number"], input[type="text"]', function() {
    // Find the fieldset that contains the changed input
    var $parentFieldset = $(this).closest('fieldset');
    var allFields = $parentFieldset.find('input[type="number"], input[type="text"]');
    
    if (allFields.length < 2) return;
    
    var fieldsToSum = allFields.slice(0, -1);
    var totalField = allFields.last();
    
    var total = 0;
    fieldsToSum.each(function() {
      var fieldValue = parseFloat($(this).val()) || 0;
      total += fieldValue;
    });
    
    totalField.val(total.toFixed(2));
  });
});

Important Things to Keep in Mind: #

• Adjust Selectors if Needed: If your form uses <select> dropdowns or <textarea>s instead of inputs, just add those to the selectors (e.g., find('input[type="number"], input[type="text"], select')).
• Integer vs. Decimal: The code uses parseFloat to handle decimals. If you only need whole numbers, swap that out for parseInt.
• Real-Time Updates: The second part of the code makes the total update as soon as someone types. If you don’t need that, you can delete the entire on('input') block—just keep the initial calculateFieldsetTotals() call for page-load calculation.
• Adding to Drupal: To use this code, you can either:
  • Add it to a custom JavaScript file attached to your View/form (the cleanest long-term option)
  • Use an "Insert HTML" block in your View and wrap the code in <script> tags (quick test option)

How to Test: #

1. Add the code to your site using one of the methods above
2. Load your form page
3. Enter numbers in the fields before the last one in each fieldset—you’ll see the total populate either right when the page loads or as you type!

内容的提问来源于stack exchange，提问作者Sushant Bhargav