Autosubmit ReactJS form as soon as it is created
Is there any way of autosubmitting a form as soon as it is created? I have a component <ShowVideo />. Inside this component, 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
asked Nov 23 '18 at 20:43
vijayscodevijayscode
521617
add a comment |
Is there any way of autosubmitting a form as soon as it is created? I have a component <ShowVideo />. Inside this component, 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
asked Nov 23 '18 at 20:43
vijayscodevijayscode
521617
add a comment |
Is there any way of autosubmitting a form as soon as it is created? I have a component <ShowVideo />. Inside this component, 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
asked Nov 23 '18 at 20:43
vijayscodevijayscode
521617
Is there any way of autosubmitting a form as soon as it is created? I have a component <ShowVideo />. Inside this component, 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
javascript reactjs ecmascript-6 redux
asked Nov 23 '18 at 20:43
vijayscodevijayscode
521617
asked Nov 23 '18 at 20:43
vijayscodevijayscode
521617
edited Nov 23 '18 at 20:51
vijayscode
asked Nov 23 '18 at 20:43
vijayscodevijayscode
521617
asked Nov 23 '18 at 20:43
vijayscodevijayscode
521617
asked Nov 23 '18 at 20:43
vijayscodevijayscode
521617
521617
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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 recommend adding a componentDidUpdate 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.
componentDidUpdate() {
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.
answered Nov 23 '18 at 21:39
Shawn AndrewsShawn Andrews
945617
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452743%2fautosubmit-reactjs-form-as-soon-as-it-is-created%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 recommend adding a componentDidUpdate 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.
componentDidUpdate() {
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.
answered Nov 23 '18 at 21:39
Shawn AndrewsShawn Andrews
945617
add a comment |
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 recommend adding a componentDidUpdate 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.
componentDidUpdate() {
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.
answered Nov 23 '18 at 21:39
Shawn AndrewsShawn Andrews
945617
add a comment |
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 recommend adding a componentDidUpdate 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.
componentDidUpdate() {
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.
answered Nov 23 '18 at 21:39
Shawn AndrewsShawn Andrews
945617
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 recommend adding a componentDidUpdate 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.
componentDidUpdate() {
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.
answered Nov 23 '18 at 21:39
Shawn AndrewsShawn Andrews
945617
answered Nov 23 '18 at 21:39
Shawn AndrewsShawn Andrews
945617
answered Nov 23 '18 at 21:39
Shawn AndrewsShawn Andrews
945617
answered Nov 23 '18 at 21:39
Shawn AndrewsShawn Andrews
945617
945617
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53452743%2fautosubmit-reactjs-form-as-soon-as-it-is-created%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
