I have tried to boil this down to a simple example to demonstrate what I'm running into.
I have a form with an input field and a submit button:
<form id="focusOutAfterInputForm">
<input type="text" id="focusoutAfterInput">
<input type="submit" >
<div></div>
</form>
The input field has a focusout handler attached that inserts a new element below the input:
jQuery("#focusoutAfterInput").focusout(function() {
jQuery(this).after("<div>message</div>");
});
I have also attached a submit handler just to capture if the submit is run:
jQuery("form").submit(function() {
jQuery("#console").append("<li>submitted form" + this.id + "</li>");
return false;
});
If the cursor is placed into the input and the submit button is clicked, the submit handler does not fire. If the submit button is clicked a second time it will fire. Also, if the field is blur'ed and then the submit button is pressed it will fire.
However, if instead we insert the new element below the div in the form, the submit button will fire even though the element is inserted:
<form id="focusoutAfterDivForm" novalidate="novalidate">
<input type="text" id="focusoutAfterDiv" required="true">
<input type="submit" >
<div></div>
</form>
jQuery("#focusoutAfterDiv").focusout(function() {
jQuery(this).parent().last().after("<div>message</div>");
});
Here is a jsfiddle demonstrating the code. I'm a bit baffled. Ideas anyone?
The problem doesn't seem to be that submit isn't executed, but rather the click event isn't executed on the button, because the mouseup isn't on the submit button once the div is inserted. If you use tab and space in your fiddle it works. Also if you add the element in a way that the submit button doesn't move, it works:
jQuery("#focusoutAfterInput").focusout(function() {
jQuery(this).next().after("<div>message</div>");
});
or in this example: http://jsfiddle.net/K9vrW/3/
Related
I have the following jsp:
...
<script type="text/javascript">
$(function() {
// prevent multiple submissions
$('#saveCallListBtn').one("click", function() {
$('#callListForm').submit();
});
});
...
</script>
...
<form:form id="callListForm" commandName="callList" action="${contextPath}/calllist/save" method="POST" htmlEscape="true">
...
<td colspan="2" style="text-align: center">
<input id="saveCallListBtn" type="submit" value="Save" class="button-med"/>
</td>
...
</form:form>
The behavior I am looking for is to only all the form to be submitted once no matter how many times the save button is clicked. Using the jQuery .one function, I can get the above code to correctly work. As the form will submit multiple times if I click more than once.
The following code will work fine:
$('#saveCallListBtn').on("click", function() {
$(this).prop("disabled", true);
$('#callListForm').submit();
});
But I am interested to know what I am doing wrong with the .one function.
Note the type here:
<input id="saveCallListBtn" type="submit" value="Save" class="button-med"/>
A submit button in a form will submit the form, no JavaScript required. So when your handler is automatically removed, on the next click the default handling (submitting the form) occurs, courtesy of the browser.
The only reason you're not seeing the form submitted twice on first click, I suspect, is that the act of submitting the form begins the process of tearing down the page to make room for the result of the submission.
FWIW, I would suggest that you not have a click handler on the button, but rather a submit handler on the form that, if all is well and it's going to allow submission to occur, disables the button and sets a flag to prevent future form submission, since forms can be submitted in multiple ways. (On some forms, pressing Enter in a text field will do it, for instance.)
E.g.:
$("#callListForm").on("submit", function(e) {
var $btn = $("#saveCallListBtn");
var valid = !$btn.prop("disabled");
if (valid) {
// ...do any other validity checks you may want, set `valid` to false
// if problems encountered...
}
if (valid) {
$btn.prop("disabled", true);
} else {
e.preventDefault();
}
});
The jQuery one function will execute the event handler only once. However, the default behaviour of the element clicked will execute indefinitely.
Change the type of the button to button, such that it has no default behaviour:
<input id="saveCallListBtn" type="button" value="Save" class="button-med"/>
I have a contact form (Drupal Webform) that includes a file upload that creates a form containing this markup (i have stripped the name, size and id attr. in this example):
<div class="form-managed-file">
<input type="file" class="form-file">
<input type="submit" value="Upload" class="form-submit ajax-processed">
<input type="hidden" value="0">
</div>
I would like for the upload button to be clicked automatically on file upload. I have done this in the past with a function like this but it is not working on this one:
$('.webform-client-form').on('change', 'input.form-file', function() {
$(this).next('input[type="submit"]').mousedown();
});
However these are working on this form:
$('.webform-client-form').on('change', 'input.form-file', function(){
$(this).next('input[type="submit"]').css("background", "red");
alert($(this).next('input[type="submit"]').val());
});
The first gives the button a red background. The second alerts "Upload". Why is the mousedown not working? I have also used click() trigger("click") and trigger("mousedown") but none of them are clicking the upload button. I am using jQuery 1.10.
You're only triggering mousedown. You also need to capture the trigger and act accordingly, such as:
$('.webform-client-form').on('mousedown', 'input[type="submit"]', function() {
alert ("mousedown");
});
If I am not wrong, what you're trying to do is to submit the form when the .change is triggered. If that's the case, you might as well submit the form within your .change handler, such as:
$('.webform-client-form').on('change', 'input.form-file', function() {
$('.webform-client-form').submit();
});
Actually click() works fine:
$(this).next('input[type="submit"]').css("background", "red").click();
Here is the fiddle.
I have a form that uses onblur for most of the input fields, like follows:
<form>
<input name="..." id="..." onblur="myFunction(name)" />
<button id="..." onclick="submit()">Submit</button>
</form>
The form validates certain fields (i.e. username, email) in real time via the onblur events, but the same check happens when the user clicks the submit button.
Currently, when the user clicks the submit button, the onblur event is first triggered, and then the onclick event from the button is triggered - thus running the check twice and wasting a couple extra seconds.
Is there any way to override the onblur method to exclude the blur that happens when the user presses the submit button?
I was thinking a simple if(/*button is clicked*/){} within myFunction(), but I wouldn't know how to check for the button click. And it seems, based on the current performance, that the button click is not even registered until after the blur.
Thanks in advance.
You could do this:
HTML
<form>
<input type="text" name="name" id="id" />
<input type="submit" />
</form>
jQuery
$(document).on('blur', 'input:not([type="submit"])', function(e) {
var key = e.keyCode; // the key pressed
var elem = e.target; // the element blurred
myFunction(name);
});
$(document).on('click', 'input[type="submit"]', function() {
submit();
});
We have a script that tracks form submits by adding an event listener to the form. The problem is that one customer submits the form via a link using
Submit
which ignores the event listener. Here's a JSFiddle to demonstrate: http://jsfiddle.net/XhLkG/
As you can see the Submit button triggers the alert while the Submit link simply just submits the form and bypasses the event listener.
Is there a way to still trigger the event listener?
EDIT: We cannot change the markup since it's on our customer's homepage where they have embedded our script. Sorry if I didn't make it clear.
You can use this:
var form = document.getElementsByClassName('form');
form[0].addEventListener("submit", function(e) {
e.preventDefault();
alert('event');
});
form[0].childNodes[3].addEventListener("click", function(e) {
e.preventDefault();
alert('event');
});
instead of using the href try this
<form method="post" name="formname" class="form">
<input type="text" name="hello">
<a onclick="javascript:document.formname.submit();">Submit</a>
<input type="submit">
</form>
remove the href and replace it with onclick
try the following with jquery:
$("form").submit(function (e) {
e.preventDefault();
alert('event');
});
Reference here.
I have a function called showHide() that alternately shows and hides a text input field and a button (button2) when another button (button1) is clicked. The text input field is automatically focused when it opens, and this works great.
The HTML looks roughly thus:
<button1>Show/Hide</button>
<form>
<input class="hidden" type="text" />
<button2 type="submit">Submit</button>
</form>
<script type="text/javascript">
$("button1.someSelectors").click(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})
</script>
I would like to extend the function such that when the input field loses focus it and button1 disappear, unless it loses focus because button1 is being clicked. As it reads now I'm only testing whether the input field has focus or not. How can I also check whether button2 is being clicked or not?
I tried:
$("input.someSelectors").blur(function() {
if (!$("button2.someSelectors").is(":focus")) {
showHide();
}
});
but it hid the form elements even when I tried clicking button2.
An alternative would be to test whether button2 is being clicked or not in the "hide" part of the function, but when I added
if(!$("button2.someSelectors").click()) {do the hide part of the function}
to showHide(), the form got submitted when I clicked button1 or button2. Here is an example of my problem. Can anyone help?
--Edit:
var showHide=function(item, category) {
if($("input."+item+"."+category).hasClass("hidden")) {
$("input."+item+"."+category).show("fast").focus().removeClass("hidden");
$("button.buy."+item+"."+category).show("fast");
$("button.purchase."+item+"."+category).text("Never mind!");
} else {
$("input."+item).hide("fast").addClass("hidden");
$("button.buy."+item).hide("fast");
$("button.purchase."+item).text("Purchase");
}
}
blur event on textbox is triggered before the click event fires on the button. In order to avoid that you can use mousedown event instead of click event which will be triggered before click event. Try this
$("button1.someSelectors").mousedown(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})