Auto submit form on page reload
Question
I have tried a few different ways, but none seem to work for me. I will enter the methods I have tried after I explain a little. I have a form with the id of 'commentform', I would like to auto submit the users input when the page reloads and the user did not click the submit button. The submit button has a id of 'submit'. The textarea field of the form is 'comment' (I don't think that would be relevant.
Attempt 1: Results: Auto reloads page on visit and gives error to fill in text form.
<script type="text/javascript">
jQuery(window).on('load', function() {
jQuery('#submit').click();
});
</script>
Attempt 2: Results: Nothing happens.
<script type="text/javascript">
window.onbeforeunload = function () {
jQuery('#submit').click();
});
</script>
Attempt 3: Results: Nothing happens.
<script type="text/javascript">
window.onload = function () {
jQuery('#commentform').click();
});
</script>
Attempt 4: Results: Nothing happens.
<script type="text/javascript">
jQuery(window).on('beforeunload', function() {
jQuery('#commentform').click();
});
</script>
Attempt 5: Results: Nothing happens.
<body onbeforeunload ='checkRequest(event)'>
//form is here
<script type="text/javascript">
function checkRequest(event){
var __type= event.currentTarget.performance.navigation.type;
if(__type === 1 || __type === 0){
document.getElementById('commentform').submit();
}
}
</script>
</body>
Attempt 6: Results: Nothing
<script type="text/javascript">
window.onbeforeunload = refreshCode;
function refreshCode(){
document.getElementById("commentform").submit();
return null;
}
</script>
Attempt 7: Results: Nothing
<script type="text/javascript">
window.onload = function(){
document.forms['commentform'].submit();
}
</script>
Update If it matters; the form is not hardcoded onto the page that refreshes. It is in another file and called by using <?php timed_comment_template( '/short-comments-timed.php' ); ?> <?php timed_comment_template( '/short-comments-timed.php' ); ?> I have also tried these solutions by commenting out that call and hardcoding it into the page, but receive the same results. The Form:
<form id="commentform" action="<?php echo esc_url(get_option('siteurl')); ?>/timed-comments-post.php" method="post">
<div id="form-section-comment" class="form-section">
<div class="form-textarea">
<textarea id="comment" name="comment" cols="45" rows="8" tabindex="6"></textarea>
//another javascript is here for counting words.
</div>
</div>
<div class="form-submit"><input id="submit" name="submit" class="button-small button-green" type="submit" value="Submit" tabindex="7" /><input type="hidden" name="comment_post_ID" value="<?php echo esc_attr($id); ?>" /></div>
<?php comment_id_fields(); ?>
</form>
//problem javascript is going here.
3 answers
solution1
0 2021-05-30 14:28:01
Can you please try it?
<body onload="document.commentform.submit()">
Or
<body onload="document.forms['commentform'].submit()">
solution2
0 2021-05-30 14:31:54
I don't think you can reliably use onbeforeunload event to submit a form. It is used to warn users by showing a blocking message dialog ( https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event ). I am not 100% sure what you are trying to achieve by submitting the form before user exiting the page. Assuming two scenarios below, might give you a better idea.
- If you are trying to prevent any data loss, you can save form data to local storage whenever the form changes and when user come back to the form, you can pre-load form with the saved data. This is reliable.
- If you are trying to track the data that user has entered even if the form is abandoned, you can send a background AJAX request with form data to the server whenever there is a change in the form. Perhaps generate a unique ID saved in memory to identify subsequent requests form the same user. You can also use a debounced version of sending updates to avoid flooding the server.
Again to answer question, if browsers allowed what you are trying to do, instead of closing the web page it can redirect users on exiting.
solution3
0 2021-05-30 15:18:07
Ensure the following:
-
<textarea>has text <textarea>has a[name]- Register
windowto theloadevent - In the event handler add:
document.forms[0].submit(); - Wrap all script in a closure
function init() {...} - Call the closure and add a counter to prevent auto submit when page initially loads.
<:DOCTYPE html> <html> <head> <meta charset='utf-8'> </head> <body> <form method='POST' action='https.//ptsv2;com/t/2z703-1622387337/post'> <fieldset> <legend>Auto Submit on Reload</legend> <textarea name='comment'>TEST</textarea><br> <button>Submit</button> </fieldset> </form> <script> let counter = 0. function init(counter) { function autoSubmit(e) { document.forms[0];submit(). } if (counter > 0) { window;onload = autoSubmit; } counter++; }; init(counter); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.