Trigger form submission in chrome javascript console - javascript

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();

Related

making an angular1 form dirty via js

I am sending form data to a login/password and then wanting to click the submit button, the problem is with the form validation requiring the form to be dirty. And I am directly assigning the values which means the form is not considered dirty and modified. I have tried focus but that doesn't seem to work either. The submit button won't appear because it isn't validated.
document.getElementById("email").focus();
document.getElementById("password").focus();
var e = document.getElementById("email");
e.value = 'currentEmployee#email.com';
var p = document.getElementById("password");
p.value = 'currentEmployee.password';
var osbut = document.getElementById("loginForm"); osbut.submit();
I am injected a script via a chrome extension, running it as a content.js script. Any help is appreciated.
Just set In Controller Form as valid. For example:
$scope.formName.$valid=true;
See examples that dispatch change event, or alternatively change the elements via document.execCommand 'insertText' – wOxxOm
This worked perfectly. I just wanted to close out the question. -Hunter

Setting form target to _blank causes 2 windows to open

I'm using the following script with a Paypal button, which works well, except for the fact that 2 windows open to Paypal, instead of one. I would appreciate if anyone could help me get just 1 window to open. This is inside of an asp.net project. There is one form in the source on the page.
function submitFormToPaypal() {
var formElementsArray = document.getElementsByTagName('FORM');
if (formElementsArray != null) {
var formElement = formElementsArray[0];
document.getElementById('__VIEWSTATE').name = 'NOVIEWSTATE';
formElement.action = 'https://www.paypal.com/cgi-bin/webscr';
formElement.setAttribute("target", "_blank");
formElement.submit();
}
}
If you call your function on submit or on click of a submit button, you need to remove the formelement.submit.
If you show the HTML with event handlers perhaps we can suggest how to do it.

Open a new window and submit a form with a single click

when i click on submit button then :
first : open a new window to display process (by ajax call)
second : submit current form (processing time consuming job)
on Click of submit following JQuery function is being called :
function submitForm(){
window.open('displayGetStatus.action?id=' + p_id );
$("#frmStartSomeTask").attr("action","executeDatabaseOperation.action").submit();
}
Result : second window is opened and waiting for process to start but form on first window is not submitted so process is not started.
Please help how can i get this ?
Thanks in advance.
Add the window.open call to the onsubmit of the form. In pure JS...
document.getElementById(frmStartSomeTask).onsubmit = function () {
window.open('displayGetStatus.action?id=' + p_id );
}
you can modify this for jQuery if you so desire:
$("#frmStartSomeTask").submit(function () {
window.open('displayGetStatus.action?id=' + p_id );
}
So you want to open a window and then submit a form?
If so, your submit functionality doesn't look right. It's actually very simple to submit a form using plain Javascript...
function submitForm() {
window.open('displayGetStatus.action?id=' + p_id );
document.getElementById("frmStartSomeTask").submit();
}

form submit - IE access denied - same domain

SCRIPT5: Access denied
jquery.min.js, line 3 char 3769
I'm getting this error by simple form submit only in IE
$("#icon_upl").click(function(){ //icon_upl is button which open dialog
$("[name=icon]").click();
});
$("[name=icon]").change(function() { //icon is hidden file input
$("[name=upload_icon]").submit();
});
I sending that form to hidden iframe which is at the same domain.
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;display:none;"></iframe>
<form name="upload_icon" action="upload_icon.php" method="post" enctype="multipart/form-data" target="upload_target">
submit input doesn't help
I dont get it cuz if i try to send another form that works fine
If you are triggering the select files dialog via JS then you will get an access denied error when submitting the form. IE does not allow this. You will have to ask user to click on input type file directly
More details here
https://github.com/valums/file-uploader/issues/118#issuecomment-1387612
You can try styling the input type file though
http://www.quirksmode.org/dom/inputfile.html
I had similar HTML and jQuery code and encountered the same issue (i.e. 'Access is denied.' JavaScript error in Internet Explorer), which I managed to resolve by taking pointers from this (great) answer.
In your instance:
Change the #icon_upl <button>/<input> to a <label> and make use of the tag's accessibility features by setting the for attribute on it to point to your <input name="icon" type="file"> element.This effectively makes your click() event handler redundant. However, clicking the <label> in Firefox does not seem to trigger the file <input> dialog so you'll need to perform a browser test and still have the click() event handler if the browser is Mozilla-based.
In order for it to work, you'll need to make sure that your file <input> is not hidden by setting its position to be absolute and moving it off-screen.
i have found an other way to do this ...
I have make test and i found it work after 2 or 3 click on the submit button.
i have try some solution but found this by my self.
this is only for ie.
note i dont use the jquery submit method because they handle the error.
function Submit() {
try {
$('#FormName')[0].submit();
} catch (e) {
setTimeout(function () { Submit(); }, 50);
}
}
ps. sorry for my bad english, this is not my first language.
You can make a direct event firing on hidden input field because you can't catch it. It is possible to bind event with it and trigger it via another.
for example:
// binding event to hidden field
$('input[name=icon]:hidden').on('click', function() {
alert('Hidden triggered');
});
// some button/ or else
// some_target is any valid selector you can use
$('some_target').on('click', function() {
$('input[name=icon]:hidden').click(); // triggering click on hidden field will alert 'Hidden triggered'
});
Note: But its not clear from your post that if you have already something like this or not.
It seems to be impossible
You cannot read the "value" of the element as it holds the filename.
You can't fire up the file selection menu via JS.
You can't fire submit of the file uploader control via JS.
from getting access is denied error on IE8
//Access Denied Issues is usually for IE.
var lblTrigger= document.getElementById('lblTrigger');
lblTrigger.onclick = function(){
var form = document.getElementById('form1');
form.fxSubmit();
}
var form = document.getElementById('form1'); //form with upload control
var upctrl = document.getElementById('file_1'); //file upload control
form.fxSubmit = function() {
var upctrl = document.getElementById('file_1'); //file upload control
if (upctrl.files){
var form = document.getElementById('form1');
form.submit();
}else{
document.body.submit = true;
}
}
function fxSubmit(){
if (document.body.submit){
var form = document.getElementById('form1');
setTimeout(function(){fxSubmit()},50);
form.submit();
return;
}
setTimeout(function(){fxSubmit()},1000);
}
setTimeout(function(){fxSubmit()},1000);

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.

Categories