Set the value of a form element using javascript - still prompts required field

Question

I am setting values on a form in an iframe via Javascript. Please note that I do not have access to the page displayed in the iframe. My Javascript page is on the same server, so it has access to the form displayed.

//HTML of Forename field in form control
<input class="form-control" id="Forename" type="text" data-bind="value: dto.Forename">

Javascript setting the value:

var frameNode = document.getElementById('frm1');
var fieldNode = frameNode.contentDocument.getElementById('Forename');
fieldNode.value = FirstName; //previously defined

The values set successfully (see attached img). However, when I hit SAVE, I still get a 'values Required' message. I suspect this is because the Knockout Javascript libraries that binds the value with the view model, needs a keypress.

Even when I manually go into the form and press Enter/Tab after each value, I still get the message. It's only when I change the Forename and Surname manually to something else that the Save is successful.

Has anybody done something like this before? Thanks

In this image you can see the values are set

Answer 1

I believe the problem you're experiencing is actually due to a deeper issue involved in using a knockout binding. Updating the value of a UI control directly has no effect because the real underlying value is stored in a javascript view-model object. The DOM element only mirrors that value, and updates are performed using a change event hook under the hood. When you change the value manually on the UI the change event is triggered and the view-model value gets updated.

Knockout.js Docs

So to properly update the values you should try using the knockout library to update the underlying data:

var frameNode = document.getElementById('frm1');
var fieldNode = frameNode.contentDocument.getElementById('Forename');
var viewModel = ko.dataFor(fieldNode);
viewModel.dto.Forename(FirstName); //value setting works like a function

If you can't get that to work you can also try manually triggering the change event. That's far easier if you have jQuery, but can still be done without. See How can I trigger an onchange event manually?