We Keep Coding

Javascript created form showing error "Form submission canceled because the form is not connected"

I have been working on this auto-login feature for my website. This feature includes an automatically sent form, created and submitted through pure javascript. When I try to send the form though, it gives me the error
Form submission canceled because the form is not connected
This is my code that's sending the form:
var method = "post";
var path = "cookie.php";
var form = document.createElement("form")
form.setAttribute("method",method);
form.setAttribute("path",path)
var hiddenform = document.createElement("input")
hiddenform.setAttribute("type","hidden")
hiddenform.setAttribute("id","hiddeninputusername")
hiddenform.setAttribute("value",cookieusername)
form.appendChild(hiddenform);
var hiddenforms = document.createElement("input")
hiddenforms.setAttribute("type","hidden")
hiddenforms.setAttribute("id","hiddeninputusername")
hiddenforms.setAttribute("value",cookiepassword)
form.appendChild(hiddenforms)
form.submit()
Note:This question is not a duplicate of the others because it is pure javascript

According to the HTML standatds, the error says that Form is not connected to the document context which means you need to append your form to the body element and then click the submit button.
document.body.append(form);
form.submit()
This should work for you.

Login Form in Clockify

I'm trying to create a PowerShell script to open Internet Explorer, navigate to https://clockify.me/login , fill in the email and password inputs and submit the form or click the log in button.
The problem is that, when filling the inputs using:
document.getElementById("email").value="123"
document.getElementById("password").value="123"
I have the following results:
When I submit the form with document.forms[0].submit() the pages reload with URL https://clockify.me/login?email=&password= and nothing happens
When I click the button, using javascript or manually, it considers that the inputs are empty
So, is there a way to work around this? Either using purely javascript or PowerShell (I wish to keep the IE window invisible)
Thanks!

Even though you are changing the values of the input DOM objects, that is not enough to trigger the change detection of the underlying Angular libraries, thus making the form appear 'empty'.
The following pure JS example works on Chrome, but I have not tested it in Internet Explorer:
let email = document.getElementById("email");
let password = document.getElementById("password");
let button = document.getElementsByTagName("button")[0];
email.value = 'someone#example.com';
password.value = 'yourpassword';
// Trigger change detection
email.dispatchEvent(new Event('input'));
password.dispatchEvent(new Event('input'));
button.click();
In case dispatchEvent does not work in IE, you could try with createEvent and initEvent. See dispatchEvent not working in IE11

Trigger form submission in chrome javascript console

Just a little thing I've always wondered:
Is it possible to submit a form on any webpage, rather than clicking the forms submit button, I want to do it from the chrome console (ctrl+shift+j in chrome)?
I've tried a couple ways but I either get an error like
Cannot use function submit on undefined
or
HTML tag has not function submit.
Any help?
PS - If you go here and try and submit the form on your right through the console click here

form = document.getElementById("frm1")
form.submit()
works on your example when viewing the standalone iframe.

For your example when working with an iframe:
// from http://stackoverflow.com/questions/1452871/how-can-i-access-iframe-elements-with-javascript
function iframeRef( frameRef ) {
return frameRef.contentWindow ? frameRef.contentWindow.document : frameRef.contentDocument
}
var inside = iframeRef( document.getElementsByTagName('iframe')[0] );
// from #DeanGrobier
form = inside.getElementById("frm1")
form.submit()

It is inside an iframe in your example. In your case, you must enter this in the console for it to work:
var q = window.document.getElementsByTagName('iframe')[1];
var r = q.contentWindow.document.getElementById("frm1");
r.submit();
or, in just one line:
window.document.getElementsByTagName('iframe')[1].contentWindow.document.getElementById("frm1").submit();

CKEditor - clear contents on first focus

I'm new to using CKEditor, and the API is a little confusing...
What I want to do is to clear the contents of the CKEditor on the first focus by the user, and only if the form hasn't been reloaded.
Why? I'm putting some instructions in the CKEditor field itself and would like for it to get cleared the first time they focus the editor. I don't want the contents to get cleared on subsequent focuses.
Thanks for any help!
The JS framework I'm using is jQuery.

declare a global variable in javascript,
<script type="text/javascript">
var isFirst = 1;
</script>
and then try adding onfocus event , like this:
CKEDITOR.instances.editor1.on( 'onfocus', function( evt ) {
if(isFirst)
{
isFirst = 0;
CKEDITOR.instances.editor1.setData( '' );
}
});

I solved this problem by storing the contents in the session. If the form round-trips to the server and fails validation, I just load the contents from the session. I store it to the session via Ajax on blur event. Once the form validates and posts to the db I destroy the session.

jQuery onclick pass post variables and reload page

Can I pass post variables and reload a page on clicking an hyperlink?
To be clear I have something like this.
Click
If javascript is enabled,
I think I can use "event.preventDefault()" to suppress passing as GET variable.
So now onclick, name should be passed as post variable instead of get.
If javascript is disabled,
Then the above should work.

You could do it, by creating a new form element, pointing it at the href and calling .submit() on it.
<a class="postlink" href="test.php?name=test">Click</a>
<script type="text/javascript">
$('.postlink').click(function() {
var form= document.createElement('form');
form.method= 'post';
form.action= this.protocol+'//'+this.hostname+this.pathname;
$.each(this.search.slice(1).split(/[&;]/g), function() {
var ix= this.indexOf('=');
if (ix===-1) return;
var input= document.createElement('input');
input.type= 'hidden';
input.name= decodeURIComponent(this.slice(0, ix));
input.value= decodeURIComponent(this.slice(ix+1));
form.appendChild(input);
});
document.body.appendChild(form);
form.submit();
return false;
});
</script>
Or you could just do an AJAX request instead and reload() the page afterwards if you prefer.
However, I'm not sure why you'd want to do this. What use is a link that's usually POSTed, except when it's not? (Not just when JS is disabled/unavailable or when it's a search engine, but also when the user middle-clicks the link or tries to right-click-bookmark it or whatever.)
If all you want is something that behaves like a button to submit a POST form, better to actually use a real form and submit button, and then use CSS to restyle it to look like a link if that's what you want it to look like.

Very good hint....
I was first trying to send the form data via an Ajax Post call and reloading the page afterwards, but it was not working properly:
var biq_select_val = jQuery('#biq_search_select').val();
jQuery.post(window.location.href,
{ biq_amazon_item_list_search: biq_select_val},
function() {window.location.reload();}
);
Now I am using just a:
jQuery('#biq_amazon_item_list_search_form').submit();
and it is working fine.

I have some 10 links on a page. When user clicks on those links ajax-reload must take place.
To be clear I have something like this.
one
Two
If javascript is enabled,
Onclick, ajax load must take place.
If javascript is disabled, Then the above should work.
Basically I am using name to limit some values of my search page.