What could be causing the form DOM object values to not update in this specific instance?

Question

What could be causing the form DOM object values to not update in this specific instance?

I'm currently using JavaScript to create a password checksum by utilizing the SubtleCrypto.digest() function. This function produces the result as a promise object, which is then fed into an inline function to convert the outcome to a text representation of the hexadecimal bytes. However, the issue arises when the inline text conversion function digToHex() fails to update the hidden fields within the DOM before being submitted to the server via a POST request.

The function is triggered through an onclick() event tied to the form's button. It captures the user's input password from the form and forwards it to the digestMsg() function to create the hash.

It should be noted that while I acknowledge the security concerns surrounding SHA-1, this is currently only a proof of concept.

Upon observing the output in the Chrome developer tools, across both the console and network tab, I noticed that the submitted values always end up as null. Even though the hash does seem to get generated by the digToHex() function (as shown by the value of chk.value in the console tab), the hidden fields don't get updated as expected. I've tried changing assignments and submitting the form inside and outside the digestMsg() promise handler context as seen in the code snippet below.

... (Code Snippet) ...

Uncommenting either of the two submit() lines only results in null values being received on the server, despite the correct values showing up in the console output of the Chrome developer tools. Further investigation into the network output tab of the developer tools confirms that only null values are being transmitted. Ideally, I should be seeing "opt" with a value of 3 and chk1 showing the hash value.

Below is the HTML code that triggers the JavaScript functionalities:

... (HTML Snippet) ...

Following additional tests conducted by Marius, it was found that the code does work correctly on a static HTML page. Therefore, the issue seems to be linked to how the HTML is being dynamically loaded for each form. The HTML for the main (parent) page is appended below:

... (Parent HTML Snippet) ...

javascript promise

Answer 1

Answer №1

Based on your code, it appears to be correct. I have taken your code, modified it slightly, and added some HTML elements for testing purposes. Ensure that the input fields are not disabled.

reinitialize();

function reinitialize() {
    var message = document.querySelector('#pwd1').value;

    // For testing purposes
    var option = document.querySelector('[name = "opt"]');
    var checkbox = document.querySelector('[name = "chk1"]');
    // For testing purposes

    digestMessage(message).then(result=>{
        var option = document.querySelector('[name = "opt"]');
        var checkbox = document.querySelector('[name = "chk1"]');
        option.value = 3;
        checkbox.value = convertToHex(result);

    console.log(option.value);
    console.log(checkbox.value);

    });

}

function convertToHex(buffer) {
    const bytes = new Uint8Array(buffer);
    const hexCodes = [...bytes].map(value => {
        const hexCode = value.toString(16);
        const paddedHexCode = hexCode.padStart(2, '0');
        return paddedHexCode;
    });
    return hexCodes.join('');
}

function digestMessage(message) {
    const encoder = new TextEncoder();
    const data = encoder.encode(message);
    return window.crypto.subtle.digest('SHA-1', data);
}

<input type="password" id="pwd1" value="test" />
<input type="text" name="opt" />
<input type="text" name="chk1" />

Answer 2

Based on your code, it appears to be correct. I have taken your code, modified it slightly, and added some HTML elements for testing purposes. Ensure that the input fields are not disabled.

reinitialize();

function reinitialize() {
    var message = document.querySelector('#pwd1').value;

    // For testing purposes
    var option = document.querySelector('[name = "opt"]');
    var checkbox = document.querySelector('[name = "chk1"]');
    // For testing purposes

    digestMessage(message).then(result=>{
        var option = document.querySelector('[name = "opt"]');
        var checkbox = document.querySelector('[name = "chk1"]');
        option.value = 3;
        checkbox.value = convertToHex(result);

    console.log(option.value);
    console.log(checkbox.value);

    });

}

function convertToHex(buffer) {
    const bytes = new Uint8Array(buffer);
    const hexCodes = [...bytes].map(value => {
        const hexCode = value.toString(16);
        const paddedHexCode = hexCode.padStart(2, '0');
        return paddedHexCode;
    });
    return hexCodes.join('');
}

function digestMessage(message) {
    const encoder = new TextEncoder();
    const data = encoder.encode(message);
    return window.crypto.subtle.digest('SHA-1', data);
}

<input type="password" id="pwd1" value="test" />
<input type="text" name="opt" />
<input type="text" name="chk1" />

Answer 3

Answer №2

I have successfully discovered a solution!

Originally, I utilized querySelector() to grab a reference to the form object and then immediately submitted it after processing:

document.querySelector('form').submit();

However, the form was submitted with the "opt" value set to '0', the specific numeric value I had assigned. It seemed like this command was referencing the original unaltered form being submitted right away.

To troubleshoot this issue, I created a reference to the form within the digestMsg() handler prior to processing:

var formObj = document.querySelector('form');

After updating the form values, I finally submitted it using the newly created reference:

formObj.submit();

This time, the form was submitted with the correct updated values. The revised code (without the test alerts) now appears like this:

function reboot() {
    var msg = document.querySelector('#pwd1').value;
    digestMsg(msg).then(result=>{
        var formObj = document.querySelector('form');
        var opt = document.querySelector('[name = "opt"]');
        var chk = document.querySelector('[name = "chk1"]');
        opt.value = 3;
        chk.value = digToHex(result);
        formObj.submit();
    });
}

I'm curious to understand why the initial command referenced the original form and ignored the updated values. Both scenarios seem to follow the same steps - form loading, value updates, and form submission. Also, why did the original version work on a static HTML page but not with a dynamically loaded form? I would appreciate any insights on this matter.

Thank you for the valuable comments that assisted me in finding a resolution.

This serves as a proof of concept, and further testing and adjustments are necessary to achieve a fully functional form.

Answer 4

I have successfully discovered a solution!

Originally, I utilized querySelector() to grab a reference to the form object and then immediately submitted it after processing:

document.querySelector('form').submit();

However, the form was submitted with the "opt" value set to '0', the specific numeric value I had assigned. It seemed like this command was referencing the original unaltered form being submitted right away.

To troubleshoot this issue, I created a reference to the form within the digestMsg() handler prior to processing:

var formObj = document.querySelector('form');

After updating the form values, I finally submitted it using the newly created reference:

formObj.submit();

This time, the form was submitted with the correct updated values. The revised code (without the test alerts) now appears like this:

function reboot() {
    var msg = document.querySelector('#pwd1').value;
    digestMsg(msg).then(result=>{
        var formObj = document.querySelector('form');
        var opt = document.querySelector('[name = "opt"]');
        var chk = document.querySelector('[name = "chk1"]');
        opt.value = 3;
        chk.value = digToHex(result);
        formObj.submit();
    });
}

I'm curious to understand why the initial command referenced the original form and ignored the updated values. Both scenarios seem to follow the same steps - form loading, value updates, and form submission. Also, why did the original version work on a static HTML page but not with a dynamically loaded form? I would appreciate any insights on this matter.

Thank you for the valuable comments that assisted me in finding a resolution.

This serves as a proof of concept, and further testing and adjustments are necessary to achieve a fully functional form.

What could be causing the form DOM object values to not update in this specific instance?

Answer №1

Answer №2

Similar questions

Collaborative spreadsheet feature within a browser-based software platform

Guidance on establishing an Array data type for a field in GraphQL Type declarations

Include the array in the 'content' property of the CSS using Jquery

Unshifting values in a JavaScript array only if they exist in another array

Troubleshooting the Expanded Row Problem in 'angular-ui-grid'

Implementing a Search Box feature in React-leaflet version 3.1.0

Increment field(s) conditionally while also performing an upsert operation in MongoDB

What are the steps for implementing responsive design animation in my particular scenario?

The property this.props.Values is not defined

Obtaining a string from the String prototype can be achieved by using

Display JSON on the screen so it can be easily copied and pasted

AngularJS synchronous $resource functionality allows for the ability to make parallel API

Ways to determine if prototype methods vary

Error encountered: Parsing error in Typescript eslint - The use of the keyword 'import' is restricted

position text to the right side of a slider gallery created with JavaScript

"Can you explain the concept of an undefined id in an AJAX request

I'm encountering a RangeError in nextjs when trying to pass props to a child component

Unlocking the Potential of NextJS with Dynamic Page Export - Say Goodbye to Static HTML!

Resolve the flexible width problem when inserting text in pptxgenjs

A problem arises when utilizing jQuery's $.isArray functionality