Can't trigger onchange event in page load using JQuery

Question

Currently I have a link NEW IMAGE with the following code.

<a class="cmpn_image" href="javascript:void(0);" id="new_page_image">NEW IMAGE</a> 

 /* Associated function */
 $("#new_page_image").click(function() { 
          imgType = 'NPG';
          $("#uptext_new_page").trigger('click');
 });

On clicking the link, it will open the file upload window.

Now what I need is to trigger the same file input on the page load if a value is present in the url. Below shown is my code:

<script>
$(document).ready(function()
{
    var param=getparamvalue('p');   // function for getting url paramater
    if(param=='new')
    {                                // upto this is working fine
        $("#uptext_new_page").trigger('change');   // not working; here if the paramter is present the file upload window should come triggering the file input
    }
});
</script>

<div style="visibility:hidden;">
    <form method="post">
      <input type="file" name="name" id="uptext" onChange="ajaxUpload(this.form,'imageUpload.php?filename=name&amp;maxSize=9999999999&amp;maxW=1000&amp;relPath=uploads/images/&amp;colorR=255&amp;colorG=255&amp;colorB=255&amp;maxH=400','uploadProgress','&lt;br /&gt;&lt;img src=\'images/loader_light_blue.gif\' width=\'128\' height=\'15\' border=\'0\' /&gt;','&lt;img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /&gt; Error in Upload.'); return false;" />
    </form>

  <form method="post">
      <input type="file" name="name" id="uptext_new_page" onChange="ajaxUpload(this.form,'imageUpload.php?filename=name&amp;maxSize=9999999999&amp;maxW=1000&amp;relPath=uploads/reference/&amp;colorR=255&amp;colorG=255&amp;colorB=255&amp;maxH=400','uploadProgress','&lt;br /&gt;&lt;img src=\'images/loader_light_blue.gif\' width=\'128\' height=\'15\' border=\'0\' /&gt;','&lt;img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /&gt; Error in Upload.'); return false;" />
    </form>
</div>

On page load itself, if the parameter p have value as new, then the file upload box should be shown. But it is not working.

I also tried with

$("#uptext_new_page").change();

Can anyone help me to fix this?

Thanks in advance.

try $(document).on('change','$uptext_new_page',function(){}) bcz same problem face by me and i solve via this change of code — Affan, Oct 16 '14 at 05:06
Try binding your events using jQuery instead of inline: `$('#uptext_new_page').change(function() { ajaxUpload($(this).closest('form;), ...); return false; }).trigger('change');` — Travesty3, Oct 16 '14 at 05:07
@Affan: That shouldn't be the issue given that the JS is wrapped in `$(document).ready()`, and there is no indication that these fields are added dynamically after the document is ready. — Travesty3, Oct 16 '14 at 05:09
@Jenz: If you use `$(this).closest('form')`, it will find the form that `this` (meaning the file input) is inside. — Travesty3, Oct 16 '14 at 05:10
@Jenz: I'm not sure what you're asking. If you do `$('#uptext_new_page').change(function() { var form = $(this).closest('form'); });`, then the 'change' event listener is only bound to the `#uptext_new_page` element, and `$(this).closest('form')` will only find the form that the current element (ie. `#uptext_new_page`) is inside. — Travesty3, Oct 16 '14 at 05:14

score 2 · Accepted Answer · edited May 23 '17 at 12:33

I don't believe you can trigger the file input to open the Choose File dialog without some user interaction. I believe that if the user clicks another element, you can at that time trigger the click event on the file dialog, but I don't think you can do it without some user interaction. See:

All of these examples are showing how to trigger the file upload window when the user clicks on another element, but not on page load.

Same thing goes for opening a new window with JavaScript (window.open()). If you do this at some random time without user interaction, I believe it gets caught by pop-up blockers. It's probably a similar issue here.

Actually, this question appears to be a duplicate of Show input file dialog on load?, and the answer there is similar to mine (can't do it without user interaction).

GautamD31 · Answer 2 · 2014-10-16T05:33:20.123

1

Have you tried with click, lets give a try with

$("#uptext_new_page").trigger('click');

or even you can try on creating a hidden button for click event like

<form method="post">
  <input type="file" name="name" id="uptext_new_page" onChange="ajaxUpload('something here'); return false;" />
  <input type="button" style="display:none;" onclick="ajaxUpload('something here'); return false;" id="uptext_new_page_bnt">
</form>

And in your jQuery try like

$('#uptext_new_page_bnt').trigger('click');

edited Oct 16 '14 at 05:33

answered Oct 16 '14 at 05:20

GautamD31

28,552
10
64
85

@Gautam..I tried that too. But not working. – Jenz Oct 16 '14 at 05:22
@Gautam..This is also not working with file upload. I tried just echoing a text on triggering click. That is working. But file upload window is not showing. – Jenz Oct 16 '14 at 05:47
I tried by adding a button and on page load triggering the click of button. On click function of button I have triggered click of file input. But that is also not working. – Jenz Oct 16 '14 at 05:59

Can't trigger onchange event in page load using JQuery

2 Answers2