form submit - IE access denied - same domain - javascript

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

Related

Remove HTML5 custom error message for reCaptcha after user passes validation

I am trying to build upon this answer: https://stackoverflow.com/a/37048027
The answer worked but I wanted to put in a custom HTML5 validation error message so I expanded the javascript to this:
window.onload = function() {
var $recaptcha = document.querySelector('#g-recaptcha-response');
if($recaptcha) {
$recaptcha.setAttribute("required", "required");
$recaptcha.setAttribute("oninvalid", "this.setCustomValidity('Please fill in the reCAPTCHA field.')");
$recaptcha.setAttribute("oninput", "this.setCustomValidity('')");
}
};
The issue is that if the validation error is shown once, it is always shown afterwards and never goes away. I tried adding the oninput, onvalid and onchange but I can't seem to get the error message to go away after the initial showing.
You can disable HTML5 form validation by adding novalidate to the form element according to this specification.
For example
<form action="..." onsubmit="check_if_capcha_is_filled" novalidate>

JS- Input type file firing change evt when there is no change

Hi I have been working on a script to upload files with the same input, a problem emerges when I follow the next steps:
Select a file [It's uploaded as soon as change evt fires using ajax]
Click select file
Cancel without selecting any file
The problem is that text is alerted when I think it's not necessary
Code:
<form parameters="values...">
<input type="file" id="file"/>
</form>
<script>
$(document).ready(function () {
$("#file").on("change", function () {
let input = this;
if(input.files && input.files[0]) {
//upload
}else {
alert("Error: Incompatible browser");
}
});
});
</script>
The alert is never done unless there is no browser compatibility but this "BUG" makes the alert appear
This is a Chrome feature, where when the user clicks "Cancel" it actually clears the input from what has been set before.
IMO, a "Clear" button would have make more sense, but since the file-picking UI is the one of the OS, I guess they couldn't change it.
But anyway, your check for incompatible browsers just needs to be
// in onchange
if(input.files){
or even better
// before assigning the change handler
if('FileList' in window){
Since browsers that don't support <input type="file"> wont set neither the input.files, nor will they have the FileList constructor.

Dynamic form not submitting (jQuery)

I'm creating a simple task manager app with PHP, MySQL, & jQuery. I'm adding a feature that will allow users to add a task by clicking a "new task" button, typing into a text field and hitting enter. This is the jQuery I have:
function add_task() {
// Add the "add new task" button
$("<span class='add-new'>Add new item</span>").appendTo(".sub-phase");
// String for the input form
var task_form = '<form class="add-new-task" autocomplete="off"><input type="text" name="new-task" placeholder="Add a new item..." /></form>';
// Display form on button click
$('.add-new').click(function() {
$(task_form).appendTo($(this).parent());
});
// Post results
$('.add-new-task').submit(function(){
var new_task = $('.add-new-task input[name=new-task]').val();
if(new_task != ''){
$.post('includes/add-tasks.php', { task: new_task }, function( data ) {
$('.add-new-task input[name=new-task]').val('');
$(data).appendTo('.task-list').hide().fadeIn();
});
}
return false;
});
}
If I have the form hardcoded in the index.php file, this functionality works as expected. But if the form is created in jQuery like I have it here, then nothing happens on submit. I've searched around but haven't been able to find a solution that works.
Any advice is much appreciated! Thank you.
The issue is that you're not delegating the event. You've setup a submit handler on page load, but not for dynamically created elements.
Change:
$('.add-new-task').submit(function(){
To:
$(document).on('submit', '.add-new-task', function(){
Now the event handler is bound to the document and will trigger for any element on the page with .add-new-task regardless of whether or not it was dynamically created.
Also, of note, you should avoid binding to document where possible, and instead, should bind to the closest static parent element.
Please check the fiddle here - http://jsfiddle.net/kunaldethe/TQa97/
Here jQuery 1.7.2 is used and as answered by Ohgodwhy,
$(document).on('submit', '.add-new-task', function(){
is used instead of
$('.add-new-task').submit(function(){
In the Javascript Console (F12), you can see the request is sent. (Obviously we don't have the next page, so the request is not completed.)
If you use the jQuery with version less then 1.7.2, the code breaks.
Let us know, the environment you are using.

Javascript and file upload not working as expected with click()

I am creating a upload control in javascript and then using element.click() to bring up the file browser dialog.
function add(type) {
var element = document.createElement("input");
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
element.setAttribute("id", "element-" + i);
var removebutton = document.createElement('a');
var removeimage = document.createElement('img');
removeimage.setAttribute("width", 15);
removeimage.setAttribute("height", 15);
removeimage.setAttribute("class", "removebutton");
removeimage.src = "/Content/Images/redx.png";
removebutton.appendChild(removeimage);
removebutton.setAttribute("id", "remove-" + i);
removebutton.setAttribute("onclick", "remove(" + i + "); return 0;");
var newfile = document.getElementById("uploadhere");
//newfile.appendChild(removebutton);
newfile.appendChild(element);
newfile.appendChild(removebutton);
element.click();
i++;
}
The file broswer dialog comes up as intended but after I select the submit on my form any files entered into the control dissapear.
If I click the "browse" I get the file broswer dialog but the file uploads correctly.
How can I add a file upload control to my form and have it display the file broswer dialog and still work as intended.
The "file" input type must include the attribute:
enctype="multipart/form-data"
when the post method is specified. See this: http://www.w3.org/TR/html4/interact/forms.html#edef-FORM
There may be other limitations also in this scenario, based on your question it sounds like you might be trying to do the upload in an AJAX call. Take a look at the answers here: https://stackoverflow.com/questions/3686917/post-to-php-with-enctype-multipart-form-data
Not sure from your code if you're using jQuery but if you are have you tried having an input form hidden and using clone() to create another one as needed?
Firefox is the only browser that allows this. Chrome, safari and opera do not allow it in the first place while IE is just fooling you that it can but won't actually submit the file selected this way.
I'd work around it by removing the .click() altogether and adding a new file input on the change event of previous input, this way it doesn't require 2 clicks for each new file (adding the input + then opening dialog). Example http://jsfiddle.net/APstw/1/
Also see jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox?
As pointed out by Ann.L, you can expect weird behavior when trying to dynamically add an upload control to a page.
I remember that IE in particular will silently fail and won't post your data (you will see the filename posted in the request but no actual "byte array" corresponding to it).
Why don't you toggle the visibility of the upload field instead of creating it from scratch? This way, the page "owns" the control and chances are that your function will work. The only thing left to do is to refresh your container with the newly uploaded file.

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