Javascript code working in IE but not working in Firefox? - javascript

I have this code :
<a href="javascript:document.forms['form1'].student_pic.click()">
<img src="images/mypic.png" alt="" width="161" height="29" border="0" style="margin-top:10px" />
</a>
<input style="display:none" type="file" name="student_pic" id="student_pic" />
This code is working successfully in IE but it's not working in FF.
off course there is form on my page called form1
When the user click the image, select file window will let the user select image and put it in hidden file element.
What is the proplem?
Thanks

Your problem is simply that .click() to open the file chooser dialog does not work on all browsers. I'm not aware of any workaround.

Common way around is have the file input in place but with opacity of 0 which actually means it's hidden, and over it place your custom image or text. Make sure the "browse" button is exactly where your text/image is and it will work - clicking the custom text/image will actually click the browse buttton.
I have such code somewhere so if you won't be able to achieve this I'll search for that code.

Not supported in Gecko yet:
Gecko 2.0 note(Firefox 4)
Starting in Gecko 2.0 , calling the click() method on an <input> element of
type file opens the file picker and lets the user select files.
from https://developer.mozilla.org/en/HTML/Element/input#File_inputs

Related

How To make it so when you click an html button, it downloads a file to the persons computer?

<button type="submit" class="myButton" onclick="window.open('test.txt')">Money Dispenser</button>
Is the current code i have, and does not do anything at all when i click it. ( I want it to download test.txt to the computer or device of the user who cliked it)
I don't really understand what you are trying to achieve using a submit button, if it's not mandatory I'd use an <a>.
With pure HTML5 using the download attribute
<a href="test.txt" download>Money Dispenser</a>
Or with Javascript if you have to use a <button>
This has already been covered grealy in this question
But the gist of it is, create a function to download files as shown on that thread and add it to your <button>
<button onclick="donwloaURI('data:text/plain,Test', 'Test.txt')">Money Dispenser</button>
You can use the HTML download attribute to specify that the target will be downloaded when a user clicks on the hyperlink.
<a href="/download-file-path-here" download>
Money Dispenser
</a>
You can do using:
<a href="data:text/plain;charset=UTF-8,test.txt" download>Download</a>

Radio button onClick when javascript is disabled

Morning,
Im just wondering, is there a way to make the radio button do something onclick when javascript on that browser is disabled?
i currently have this code that works when javascript is on only.
$links.="<tr>
<td style='width:10%;vertical-align:top;' class='space'>
<a href='".$href_link."'>
<input id='radio_".$value[0]."' type='radio' name='single' onclick='alert(\"hello\")' />
</a>
</td>
<td style='width:90%;vertical-align:middle;' class='space'>
<a href='".$href_link."'>".$value[0]."</a>
</td>
</tr>";
and this is the redirect function:
<script type="text/javascript">
function redirect(loc)
{
window.location = loc;
}
</script>
No, you can only use <noscript></noscript> like: <noscript>Enable Javascript to view page properly!</noscript> to display a message to the front end user, that they need to enable javascript to view this page properly, and hide the content on the page using CSS, since <noscript> can be used in head and body.
See more info here: The noscript tag
javscript code work when its enable there is no way to work js code without javascript enable
But you can handle this case
Make a div in your html and set like below
<div id="enablejs" >please enable your javacsript</div>
and on load call this js script
$(document).ready(function(){
/* if js enable then it remove on document
load and rest of work run as previous
other wise a div show with message
that enable your Javascript */
$("#enablejs").remove();
});

How to show a hidden div with javascript when submitting a form?

I'm not really familiar with jquery, but am trying to get a simple animated gif to show when a form is submitted. When clicking 'submit' to upload an image I want to show gif so that users know that image is being uploaded. The submit button has an id="submit" and also an onClick="return confirm('message')"
I have the div code containing the gif:
<div id="loading" style="display:none">
<img src="images/hand_timer2.gif" alt="loading" />
</div>
which is hidden. And it does show if I remove the style. Fair enough. But when I try to show it with the following javascript it doesn't show:
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$('#loading').show();
});
});
I have
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>
in a separate PHP header file. As far as I can see it's the only reference to jquery library, but I do have other javascript codes that all work. I just can't get this one to work. Can anyone point out what I'm doing wrong and why I can't get the div to show gif when clicking submit?
I believe the problem could be that your inline onClick="return confirm('message')" prevent the click-event from reaching your click-event listener attached with jQuery - not sure though. Anyhow, instead of listening for a click-event on the submit-button, I would listen for the submit event on the form, that will fire when the form is actually submitted (a form can usually be posted by other means than clicking the submit button as well - through the Enter key for instance).
$('#idOfYourForm').on("submit", function () {
$('#loading').show();
});
Side note:
You don't close the style attribute properly on your loading div (notice that the > is blue):
<div id="loading" style="display:none>

Firefox HTTP Form Action doesn't fire

In Chrome and IE, the following code, when the Anchor tag is clicked, pops up the form (modal box ID of "modalContent", form ID of "DL") and adds an "OnSubmit" to the Form. When the Form is submitted, it will navigate to the requested PDF via Javascript, and run some ASP to send an email with their details attached.
<script language="javascript">
function downloadAnyway(link) {
$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform("' + link + '")');
$('#modalContent').modal();
}
function checkform(navName) {
window.open(navName);
$.modal.close();
}
</script>
<!-- link to download a product guide -->
Product Guide
<div id="modalContent">
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" >
<div align="center">
<input type="image" src="templates/default/images/submit_download.gif" class="imagebutton" value="submit" />
</div>
</form>
</div>
This works fine in IE and Chrome, in Firefox, the Javascript onsubmit works, but the action of the asp never fires. If I remove the javascript, the asp fires as expected.
So, the final form in FireFox, after the "onsubmit" has been dynamically added looks as below:
<form id="DL" action="contactusprocessNew2.asp" method="post" name="contact" onsubmit="return checkform("downloads/ProductGuide.pdf")">
The onsubmit fires, opening the product guide in another tab, however, the ASP Action never fires. There is more that goes on here, like we write a cookie making sure we don't ask the client for a download every time they use our downloads, however, I've trimmed off anything I think is outside the problem domain.
In the asp, I have gotten rid of all code and put a simple response.redirect to see if it fires and make sure nothing is going on in the ASP.
Any idea how I can get this to function in FireFox?
UPDATE:
I have replaced the onsubmit event wireup with a 'proper' jquery submit wireup replacing the first line below, with the second. The asp on the form still does not function.
//$('#DL')[0].setAttribute('ONSUBMIT', 'return checkform(\'' + link + '\')');
$('#DL').submit(function checkform() {
$.modal.close();
window.open(link);
return true;
});
UPDATE 2
Right, it is because to modal popup CLOSES before the ASP fires. If we comment out the line $.modal.close(); then the asp fires as expected. In Chrome and IE the javascript and the ASP must fire at the same time, in Firefox, the javascript fires which "hides" the div with the "modelContent" and the asp can no longer fire. So this is the real problem... now how to sort it out...

How to click on an image with a hyperlink using Javascript?

The HTML of the page I wish to use for this is as follows:
<A HREF= "http://www.example.com"
TARGET="_new" status="Home Directory" title="Home Directory"
urn="Home Directory" FOLDER="http://www.example.com"><IMG align=textTop border="0" src="images/buttons/mywork.gif" alt="Select this icon to show your Home Folder" ></td>
How can I simulate a click on this hyperlinked image just using Javascript? I don't have edit privileges for this page so I need to work with what I have already got in the page (above)
You can use firebug plugin for firefox and code your javascript from the console. Google chrome also has a console.
Give it an id for a start and then invoke using "apply"
var x = document.getElementById("linky");
x.onclick.apply(x);
I would use the jQuerify plug-in. Then type $('a').click(); in the Firebug console.

Categories