I have a form with an image button inside of it, and this image button is submitting the form. How do I override this functionality?
<form><input type="image" src="/images/arrow.png" id="imageButton" onClick="javascript:autofill();"/></form>
Why not just have image? return false would also stop the form submit action.
<form><input type="image" src="/images/arrow.png" id="imageButton" onClick="autofill();return false;"/></form>
simply return false after your autofill() function.
onclick="autofill();return false;"
Why use an input element at all? I'd have thought just using an image with an onclick event would be more appropriate if you don't want to cause any submit or reset behaviour
<image src="/images/arrow.png" onclick="javascript:autofill();" width="xxx" height="xxx" alt="Autofill" />
Clicking on button inside a form, submit the form by default. To change it, you have to define a button with type="button". Then, you can add img element inside it. This is the best way I found to do it.
<form>
<button type="button" id="imageButton" onclick="javascript:autofill();">
<img src="images/arrow.png">
</button>
</form>
Try to use event.preventDefault to abort submit event on button click
for example:
$("#idButton").click(function(event) {
if(!valid)
{
//stopEvent
event.preventDefault();
} else {
//submit your form
$("#form").submit();
}
});
Do you want to disable your button after click the submit button/image?
if you're using php you can use the code below or add disabled="disabled" to disable the button as long as you keep it in your input form..
<?php if (isset($disable) && $disable === true) echo ' disabled="disabled"'; ?>
how to add my code
if you use your line of code with an image type:
try:
<form><input type="image" src="/images/arrow.png" id="imageButton" onClick="javascript:autofill();" <?php if (isset($disable) && $disable === true) echo ' disabled="disabled"'; ?> /></form>
Please, read this answer from me (jagb) too if you'd like to use an image without javascript, the needed css can be found on there as well.
Adding attribute type="button" to button tag resolved my issue.
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.
When clicking on the checkbox it hides currently displaying DIV & shows hidden DIV. After this hidden div displayed it has a form to submit on button click.
My problem is when i click on this submit button, the form is hiding again. I have tried stopPropagation(), preventDefault() and many ways & problem still exist. When I use preventDefault() then it shows the div without hiding but the submit is disabled.
I saw many questions related this.but nothing works to me. I want to submit form without hiding the div which the form resides. I'm a beginner with jquery.
$(function() {
$("#active").click(function() {
if ($(this).is(":checked")) {
$("#donorTeam").show();
$("#donor").hide();
} else {
$("#donorTeam").hide();
$("#donor").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="active"> select type
<div id="donor" style="display:block;"></div>
<div id="donorTeam" style="display:none;">
<form>
<button type="submit" id="sub">Add</button>
</form>
</div>
Thanks in advance.
You could try either of these 2 approaches
1.
$(function () {
$('#donorTeam form').on('submit',function (e) {
// Ajax call here
e.preventDefault();
});
});
2 . add onsubmit="return false" to the form attribute
<form onsubmit="return false">
<button type="submit" id="sub">Add</button>
</form>
I have created a form with a submit button, the submit button is outside the actual form but its targeting the form using the form attribute for example.
<form id="myform">
</form>
<button form="myform"></button>
I apologize for the week example. This is working accross all browsers except IE 11. IE 8-10 is working 100%. Any ideas on how I can fix this. I prefer not writing scripts. I can do this with jQuery but I prefer to just keep it clean if possible
This is a solution with just a click event and a line of css. ( Minimal )
If your button has to be outside the form due to User Interface design.
I would suggest you add an input submit/button inside the form:
<form id="myform">
<input type="button" value="Submit" class="myButton" />
</form>
<button id="outerBtn">Submit</button>
Hide the input:
.myButton {display:none;} OR {visibility:none;}
Use jQuery to trigger click the input button inside the form:
$('#outerBtn').on('click', function(e){
e.preventDefault();
$('.myButton').trigger('click');
});
Just some quick answer. Should be alright.
If you do not want to write script, I would suggest you just keep your input button/submit inside the form.
<form id="form-any-name">
<input type="button" value="Submit" class="myButton" />
</form>
<button type="submit">Submit</button>
<script type="text/javascript">
$(document).ready(function() {
$('button[type=\'submit\']').on('click', function() {
$("form[id*='form-']").submit();
});
});
</script>
Simply include document on ready submit catcher you can place that code in main js file since we catching dinamicaly form id starting with form- so in other pages you can have the different foms:)
I would like to post my answer as this post helped me a lot and I came with an idea that works if you want to add the "button outside the form" functionality on older browsers.
I use JQuery but I dont think I would be a major problem to use pure JS as it's not complicated code.
Just create a class just as some of the answers suggested here
.hiddenSubmitButton {
display: none;
}
$("body").on("click", "button[form]", function () {
/*This will get the clicks when make on buttons with form attribute
* it's useful as we commonly use this property when we place buttons that submit forms outside the form itself
*/
let form, formProperty, formAttribute, code, newButtonID;
formProperty = $(this).prop("form");
if (!(formProperty === null || formProperty === "")) {//Most browsers that don't wsupport form property will return null others ""
return; //Browsers that support the form property won't continue
}
formAttribute = $(this).attr("form");
form = $("#" + formAttribute);
newButtonID = formAttribute + "_hiddenButton";
if (document.getElementById(newButtonID) !== null) {
$("#" + newButtonID).click();
return;
}
code = '<input id="' + newButtonID + '" class="hiddenSubmitButton" type="submit" value="Submit" />';
$(form).append(code);
setTimeout(function () {
$("#" + newButtonID).click();
}, 50);
});
One thing I like about creating buttons outside the form is that they allow us to custom the design more easily and we can use this code and it will work on old browsers and also, the browser will use its HTML form validator.
IE understands 'for', you can use "label for=''".
<label for="form_one_submit">Button one</label>
<form action="" id="form_one">
<span></span>
<input type="submit" id="form_one_submit" style="visibility:hidden;">
</form>
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.
I have a form with several submit buttons. I want my last button to handle the submit rather than the HTML5 spec'ed first button.
I can't change the html at this point and am fairly sure this requires JS. But when I've given it a shot I've gotten into nasty loops or dead code trying to prevent default behaviour and then fire my other button.
Has anyone done this before? jQuery is on the page if needed.
Thanks,
Denis
Since you mentioned jQuery :)
If all you want to do is submit your form when a user presses the enter key, then
$(function() {
$('body').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
$('#myForm').submit();
}
});
});
However, if you have different behavior/forms depending on which button is clicked and you want the enter key to trigger your last button's click event, then
$(function() {
$('body').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
$('input[type="submit"]:last').click();
}
});
});
You should just change the input element's type attribute to button instead when you don't want it to submit the form. (I know you said you can't really change the HTML, but this is the best way)
<input type="button" name="mybutton" class="submit-button" value="I wont submit!" />
jQuery code:
$('.submit-button').click(function() {
$('#secret-value-field').val($(this).val());
$(this).parents('form').submit();
});
Or something along those lines.