I have a workflow where values are passed from one form to another. I need to have one of these values in the newly created form multiplied by 40 and inserted into another field. I can only figure out how to do this when the value is typed in but not passed in from a parent form.

The code below works, but again I have to actually type in a value over the one that is already passed in

const pallet = 40;

$(document).ready(function() {
  $("#FreeNumberField_17").change(function() { 
    $('input[name="FreeNumberField_07"]').val((
      +(pallet * $('input[name="FreeNumberField_17"]').val()).toFixed(3)
    ));
  });
});

I have a workflow where values are passed from one form to another. I need to have one of these values in the newly created form multiplied by 40 and inserted into another field. I can only figure out how to do this when the value is typed in but not passed in from a parent form.

The code below works, but again I have to actually type in a value over the one that is already passed in

const pallet = 40;

$(document).ready(function() {
  $("#FreeNumberField_17").change(function() { 
    $('input[name="FreeNumberField_07"]').val((
      +(pallet * $('input[name="FreeNumberField_17"]').val()).toFixed(3)
    ));
  });
});

• javascript
• jquery

Share Follow edited Mar 7 at 20:30 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Mar 7 at 20:14 JerryJerry 4155 bronze badges 4

• 2 Where is the code that's passing the value from the parent form? You need to also set the value there - or trigger an event which will do it for you – Rory McCrossan Commented Mar 7 at 20:29
• 1 How is the value being "passed in"? When the page loads, where is this value available? It's not clear to me what prevents you from using the value if you have it somewhere. Can you update the question with a minimal reproducible example to clarify the problem? – David Commented Mar 7 at 20:29
• 2 What do you mean by "parent form"? Forms can't be nested in HTML. – Barmar Commented Mar 7 at 20:41
• Your code only runs when the change event is triggered on the other field. If you want to run the code when the page is first loaded or when the form is created, call $("#FreeNumberField_17").change() to trigger it. – Barmar Commented Mar 7 at 20:43

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

The problem with your code not working is that the entire functionality of calculating the value for the child input is written directly inside the .change() event handler of the parent input.

Events are triggered only when we manually, physically invoke them on the site. In this case, the calculation for the child input will only start when you begin typing in the parent input, and not earlier.

When you simply subscribe to an event in JS or jQuery (like .change() ), it's like telling the browser: "Execute this code inside the function only when this event happens, not before."

So, if you want the value of the child input to be calculated immediately upon page load, you need to execute the calculation logic right away, not only when the .change() event is triggered by a user interaction.

There are two simplest ways to implement this. One is to create a separate function that will calculate the value of the child input and call it immediately when the page loads, so it calculates the value by looking at the parent input without waiting for the event. Then, you can additionally call this function when the event is triggered.

$(document).ready(function(){
    const $parentInp = $('#FreeNumberField_17');
    const $childInp = $('input[name="FreeNumberField_07"]');

    const pallet = 40;

    function calcChildValueBy( numParam ){
        $childInp.val((
            +(pallet * numParam).toFixed(3)
        ));
    }

    calcChildValueBy($parentInp.val());

    $parentInp.change(function() {
        let parentInpVal = $parentInp.val();

        calcChildValueBy(parentInpVal);
    });
});

Also, if you don't want to bother with the extra steps, you can simply define the event and then programmatically trigger it on page load so that the child input recalculation code is executed programmatically. In jQuery, the .trigger() method is responsible for programmatically triggering events.

$(document).ready(function(){
    const $parentInp = $('#FreeNumberField_17');
    const $childInp = $('input[name="FreeNumberField_07"]');

    const pallet = 40;

    $parentInp.change(function() { 
        $childInp.val((
            +(pallet * $parentInp.val()).toFixed(3)
        ));
    });

    let parentDefaultValue = $parentInp.val();
    $parentInp.val(parentDefaultValue).trigger('change');
});

In general, the options are similar, choose what you like.

Also, to make it clearer here are examples on jsfiddle:

first example: https://jsfiddle/p7gaLq5j/1/

second example: https://jsfiddle/p7gaLq5j/

You need to listen for the input event instead of the change event. About the change event:

the change event is not necessarily fired for each alteration to an element's value. change event

The input event will fire when the value if the input changes.

You are writing "but not passed in from a parent form". Forms cannot be nested:

Permitted content Flow content, but not containing <form> elements technical summary

const pallet = 40;

document.addEventListener('DOMContentLoaded', e => {
  document.forms.form01.FreeNumberField_17.addEventListener('input', e => {
    document.forms.form02.FreeNumberField_07.value = (40 * e.target.value).toFixed(3);
  });
});

<form name="form01">
  <label>From here: <input name="FreeNumberField_17" type="number"></label>
</form>

<form name="form02">
  <label>To here: <input name="FreeNumberField_07" type="number" readonly></label>
</form>