I have an file upload box and a clear button on my page. When I press the clear button, I want the text in the file upload box to be cleared.
The following works in Firefox, but doesn't in IE (the text stays there). Is there a workaround for this?
$("#clear").click( function() {
$("#attachment").val("");
//document.myform.attachment.value = "";
})
HTML:
<form name="myform">
<input type="file" name="attachment" id="attachment" />
</form>
<br /><button id="clear">Clear Attachment</button>
jsFiddle
One solution I've found is simply doing:
document.getElementById('myUploadField').parentNode.innerHTML = document.getElementById('myUploadField').parentNode.innerHTML;
Seems like it shouldn't work, but it does.
This solution is more elegant than cloning the input element. You wrap a <form> around the element, call reset on the form, then remove the form using unwrap(). Unlike the clone() solutions above, you end up with the same element at the end (including custom properties that were set on it).
Tested and working in Opera, Firefox, Safari, Chrome and IE6+. Also works on other types of form elements, with the exception of type="hidden".
http://jsfiddle.net/rPaZQ/
function reset(e) {
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
}
It's readonly in IE8 onwards, so you can't clear it. The simplest way around this security feature is to replace the element with a copy.
Edit Found a previous answer to this that suggests the same approach! Clearing <input type='file' /> using jQuery
This worked for me:
$("input[type='file']").replaceWith($("input[type='file']").clone(true));
use simple javascript:
formname.reset();
See the Demo: http://jsfiddle.net/rathoreahsan/YEeGR/
Try to use the below method to clear the input file.
Include this script:
<script>
function clearFileInputField(tagId) {
document.getElementById(tagId).innerHTML =
document.getElementById(tagId).innerHTML;
}
</script>
Change HTML to this:
<div id="uploadFile_div">
<input type="file" class="fieldMoz" id="uploadFile" onkeydown="return false;" size="40" name="uploadFile"/>
</div>
<a onclick="clearFileInputField('uploadFile_div')" href="javascript:noAction();">Clear</a>`
Use the old-fashioned <input type="reset" value="clear this">
Related
following Code works fine for IE, but not for Firefox (version 24.2.0 ESR)...
<input type="file" name="datei" id="data" onChange="enable();">
<input type="submit" id="submitConfig" value="Konfiguration abschicken" disabled="true" style="margin-left: 250px;">
and the triggered Script...
function enable() {
document.getElementById("submitConfig").removeAttribute("disabled");
}
is this behaviour of not reacting to EventHandlers (also tried "onClick") a "security-feature" of firefox, or is this a bug?
And is there a possible cross-browser workaround, to get the submitbutton only enabled if a file is chosen?
Jquery way works fine in all browsers. It is simple: Removing
disabled attr
$("#submitConfig").removeAttr('disabled');
Adding disabled attr
$("#submitConfig").attr('disabled','disabled');
instead of using
document.getElementById("submitConfig").removeAttribute("disabled");
use
document.getElementById("submitConfig").disabled = true;
or
document.getElementById("submitConfig").disabled = false;
I have an issue when cloning a from in Chrome. Note that this doesn't seem to happen in Firefox.
When I dynamically create an input and clone that and then append to the form it will not validate, but when I check the validityState object of the Node is says everything is fine.
I know the clone doesn't make much sense, but it's a reduced testcase from what I require. Are there any solutions to ensure the DOM data is copied over correctly?
Javascript:
$('<input type="text" required="required" />').val('08').clone().appendTo('#form1');
$('<input type="text" required="required" />').val('08').appendTo('#form2');
HTML:
<form id="form1"><input type="submit" value="Click me"/></form>
<form id="form2"><input type="submit" value="Click me"/></form>
Fiddle for reference: http://jsfiddle.net/x7aRt/1/
Looks like a bug in chrome (webkit?) or related maybe to jQuery.
To validate input, looks like you need to re-set value after cloning it, doesn't make much sense but...
$('<input type="text" required="required" />').val('08').clone().val(function(){return this.value}).appendTo('#form1');
I'm using the following code to reset the form fields.
document.getElementById("form1").reset();//form1 is the form id.
It is not working. I also tried with JQuery. Even JQuery also not working.
$("#reset").click(function(){
$('form1')[0].reset();
});
My html code is
<form name="form1" id="form1" method="post">
<h3>Personal Information</h3>
<h4>Name</h4>
<input type="text" id="fname" name="fname" maxlength=50 size=11/>
<input type="text" id="mname" name="mname" maxlength=15 size=8/>
<input type="text" id="lname" name="lname" maxlength=50 size=11/>
<input type="button" id="reset" value="Reset" onclick="Reset()"/>
</form>
I'm following W3Schools. Here is my Fiddle. Can you please explain the mistake?
The problem here is that you've set the id of your button to "reset". This automatically overwrites the built-in reset method of the form element.
The solution is to use a different id attribute for your button.
So instead of:
<input type="button" id="reset" value="Reset" />
Use something like:
<input type="button" id="reset-button" value="Reset" />
See this fiddle.
Have you simply try this : Reset
<input type="reset" value="Reset"/>
I finally solved my issue. the problem is "id=reset". Because it overrides the reset method . I changed it to id="reset1". Now it is working
If your objective is only to reset the form, you could try this:
<input type="reset" id="reset" value="Reset" onclick="this.form.reset();"/>
Looks like your seleting $('form1') as in an element with a tag name of form1, while i think you actually want to select it by the id:
$('#form1')[0].reset();
With jQuery, the correct selector is :
$('#form1') // Select with ID
OR
$('form[name=form1]') // Select with name
I've updated your fiddle.
Why vanilla js isn't working:
You don't have...
document.getElementById("form1").reset();//form1 is the form id.
...within a reset function. You could do this:
function Reset() {
document.getElementById("form1").reset();//form1 is the form id.
}
Why jQuery isn't working:
You don't need to do all that you're doing. It's much more simple than that. Also, look at your 'form1' selector. You should likely add '#form1' instead. jQuery selects are different than the getElementByID function. As you can probably assume by the name, the getElementByID function is already getting the element by the ID; however with jQuery you have to specify those things. Also, don't really need the onClick attribute with jquery.
Ok, see my new jsfiddle:
http://jsfiddle.net/ty9rU/17/
So i renamed the button to reset_btn
Basicly you had an element called reset inside the form, and that caused the issue.
I have a structure of the following format , which I display in a Bootstrap modal.
<div>
<input type="text"/>
<input type="text"/>
<button class="jSomeButton" onclick="javascript: return false;"></button>
<!--Click event handled in Javascript code-->
</div>
$(function(){
$(".jSomeButton").on('click',function(){
//Called from Firefox, Chrome and IE
//Not called from Safari
});
});
In Firefox, Chrome and IE when I press Enter/Return key after filling the inputs, the button click is triggered.
But in Safari [v4.0.3] , it doesn't trigger the button click! Rather it seems to postback to the same page.
Is this a known issue in Safari?
If yes, any workaround?
If no, could someone please help me with figuring out the root problem?
P.S. :
1. I'm familiar with the Javascript code for triggering button click on Enter keypress event. Just curious as to why the above won't work only in Safari.
2.Just for clarification, pressing Enter key while I'm still on the input control and not by pressing tab to first focus on the button and then press Enter.
Add the input fields and buttons to a form.
try using this but i m not sure about this is the right way to do it.
in that case you better add two js listener functions to the input fields. as
`
<div>
<input id="one" type="text"/>
<input id="two" type="text"/>
<button class="jSomeButton" onclick="javascript: return false;"> </button>
<!--Click event handled in Javascript code-->
</div>
$('#one').keypress(function(e){
if(e.which == 13) {
//call your code
}
});
$('#two').keypress(function(e){
if(e.which == 13) {
///call your code
}
});
better you write three listeners one for button other two for two input files. hope this ill help you. i am not sure about this solution. please let me know after trying it.
Instead of class attribute use id attribute onclick event ,
<div>
<input type="text"/>
<input type="text"/>
<button class="jSomeButton" id="jSomeButton" onclick="javascript: return false;"></button>
<!--Click event handled in Javascript code-->
</div>
$(function(){
$("#jSomeButton").on('click',function(){
//Called from Firefox, Chrome and IE
//Not called from Safari
});
});
if you do not want to add ID you can delegate event to the document so event will work on DOM which has defined class.
Example
<script type="text/javascript">
$(function(){
$(document).on('click', ".jSomeButton" ,function(){
alert('works');
});
});
</script>
#Vandesh,
As posted in comments, I suggest you put up a form tag around your entire form.
Have a look at this JSFiddle for more idea.
http://jsfiddle.net/JUryD/
I tried this on Safari, Chrome, IE6+, Opera and Firefox 22+
Let me know if you face any other troubles.
Here is the code:
<div>
<form>
<input type="text"/>
<input type="text"/>
<button class="jSomeButton" onclick="javascript: return false;">Send</button>
</form>
</div>
Continuing adopting my code to work with IE...
I have a hidden div containing a form to edit some information. When the user selects the item to edit, this div is shown and the fields are populated with the information for the item. That divs (in simplified terms) looks like this:
<div id="editform">
<form action="" method="post" id="qform" name="qform">
First param: <input name="field1" id="field1"/> <br/>
Second param: <input name="field2" id="field2"/> <br/>
...
<input type="hidden" name="qid" id="qid" value=""/>
<img id="submit" src="..." alt="..." title="..." />
</form>
I use jquery to set the values into the fields. My function for opening up the editing div looks something like this:
function edit_item(item_id) {
item = get_item(item_id); //this will return a JS object
$('#field1').val(item.property1);
$('#field2').val(item.property2);
...
$('#qid').val(item_id);
$('#submit').click(function() {
alert($('#qid').val());
$('#qform').ajaxSubmit();
});
}
All of this works fine in FF, Opera, Webkit and IE 9, however in IE7 and IE8, I'm having a strange problem. I can see the item_id being set correctly in the edit_item function, however as soon as that function completes, the hidden input value (qid) gets reset to the empty string. When the form is being ajax-submitted, the alert shows the value to be an empty string despite it being set correctly. Interestingly, all other fields are fine. And it works correctly in IE 9.
What am I missing here? Many thanks in advance.
This is totally stupid, and it shouldn't be the case, however:
$('#field1').val(item.property1);
did not work. Yet
$('#field1').attr("value", item.property1);
worked fine. I'm leaving it at that.
Solution for IE without JQuery in pure JavaScript does not look too complicated:
document.getElementById(id).setAttribute('value', value);
In addition to Aleks G's answer, I found out that value attribute must not be defined implicitly in the hidden element in order to jQuery .setAttr() and .val() work without issue in IE8.
See here for more details:
jQuery .val() setter not working?
I know i am late but i used following workaround since it did not work for me after trying all solutions
var id=$(this).data('id');
$('#update_entery_div').append(
"<input type='hidden' name='id' value="+id+" >"
);