Suppose I have input[type=file] element and I want to intercept onclick event and prevent file dialog from appearing if conditions are not met. Is it possible? And why, if - not?
Soufiane's code requires that you have a Javascript library called jQuery on your page. If you don't have it, you can get it at http://www.jquery.com or use something in plain Javascript:
HTML
<input type="file" id="openf" />
JS:
document.getElementById('openf').onclick = function (e) { e.preventDefault(); };
HTML:
<input type="file" class="openf" />
JS:
$('.openf').click(function(e){
e.preventDefault();
});
Related
I have a form in Angular that has two buttons tags in it. One button submits the form on ng-click. The other button is purely for navigation using ng-click. However, when this second button is clicked, AngularJS is causing a page refresh which triggers a 404. I’ve dropped a breakpoint in the function and it is triggering my function. If I do any of the following, it stops:
If I remove the ng-click, the button doesn’t cause a page refresh.
If I comment out the code in the function, it doesn’t cause a page refresh.
If I change the button tag to an anchor tag (<a>) with href="", then it doesn’t cause a refresh.
The latter seems like the simplest workaround, but why is AngularJS even running any code after my function that causes the page to reload? Seems like a bug.
Here is the form:
<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
<fieldset>
<div class="control-group">
<label class="control-label" for="passwordButton">Password</label>
<div class="controls">
<button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
</div>
</div>
<div class="buttonBar">
<button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
</div>
</fieldset>
</form>
Here is the controller method:
$scope.showChangePassword = function() {
$scope.selectedLink = "changePassword";
};
If you have a look at the W3C specification, it would seem like the obvious thing to try is to mark your button elements with type='button' when you don't want them to submit.
The thing to note in particular is where it says
A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit"
You can try to prevent default handler:
html:
<button ng-click="saveUser($event)">
js:
$scope.saveUser = function (event) {
event.preventDefault();
// your code
}
You should declare the attribute ng-submit={expression} in your <form> tag.
From the ngSubmit docs
http://docs.angularjs.org/api/ng.directive:ngSubmit
Enables binding angular expressions to onsubmit events.
Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page).
I use directive to prevent default behaviour:
module.directive('preventDefault', function() {
return function(scope, element, attrs) {
angular.element(element).bind('click', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
});
And then, in html:
<button class="secondaryButton" prevent-default>Secondary action</button>
This directive can also be used with <a> and all other tags
You can keep <button type="submit">, but must remove the attribute action="" of <form>.
I wonder why nobody proposed the possibly simplest solution:
don't use a <form>
A <whatever ng-form> does IMHO a better job and without an HTML form, there's nothing to be submitted by the browser itself. Which is exactly the right behavior when using angular.
Add action to your form.
<form action="#">
This answer may not be directly related to the question. It's just for the case when you submit the form using scripts.
According to ng-submit code
var handleFormSubmission = function(event) {
scope.$apply(function() {
controller.$commitViewValue();
controller.$setSubmitted();
});
event.preventDefault();
};
formElement[0].addEventListener('submit', handleFormSubmission);
It adds submit event listener on the form.
But submit event handler wouldn't be called when submit is initiated by calling form.submit(). In this case, ng-submit will not prevent the default action, you have to call preventDefault yourself in ng-submit handler;
To provide a reasonably definitive answer, the HTML Form Submission Algorithm item 5 states that a form only dispatches a submit event if it was not submitted by calling the submit method (which means it only dispatches a submit event if submitted by a button or other implicit method, e.g. pressing enter while focus is on an input type text element).
See Form submitted using submit() from a link cannot be caught by onsubmit handler
I also had the same problem, but gladelly I fixed this by changing the type like from type="submit" to type="button" and it worked.
First Button submits the form and second does not
<body>
<form ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type='button' ng-click="Dont()">Dont Submit</button>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Sub=function()
{
alert('Inside Submit');
}
$scope.Dont=function()
{
$scope.v=0;
}
});
</script>
</body>
Just add the FormsModule in the imports array of app.module.ts file,
and add import { FormsModule } from '#angular/forms'; at the top of this file...this will work.
How can I detect that a click event is fired on any checkbox on a page using jQuery? Please also note that on page load, may be checkbox(s) is/are not created but could be created on request. So HTML DOM will be updated in that fashion.
$(":checkbox").on("click", function(){
// your work
} );
also see bind
delegate
live
reference On
TRy this
$( document ).on( "click", "input[type='checkbox']", function() {
alert( "check box clicked" );
});
$(":checkbox").on("click", function(){
// ALL YOUR STUFF
} )
Simply create a function checkboxClick() as -
function checkboxClick() {
// ---
// your code goes here
// ...
}
Now for every checkbox (even when you add them dynamically) add attribute onclick like
<input type="checkbox" onclick="javascript:checkboxClick();" class="checkbox" />
Note : Since javascript works on existing dom elements, even if you do something like jQuery(".checkbox").click(function() {...});, it wont work on dynamicically added elements
$(document).on('click', ':checkbox', function() {
//your code
});
I am trying to undo an event handler/listener that is added in an linked JS file in the header of the webpage.
The basic setup:
<form id="form_enter_giveaway" action="" method="post">
<input type="hidden" name="form_key" value="04b931caff99a0a688241e6da5f09839">
<input type="hidden" name="enter_giveaway" value="1">
Enter to Win! (1P)
</form>
JS file (http://www.steamgifts.com/js/header_functions.js):
$('.submit_entry, .remove_entry').click(function(){
$('#form_enter_giveaway').submit();
return false;
});
There is nothing native that should run if I click that link, and searching every reference to that link and that form in general seems to show that that single piece of JS is the only thing that could possibly be causing the form to submit.
But I have tried $('.submit_entry, .remove_entry') .unbind(), .off(), die() with the console; All with and without 'click', and every time I click that link tag it still submits. And it is interfering with the event I want to have run in its place.
Try this
var $selector = $('.submit_entry, .remove_entry');
// Binding the event using on so that it can be unbinded later
// that triggers the submitForm handler
$selector.on('click', submitForm);
function submitForm() {
$('#form_enter_giveaway').submit();
return false
}
// Unbind the event using off
$selector.off('click');
// Bind the event and prevent the default action of anchor
$selector.on('click', function(e) {
e.preventDefault();
});
Check Fiddle
I want to make (an HTML) 'file' input element mandatory: something like
<input type='file' required = 'required' .../>
But it is not working.
I saw this WW3 manual which states 'required' attribute is new to HTML 5. But I am not using HTML 5 in the project I am working which doesn't support the new feature.
Any idea?
Thanks to HTML5, it is as easy as this:
<input type='file' required />
Example:
<form>
<input type='file' required />
<button type="submit"> Submit </button>
</form>
You can do it using Jquery like this:-
<script type="text/javascript">
$(document).ready(function() {
$('#upload').bind("click",function()
{
var imgVal = $('#uploadfile').val();
if(imgVal=='')
{
alert("empty input file");
return false;
}
});
});
</script>
<input type="file" name="image" id="uploadfile" size="30" />
<input type="submit" name="upload" id="upload" class="send_upload" value="upload" />
As of now in 2017, I am able to do this-
<input type='file' required />
and when you submit the form, it asks for file.
You could create a polyfill that executes on the form submit. For example:
/* Attach the form event when jQuery loads. */
$(document).ready(function(e){
/* Handle any form's submit event. */
$("form").submit(function(e){
e.preventDefault(); /* Stop the form from submitting immediately. */
var continueInvoke = true; /* Variable used to avoid $(this) scope confusion with .each() function. */
/* Loop through each form element that has the required="" attribute. */
$("form input[required]").each(function(){
/* If the element has no value. */
if($(this).val() == ""){
continueInvoke = false; /* Set the variable to false, to indicate that the form should not be submited. */
}
});
/* Read the variable. Detect any items with no value. */
if(continueInvoke == true){
$(this).submit(); /* Submit the form. */
}
});
});
This script waits for the form to be submitted, then loops though each form element that has the required attribute has a value entered. If everything has a value, it submits the form.
An example element to be checked could be:
<input type="file" name="file_input" required="true" />
(You can remove the comments & minify this code when using it on your website)
var imgVal = $('[type=file]').val();
Similar to Vivek's suggestion, but now you have a more generic selector of the input file and you don't rely on specific ID or class.
See this demo.
Some times the input field is not bound with the form.
I might seem within the <form> and </form> tags but it is outside these tags.
You can try applying the form attribute to the input field to make sure it is related to your form.
<input type="file" name="" required="" form="YOUR-FORM-ID-HERE" />
I hope it helps.
All statements above are entirely correct. However, it is possible for a malicious user to send a POST request without using your form in order to generate errors. Thus, HTML and JS, while offering a user-friendly approach, will not prevent these sorts of attacks. To do so, make sure that your server double checks request data to make sure nothing is empty.
https://www.geeksforgeeks.org/form-required-attribute-with-a-custom-validation-message-in-html5/
<button onclick="myFunction()">Try it</button>
<p id="geeks"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("gfg");
if (!inpObj.checkValidity()) {
document.getElementById("geeks")
.innerHTML = inpObj.validationMessage;
} else {
document.getElementById("geeks")
.innerHTML = "Input is ALL RIGHT";
}
}
</script>
For testing, I'd like to load the page called by submit on a new tab. Is this possible?
<form target="_blank" [....]
will submit the form in a new tab... I am not sure if is this what you are looking for, please explain better...
It is also possible to use the new button attribute called formtarget that was introduced with HTML5.
<form>
<input type="submit" formtarget="_blank"/>
</form>
I have a [submit] and a [preview] button,
I want the preview to show the print view of the submitted form data, without persisting it to database. Therefore I want [preview] to open in a new tab, and submit to submit the data in the same window/tab.
<button type="submit" id="liquidacion_save" name="liquidacion[save]" onclick="$('form').attr('target', '');" >Save</button></div> <div>
<button type="submit" id="liquidacion_Previsualizar" name="liquidacion[Previsualizar]" onclick="$('form').attr('target', '_blank');">Preview</button></div>
Add target="_blank" to the <form> tag.
Since you've got this tagged jQuery, I'll assume you want something to stick in your success function?
success: function(data){
window.open('http://www.mysite.com/', '_blank');
}
Try using jQuery
<script type="text/javascript">
$("form").submit(function() {
$("form").attr('target', '_blank');
return true;
});
</script>
Here is a full answer - http://ftutorials.com/open-html-form-in-new-tab/
This will also work great, u can do something else while a new tab handler the submit .
<form target="_blank">
Submit
</form>
<script>
$('a').click(function () {
// do something you want ...
$('form').submit();
});
</script>
Your browser options must be set to open new windows in a new tab, otherwise a new browser window is opened.