如何实现点击按钮时递增两个文本框的数值？

Let's walk through how to implement the functionality where clicking a button increments values in two text boxes, building on your existing code and filling in the gaps.

Approach #

We can handle this in two practical ways depending on your needs:

• Individual buttons for each field: Use your existing .qtyplus pattern where each button targets a specific text box via a field attribute.
• Single button for both fields: Create one button that triggers an increment for both text boxes at once.

1. Individual Buttons (Per Text Box) #

First, set up your HTML with the required elements. Each increment button should have the qtyplus class and a field attribute matching the input's name:

<input type="text" name="rs" id="rs" value="0">
<button class="qtyplus" field="rs">Increment RS</button>

<input type="text" name="stock" id="stock" value="0">
<button class="qtyplus" field="stock">Increment Stock</button>

Then, refine your existing jQuery code to make it more robust:

jQuery(document).ready(function() { 
    // Handle increment button clicks
    $('.qtyplus').click(function(e) { 
        e.preventDefault(); 
        const fieldName = $(this).attr('field'); 
        const targetInput = $('input[name="' + fieldName + '"]');
        const currentValue = parseInt(targetInput.val()); 
        
        // Update the value: increment if valid, else set to 1000
        if (!isNaN(currentValue)) { 
            targetInput.val(currentValue + 1000); 
        } else { 
            targetInput.val(1000); 
        } 
    }); 
});

I added quotes around the attribute selector to avoid issues with special characters and used const for cleaner variable scoping.

2. Single Button to Increment Both Fields #

If you want one button to update both text boxes, use this setup:

HTML:

<input type="text" name="rs" id="rs" value="0">
<input type="text" name="stock" id="stock" value="0">
<button id="incrementBoth">Increment Both Values</button>

jQuery code (add this to your document ready function):

jQuery(document).ready(function() { 
    // Handler for bulk increment
    $('#incrementBoth').click(function(e) { 
        e.preventDefault(); 
        
        // Reusable function to increment a single field
        const incrementField = function(fieldName) {
            const input = $('input[name="' + fieldName + '"]');
            const val = parseInt(input.val());
            input.val(!isNaN(val) ? val + 1000 : 1000);
        };
        
        // Apply increment to both fields
        incrementField('rs');
        incrementField('stock');
    }); 
});

Fixing Your Incomplete buttonClick Function #

If you prefer using a vanilla JavaScript function (e.g., with onclick), complete it like this:

function buttonClick() { 
    // Increment first field (rs)
    const rsInput = document.getElementById('rs');
    let rsVal = parseInt(rsInput.value);
    rsInput.value = !isNaN(rsVal) ? rsVal + 1000 : 1000;
    
    // Increment second field (replace with your actual ID)
    const stockInput = document.getElementById('stock');
    let stockVal = parseInt(stockInput.value);
    stockInput.value = !isNaN(stockVal) ? stockVal + 1000 : 1000;
}

Then link it to your button:

<button onclick="buttonClick()">Increment Both</button>

Key Tips #

• Always convert input values to numbers with parseInt before doing arithmetic—inputs return strings by default.
• Check if the parsed value is valid (!isNaN) to handle empty or non-numeric input gracefully.
• Using reusable functions (like incrementField) keeps your code DRY and easier to maintain if you add more fields later.

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