Is there any way of autosubmitting a form as soon as it is created? I have a ponent <ShowVideo />. Inside this ponent, I'm dispatching an action which will give some hidden field and signatures. Afterwards, I'm rendering this form on the page. What I want is to submit this form dynamically once my form is rendered. There can be multiple forms.

One approach which came to my mind was to call another function handleSubmit after form tag, which will have form.submit() method inside it but how will I make sure that the entire form is rendered or not.

class ShowVideo extends Component {
  render() {
    let renderInputFields = null
    if (this.props.videoData.data.hasOwnProperty("signature")) {
      renderInputFields = Object.keys(launchData).map((key, i) => {
        return (<input type="hidden" name={key} key={i} value={launchData[key]} />)
      })
    }
    return (
      <div>
        <iframe width="100%" height="430px" frameBorder="0" name="videoIframe"></iframe>
        <form name="ltiLaunchForm" id="ltiLaunchForm" method="post" target="target_iframe" encType="application/x-www-form-urlencoded" action={launchUrl}>
          {renderInputFields}
          <input type="hidden" name="oauth_signature" value={signature} />
        </form>
      </div>
    )
  }
}

Is there any way of autosubmitting a form as soon as it is created? I have a ponent <ShowVideo />. Inside this ponent, I'm dispatching an action which will give some hidden field and signatures. Afterwards, I'm rendering this form on the page. What I want is to submit this form dynamically once my form is rendered. There can be multiple forms.

One approach which came to my mind was to call another function handleSubmit after form tag, which will have form.submit() method inside it but how will I make sure that the entire form is rendered or not.

class ShowVideo extends Component {
  render() {
    let renderInputFields = null
    if (this.props.videoData.data.hasOwnProperty("signature")) {
      renderInputFields = Object.keys(launchData).map((key, i) => {
        return (<input type="hidden" name={key} key={i} value={launchData[key]} />)
      })
    }
    return (
      <div>
        <iframe width="100%" height="430px" frameBorder="0" name="videoIframe"></iframe>
        <form name="ltiLaunchForm" id="ltiLaunchForm" method="post" target="target_iframe" encType="application/x-www-form-urlencoded" action={launchUrl}>
          {renderInputFields}
          <input type="hidden" name="oauth_signature" value={signature} />
        </form>
      </div>
    )
  }
}

• javascript
• reactjs
• ecmascript-6
• redux

2 Answers 2

A more contemporary solution (using React Hooks) might look like:

import React, { useEffect, useRef } from "react";

const AutoSubmitForm = ({
  actionUrl,
  params
}) => {
  const formRef = useRef(null);
  useEffect(() => {
    formRef.current.submit();
  }, []);

  return (
    <form ref={formRef} method="POST" action={actionUrl}>
      {Object.keys(params).map(name => (
        <input
          type="hidden"
          name={name}
          value={params[name]}
        ></input>
      ))}
    </form>
  );
};

If you want to auto submit the form after it's been created but the form has some of its elements rendered later, then i remend adding a ponentDidUpdate lifecycle function that will dynamically trigger after a new rerender.

In this function we will detect if the rerender has rendered all of the form elements. If so, then we can programmatically trigger the form submit.

ponentDidUpdate() {
    const formElementKey1Exists = document.getElementById("element1");
    const formElementKey2Exists = document.getElementById("element2");
    ...
    if (formElementKey1Exists  && formElementKey2Exists && ...) {
        document.getElementById('ltiLaunchForm').submit();
    }
}

The conditional will ensure your entire form is rendered before dynamically submitting.