Filling a react form using JQuery

Question

So I am in the process of attempting to use some simple code injection to populate a form and submit it, in most cases, I am able to have the textbox revalidate by firing the blur event, but in the case of a react form build on redux, it does not validate in the same manner.

I tried using the following code, but it does not work:
top.jQuery('input#last-name-\\[0\\]').val('Smith').attr('value','Smith').trigger('blur');

Is there an event that I should be firing instead of the input event?

The values are not detected as firing the click event on the submit fails validation, as though no data has been entered in the form.

I tried a number of triggers including keyup, keydown, keypress, focus, blur, and changed.

Please note that using default values are not an option, because I am injecting the form data into a website that is not my own.

This is the code that react is using to build the component:

function LastNameComponent(_ref) {
    var index = _ref.index,
        isFirstField = _ref.isFirstField,
        formatValue = _ref.formatValue;

    var minLength = 2;
    var maxLength = 80;
    return _react2.default.createElement(
        'div',
        { className: 'form--item span3' },
        _react2.default.createElement(
            'label',
            { className: 'search-label small field__icon_group' },
            _react2.default.createElement(
                'span',
                null,
                '*'
            ),
            'Last Name',
            _react2.default.createElement(_TextInput2.default, {
                id: "last-name-[" + index + "]",
                model: "searchParams.searches[" + index + "].fields.lastName",
                validators: { required: function required(value) {
                        return !value || value.length < minLength || value.length > maxLength;
                    } },
                formatValue: formatValue
            }),
            _react2.default.createElement(_ErrorMessage2.default, {
                model: "searchParams.searches[" + index + "].fields.lastName",
                messages: { required: "Please enter the member's Last Name" }
            })
        )
    );
}

Can you post the component / redux code that's doing this? It's a little hard to imagine — azium
– azium, Commented Jun 28, 2017 at 13:57
I added the component source, let me know if it makes sense. (I have never worked with react or redux myself so I'm sorry if it wasn't what you needed!) — Bitz
– Bitz, Commented Jun 28, 2017 at 14:03
Not my code, @Chris, I'll ask the devs if I ever have a chance to meet with them :P My implementation is limited to injecting form data from the client side. — Bitz
– Bitz, Commented Jun 28, 2017 at 14:06
@Bitz, sorry my bad. I skimmed through your post and thought that was your code. I missed the part where you said this is part of the source. — Chris
– Chris, Commented Jun 28, 2017 at 14:07

Dan · Accepted Answer · 2017-07-12 17:55:39Z

6

This does the trick

var target = $('input')[0]
var event = document.createEvent("HTMLEvents");  
$('input').val('Smith')
event.initEvent("input", true, true);
target.dispatchEvent(event);

Working example with same code here: https://codesandbox.io/s/W66Z4RA3E

Refer to https://github.com/facebook/react/issues/3249

Seems like event triggering is non trivial because dom and react events are not one to one.

edited Jul 12, 2017 at 17:55

answered Jul 7, 2017 at 1:50

Dan

3,07021 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bitz Over a year ago

Thanks! i will test this when I get to work, but it seems correct!

Anand Singh · Accepted Answer · 2020-02-24 14:55:21Z

3

Out of all the answers and a lot of googling, I found this to be working

function changeValue(input,value){

    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      "value"
    ).set;
    nativeInputValueSetter.call(input, value);

    var inputEvent = new Event("input", { bubbles: true });
    input.dispatchEvent(inputEvent);
}

We are using window.HTMLInputElement.prototype that is HTMLInputElement. An interface that provides special properties and methods for manipulating the options, layout, and presentation of input elements.

Then we will use Object.getOwnPropertyDescriptor() method to set input value. Last we will dispatch change event on the input to simulate with React onChange

Here is a detailed explanation of this answer: https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04

answered Feb 24, 2020 at 14:55

Anand Singh

1,29515 silver badges23 bronze badges

1 Comment

anthonygood Over a year ago

This is the only approach that worked for me.

V. Lipunov · Accepted Answer · 2020-02-03 03:54:15Z

1

event.initEvent("input", true, true); is now deprecated. The proper way is:

const runInject = (inputElement, value) => {
  $(inputElement)
    .val(value)
    .attr('value', value);
  const event = new Event('input', { bubbles: true, cancelable: true });
  inputElement.dispatchEvent(event);
};

answered Feb 3, 2020 at 3:54

V. Lipunov

1,2529 silver badges6 bronze badges

Collectives™ on Stack Overflow

Filling a react form using JQuery

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related