I have the following codes, saveBt, should not submit when user selects cancel on confirm however it seems it still submits cause I have onClickTopics, I need this onclicktopics to reload a struts jquery grid. Any workarounds?
$("#saveBt").click(function(event){
event.preventDefault();
if($('#Form').valid()){
if (confirm("Are you sure ?")) {
return true;
} else {
return false;
}
}
});
<sj:a id="saveBt" onClickTopics="reloadGrid" name="saveChannel" value="saveChannel">Save</sj:a>
UPDATE: Need onClicks to reload grid via :
<sj:a id="saveBt" onClickTopics="reloadGrid" name="save" value="save">Save</sj:a>
<sjg:grid id="gridTable" reloadTopics="reloadGrid" resizable="true"
autowidth="true">
try this, delegate method.
$(document).on('click','#saveBt', function(event){
event.preventDefault();
if($('#Form').valid()){
if (confirm("Are you sure ?")) {
return true;
} else {
return false;
}
}
})
Reload the grid after the click event fire.That is inside the binding method. Then call the event.preventDefault after you reload the grid.
The point is not to bubble the event after the grid reload. If it's that what you mean.
Ended up with:
function validator() {
if (confirm("Are you sure you want to save?")) {
$("#Form").submit();
$("#refresh_gridTable").click();
}
}
<sj:a id="saveBt" onclick="return validator();">Save</sj:a>
Struts jquery Grid creates a refresh button via setting : navigatorRefresh="true" just had to click it after submit.
Related
I am using a beforeonload function but I want when the user submits the form beforeunload shouldn't work. Here is my code, which works fine in Chrome but not in Firefox.
window.form_submitted = '';
jQuery(document).ready(function() {
jQuery(window).on('beforeunload', function() {
if (form_submitted == '') {
return "Are you sure to leave that page";
}
});
});
jQuery('#form').on('submit', function (e) {
e.preventDefault();
jQuery(window).off('beforeunload');
form_submitted = 1;
site_redirect(resp.payment_url);
}
return false;
});
You have several syntax issues, and you have to place the submit block inside the DOMReady handler, otherwise JS will attempt to bind the event to an element which doesn't yet exist in the DOM. Also note you can remove the the global flag variable as you are unbinding the beforeunload event on form submission. Try this:
jQuery(document).ready(function($) {
$(window).on('beforeunload', function() {
return "Are you sure to leave that page";
});
$('#form').on('submit', function (e) {
e.preventDefault();
$(window).off('beforeunload');
site_redirect(resp.payment_url);
});
});
Also note that by doing a redirect when the form is submit (assuming that's what the site_redirect function is doing) then the content of the form will be lost.
Not sure if this has been answered elsewhere, (apologies if so!)
But...
I have an edit field which is validated on the .change() event.
what I want to do is this:
if the user has mouse-pressed the save button directly after typing, .change() fires first, then the button .click() fires after - I want to prevent the .click() event firing if the entered value doesn't get validated, once the popup has been cleared.
This is an example of what it is doing now, but this still allows other buttons to be pressed.
validateRetention(e) {
if (someCondition) {
return true;
} else {
return false;
}
}
$('input[type="number"]').change(function () {
if (!validateRetention(this)) {
alert("bad data entered");
}
}
You need to prevent default action:
$('form').on('submit', function(event) {
if(isNotValidForm) {
event.preventDefault();
// make validation balloons
}
});
I currently have a lightbox popup attached to a submit button that shows only the first time the submit button is clicked. Basically before someone submits a form, we want them to see this popup when they hit the submit button. And that all works fine, but now I need to make it to where on that first click, the form doesn't submit/process. However, after that first click, the submit button would need to be enabled to where they can submit the form.
Any idea how to change the below code to where the submit button does not process the form only the first time the submit button is clicked?
<script type="text/javascript">
$('#Submitbutton').one("click",function(e) {
$('#lp').lightbox_me({
centered: true,
overlayCSS:{background: '#481d33', opacity: .45},
overlaySpeed:0,
lightboxSpeed:0
});
});
</script>
var hasClicked = false;
$('#Submitbutton').on('click',function(e) {
if (hasClicked === true) {
//submit form here
} else {
e.preventDefault();
hasClicked = true;
$('#lp').lightbox_me({
centered: true,
overlayCSS:{background: '#481d33', opacity: .45},
overlaySpeed:0,
lightboxSpeed:0
});
}
});
Sets a variable on first submit, then on second submit does something different because of that variable.
Edit: Consistent quotes and code cleanup.
Change .on() from .one(). You can declare a variable to track whether button was clicked or not.
var isAlreadytClicked = false;
$('#Submitbutton').on("click", function (e) {
if (isAlreadytClicked == false) {
isAlreadytClicked = true;
return;
}
if (isAlreadytClicked) {
//Do whatever you want on subsequent click
}
});
add the line
$('#SubmitBtn').attr('disabled',false);
inside the if block.
You can use the counter to determine clicked count:
var count = 0;
$('#Submitbutton').click(function(e) {
count++;
if(count==1)
return;//return if clicked first time
$('#lp').lightbox_me({centered: true,overlayCSS:{background: '#481d33', opacity: .45},overlaySpeed:0,lightboxSpeed:0});
});
<input type="button" id="SubmitBtn" value="Submit" onclick="return submitData();" disabled="disabled" >
In Script
//create a global variable for clicked or not
var submitBtnClicked = false;
function submitData()
{
if(submitBtnClicked )
{
$('#SubmitBtn').attr('disabled',false);
submitBtnClicked =true;
}
}
simply a return false should do.
alternatively e.perventDefault() may help for event bubbling.
$('#Submitbutton').one("click",function(e) {
$('#lp').lightbox_me({
centered: true,
overlayCSS:{background: '#481d33', opacity: .45},
overlaySpeed:0,
lightboxSpeed:0
});
e.perventDefault();
return false;
});
First sorry for my bad English.
I would like to show a confirmation layer (id="confirmwin") before submitting a form (id="form"). There is another button (id="yes") to submit the form.
I tried this:
Layer:
<div id="confirmwin" style="display:none">
Are you sure to submit?<br>
Yes No
</div>
JavaScript:
$(document).ready(function(){
$("#yes").click( function() {
$("#form").off("submit").submit();
});
$("#form").on("submit", function() {
$('#confirmwin').show();
return false;
});
});
Sometimes (not always) it looks like it's in an endless loop.
Perhaps the #yes click event's off event goes wrong.
Have you tried removing the .submit() while turning it off?
$("#form").off("submit").submit();
shouldn't it be..
$("#form").off("submit") //if
and only if confirmed proceed to do..
$("#form").submit(); //then you can /off() but I don't see the need to
One solution would be to pass extra parameters while triggering the submit event.
You can read more about event data in the jQuery API here.
$("#yes").click( function() {
$("#form").trigger("submit", [true]);
});
$("#form").on("submit", function(e, blnConfirmed) {
// If it's not confirmed yet, show the overlay.
if (!blnConfirmed) {
$('#confirmwin').show();
return false;
} // else it actually IS confirmed, do a real submit
});
You should test this code first. It's just an example.
It is easy:
Just add an global var:
var ignoreConfirm = false;
so it will look like:
$("#yes").click( function() {
ignoreConfirm = true;
$("#form").off("submit").submit();
});
$("#form").on("submit", function() {
if(!ignoreConfirm){
$('#confirmwin').show();
return false;
}
});
simples as this
<form id="xpto" name="" action="" ... onsubmit="return callJavascriptFunctionConfirm();">
//bla bla bla here
</form>
function callJavascriptFunctionConfirm(){
//do the logic here
if (yes)
return true;
else
return false;
}
}
I have a form with a submit input and I need that when the button gets clicked, my script do some Ajax actions. Also I need to disable that button during the Ajax request. So I need a jQuery command to avoid real form submit when input is clicked. I tried to use this:
$('input.searchplease').click(function () {
$(this).attr('disabled', 'disabled');
alert('Yep');
//Do Ajax
});
This didn't worked. I mean, the alert shown correctly but form is submitted. So what is your suggestion?
Try this:
$('input.searchplease').click(function (e) {
$(this).attr('disabled', 'disabled');
alert('Yep');
//Do Ajax
e.preventDefault();
});
$('input.searchplease').click(function () {
alert('yep');
return false;
});
This should work
You can do this:
$('form').submit(function(){
... ajax things
return false;
});
I would rather not disable the button (and then enable it), unless I have to.
try this way :
$("#id-of-your-form").submit(function() {
$("#id-of-your-submit-input").attr("disabled", true);
// do-ajax
// you can use jquery's ajax complete handler to enable the submit button again
return false;
});
I think this will do the trick:
$('form').submit(function(event) {
event.preventDefault();
$('#submit-button-ID').attr('disabled', 'disabled');
$.ajax({
...,
success: function() {
$('#submit-button-ID').removeAttr('disabled');
}
});
});