I have the following javascript to show a confirm box when a user leaves the page.
My problem is, it is showing even when user clicks the submit button inside a form in my page. I don't want this to be triggered on form submit and on a span click.
How can I allow form submit and span click in the function below?
window.onbeforeunload = function (e) {
e = e || window.event;
return '';
};
EDIT-------------------------------
sorry, it is now a form, it is simple button and a href:
I have one page that uses only a button:
<input type="button" value="Save" id="btn-crop" />
and a link:
<a href="done.php" class=button2>Save</a>
You could call [Event].stopPropagation in an callback of submit event for each button in the page.
This function would stop the callback function of the beforeunload event when would go submit the button.
You can read more about the [Event].stopPropagation
here.
Like so: Button.addEventListener("submit",function(Event){Event.stopPropagation()})
You should be able to check what object dispatched the event using e.currentTarget property and then show the prompt if necessary.
Related
I am currently working on a Django project and am using the Django admin and its jQuery to add a modal between the submit button and the real form submit.
To achieve this I've implemented the following:
var submit_form;
django.jQuery('form').submit(function (event) {
event.preventDefault();
submit_form = this;
modal.open();
});
and in modal close function I'm using:
submit_form.submit();
This actually works, but I loose the Django admin functionality of the "Save and add another" and "Save and continue editing" buttons.
They all do now the same action as the default submit button.
The only thing added to the two other submit buttons is a name attribute:
<input type="submit" value="Save" class="default" name="_save">
<input type="submit" value="Save and add another" name="_addanother">
<input type="submit" value="Save and continue editing" name="_continue">
I did also check into event and used event.currentTarget.submit(); in modal close function, but this did not actually work either.
Does someone have an idea how to properly prevent default submit and execute it later?
Thanks.
Okay, I figured out how to do this. I had to add a hidden input to my form including the name from the submit button.
The following is the modified function I use to fill the missing input:
django.jQuery('form').submit(function (event) {
event.preventDefault();
submit_form = this;
// Append action as hidden input
var action = django.jQuery(this).find('input[type=submit]:focus').attr('name');
var input = django.jQuery('<input>', {
type: 'hidden',
name: action
});
submit_form.append(input[0]);
// Release save button
django.jQuery(':submit').blur();
// Finally open modal window
modal.open();
});
I try to make a confirm popup that going to jump when user click on a button of form.
If the user click on ok in the popup, the form goting to submit.
Its must to be dynamic becuse i have a lot of forms in one page and all form must to get the confirm popup.
I replaced the submit button with a normal button and when the user click on the button the confirm jumping.
<input type='button' name='submitButton' onclick="openPopup(this);">
Its work amazing but when the user into a text input and press on eneter its not submit the form.
What can i do?
Use following JS:
<input type='submit' name='submitButton' onclick="openPopup(this);">
If you can't use a submit button in your form you just need to handle this in the keydown event in your form inputs to check if Enter key is pressed and click your button dynamically:
$("#formID").find('input[type=text]').on('keydown', function (e) {
if (e.keyCode == 13) {
$('[name="submitButton"]').click();
}
});
Note:
I used formID as id of your form you just need to replace it with your form id.
$(document).ready(function() {
$('input').keypress(function(data) {
if (data.keyCode == 13)
data.target.form.submitButton.click();
});
});
When you accept confirmation then fire this event
$('[name="submitButton"]').click();
When my user presses 'Enter' after clicking a checkbox, my form should act as though the 'Next' button was pressed. But, I am using PPR (partial page rendering) so that when it is clicked, my checkbox triggers a 'Next' button to get repainted. This is done by setting autoSubmit="true" on the checkbox and a partialTrigger on the button.
The problem is that with autoSubmit=”true” on my component, the javascript/jquery does not ‘hear’ the keyup event. I assume that this is because when the button that has the partialTrigger on it is repainted, my checkbox has lost focus. I have tried resetting the focus on the checkbox in an onclick method but it seems to fire too early. I set a timeout on it too, but that didn't work either. I have also tried programatically making a javascript call during the checkbox's valueChangeListener method, but this must be firing too early as well. Does anyone know why this is happening and what I can do?
Here is the code
$(document).ready(function(){
$("input[id='subview:agree']").keyup(function (event) {
if (event.keyCode == 13) {
processEnterKey();
}
});
});
function processEnterKey() {
$("button[id='subview:btnSubmit']").click();
}
Checkbox:
<tr:selectBooleanCheckbox binding="#{bean.termsOfUseChkBox}"
id="agree"
autoSubmit="true"
simple="true"
valueChangeListener="#{bean.agreementChangeListener}"/> /
Button:
<tr:commandButton id="btnSubmit"
disabled="#{!bean.agreementAccepted}"
partialTriggers="agree" text="Next"
action="#{bean.termsOfUse_action}"
partialSubmit="false"
onclick="handleLoadingPleaseWait()"
blocking="true"/>
Here is the onclick method I used to try to set focus back to the checkbox so it could 'hear' the keyup:
$("input[id='subview:agree']").click(function (event) {
if(document.getElementById('subview:agree').checked) {
setTimeout(function(){document.getElementById('subview:agree').focus();},1000)
}
});
Here is the server-side code I put in the changeListener:
FacesContext fctx = FacesContext.getCurrentInstance();
ExtendedRenderKitService erks = null;
//compose JavaScript to be executed on the client
StringBuilder script = new StringBuilder();
script.append("document.getElementById(\"subview:agree\").focus();");
erks = Service.getRenderKitService(
fctx, ExtendedRenderKitService.class);
erks.addScript(fctx, script.toString());
If you want to submit the form from each imput by pressing enter you can simply use the defaultCommand attribute on your tr:form.
Documentation on <tr:form defaultCommand="..."/>
The id attribute of the command button whose action would be invoked by default for form submit on hitting enter on any of the input fields of the form.
So, setting it to btnSubmit should do the trick.
As this did not help for your scenario, you could try adding a onkeypress attribute to your checkbox:
<tr:selectBooleanCheckbox binding="#{bean.termsOfUseChkBox}"
id="agree"
autoSubmit="true"
simple="true"
valueChangeListener="#{bean.agreementChangeListener}"
onkeypress="if (event.keyCode === 13){ this.click(); }"/>
For me this triggered submitting my form.
I AM NOT TRYING TO SUBMIT A FORM USING JAVASCRIPT!!" The above remark is misleading, inappropriate and confused
I have a html form that contains several elements (all with unique #id) which when clicked using the mouse correctly submits the form with the action=value pair.
<html><body><form id="frm-table" name="frm-table" method=get>
<!-- the form has an action url to call php script that interprets passed values and serves new dynamic page -->
<!-- #20140820 - #id and #name added to form -->
<button id="cancel-btn" type="submit" name="action" value="cancel"><img src="http://foo.localhost/img/cancel16.png" alt="Cancel" title="Cancel" class="btn" name="btn_c" /></button>
<!-- several other inputs eg type=text and buttons type=submit -->
</form></body>
I have a js script that captures a document ESC keydown and as example: displays an alert to confirm capture.
document.onkeydown = function(evt) {
evt = evt || window.event;
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if (evt.keyCode == 27) {
if (document.getElementById('cancel-btn') != null) {
// alert('Esc key pressed.'); //just to test capturing ESC key - OK
// testing suggestion 201408211700
document.getElementById('frm-table').action = 'http://foo.localhost/index.php?page=bg'
document.getElementById('frm-table').submit(); //suggestion does not work - form not submitted
// document.getElementById('cancel-btn').click(); //original does not work
}
evt.returnValue=false;
}
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
};
When the alert is replaced by a .click() nothing happens.
I do not understand why the native click event is not firing.
I am aware there is no click event on a button element, however it does accept and action a mouseclick on it. Calling a function to submit the form (by adding a listener event to the button does not work - it submits the form but the posted values do not include the button action=value pair.
So is there another js command to trigger the button element''s native functionality? Is important to note that the button is one of several type=submit buttons all of which give a different action-value pair.
[Ed] In an attempt to clarify:
I am not trying to add a handler to the button element just trying to replicate the native type=submit function of the button. (mouse clicking the button submits the form with the important action=value pair without any js)
I only have the option of adding javascript at my disposal not changing the dynamic generation of the page as it is part of a much larger application.
So although I thank those who have responded, the answers, so far, they do not resolve the question.
Tested in Firfox31 and IE9
That is because the <button> does not have an onclick handler on it, so it won't be triggered.
Instead of
document.getElementById('cancel-btn').click();
you can just do
document.forms[0].reset();
which will also reset the form.
Unless the button that is called cancel-btn actually has to submit the form in which case you need:
document.forms[0].submit();
basically I have this:
<asp:TextBox runat='server' />
<button id='b2'>hi</button>
<script>
$('#b2').click(function(e){
e.preventDefault();
alert('you clicked the button');
});
</script>
the problem is that when hitting enter inside the textbox the click event on the b2 occurs so I get the js function executed, anybody knows how to stop this?
Pressing the return/enter key while focusing a text box is treated the same way as clicking on the submit button. What you can do is attach a keypress event handler to all text boxes in your form, and simply ignore the return key press.
Code looks like this:
$('input[type="text"]').keypress(function(event) {
if(event.keyCode == 13) {
event.preventDefault();
alert("enter!");
}
});
Note that I don't use ASP, so I tested this with a standard HTML text box and submit button.
adding the attribute type="button" to the button tag stopped this behavior o_O