I have a form on a page, and I am trapping the click action on two submit buttons. There is another submit button that is not trapped (i.e. I dont need to show a modal for this button).
So, my obvious problem is that I need to block the submit action when the modal first opens, and I then need to force the submit when the user actually clicks the OK button in the modal. However, because each button has a specific name and value associated with it (which the back-end script needs to know), a $('#myform').submit() method will therefore not work.
function something(msg) {
var $dialog = $('<div></div>').html(msg).dialog({
autoOpen: false,
title: 'Please confirm...',
modal: true,
buttons: {
"OK": function () {
$dialog.dialog('close');
//submit needs to happen here
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
event.preventDefault();
return false;
}
I would include a hidden field to take on the name and value of the submit button clicked:
<input type="hidden" name="subName" value="" />
$("#submit_button_one").function() {
$("input[name='subName']").attr("name", $(this).attr("name")).val(($(this).val());
something("message");
return false;
});
$("#submit_button_two").function() {
$("input[name='subName']").attr("name", $(this).attr("name")).val(($(this).val());
something("message");
return false;
});
function something(msg, act) {
// ...
//submit needs to happen here
$('#myform').submit()
}
Related
I am using JqueryUI for custom Confirm box when user clicks on a button.
Here is the script,
function exit() {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Restore": function () {
callClick();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
}
Here is the HTML code
<asp:Button ID="btnExit" runat="server" Text="Exit" OnClientClick="exit()" />
<div id="dialog-confirm" title="Proceed Confirmation?">
<p>Are you sure you want to exit?</p>
</div
When user click on proceed button i want to call another function.
window.onbeforeunload = null;
function callClick() {
$('#test').click()
}
But as soon as button is clicked alert popups appear along with my custom made alert popup.
i wish to disable the default popup.
please see below image for referrence.
Try to use this method window.onbeforeunload = function(event){} to catch this event.
I have a button on which when the user clicks to delete project on the site a confirmation pops up , I am using alertify.js for this I have the button etc working however when clicking delete the confirmation box appears and automatically deletes project and vanishes before I can either click ok to confirm or cancel.. ?
here is the html
<button type="submit" class="btn btn-link btn-sm" Onclick="return ConfirmDelete();" style="margin:5px;"></button>
here is javascript code
function ConfirmDelete()
{
alertify.confirm("This is a confirm dialog", function (ev) {
ev.preventDefault();
alertify.success("You've clicked OK");
}, function(ev) {
ev.preventDefault();
alertify.error("You've clicked Cancel");
});
}
how can I prevent this from happening ?
You can't prevent form submission in this case because custom confirmation is non-blocking asynchronous dialog. You can stop it however by always returning false and submitting form manually (programmatically) in case of Ok button press:
function ConfirmDelete(button) {
alertify.confirm("This is a confirm dialog", function() {
button.form.submit()
// alertify.success("You've clicked OK", function() {
// button.form.submit()
// });
}, function() {
alertify.error("You've clicked Cancel");
});
return false;
}
For this make sure to pass button reference to your function:
<button type="submit" onclick="return ConfirmDelete(this)">ConfirmDelete</button>
I have a ASP.NET web forms application. I am trying to show a Modal Dialog for confirmation when user clicks on Submit button. I am using OnClientClick of the Button to call a JavaScript function. The function opens the modal dialog if Page Validation is successful. When the user clicks on Yes button of modal dialog, I want the form to be submitted. I tried _doPostback(btn, 'OnClick'), btn.trigger('click') and btn.click(). I can see the modal dialog and the Cancel button works. But when I click on Yes, Page is not Posting. Please see the below code and help me. Thanks!
ASPX:
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"
OnClientClick="clientValidate();return false;"/>
<div id="alert" style="display: none">
Are you sure you want to submit?
</div>
JavaScript:
$(document).ready(function () {
$('#alert').dialog({
title: 'Confirm',
modal: true,
autoOpen: false,
buttons: {
Yes: function () {
var btn = document.getElementById('<%=btnSubmit.ClientID%>');
//_doPostback(btn, 'OnClick');
//btn.trigger('click');
//btn.click();
// Above three didn't work! :(
},
Cancel: function () {
$(this).dialog('close');
}
}
});
});
function clientValidate() {
var btnsubmit = document.getElementById(<%=btnSubmit.ClientID%>);
if (Page_ClientValidate()) {
$('#alert').dialog('open');
}
}
UPDATE:
Corrected _doPostBack() to __doPostBack(). The page posts now. But btnSubmit_Click in not getting called.
Your doPostBack call is wrong. It should be __doPostBack() not _doPostBack() - there are supposed to be two underscores, you have one. Which is probably why it failed to begin with.
Try this instead:
buttons: {
Yes: function () {
var btn = document.getElementById('<%=btnSubmit.ClientID%>');
__doPostback(btn, 'OnClick');
},
UPDATE
Try this:
In your code behind add this in your page load function
if (Page.IsPostBack)
{
var param = Request["__EVENTARGUMENT"];
if (target == "Submit")
btnSubmit_Click(sender, e);
}
In your Javascript you would do
__doPostBack(btn, 'Submit');
That should do it.
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;
});
I am trying to use jQuery UI to build a dialog box with Yes/No button for user confirmation. (This is because I want to make the UI uniform, as I have used jQuery UI to build the warning dialog boxes.) My intention is to ask for user confirmation if a large number (1000 or above) is submitted in the text box. So far my JavaScript code looks like this:
function checkclick(button1, button2, theForm) {
var val;
val = theForm.mybox.value;
v = parseInt(val) || 0;
var btns = {};
btns[button1] = function(){
$(this).dialog('close');
};
btns[button2] = function(){
$(this).dialog('close');
};
if (v >= 1000) {
$('#dialog').dialog({
autoOpen: true,
modal:true,
buttons:btns
});
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
});
return false;
}
return true;
}
And my HTML looks like this:
<div id='dialog' title='Note' style='display:none'>
<p id='dialog_link'>This is a very large number. Are you sure?</p>
</div>
<form name='myForm' action='result.php' method='post'
onsubmit="return checkclick('Yes', 'No', this)">
<input type='text' name='mybox'>
<input type='submit'>
</form>
The problem is, when the user clicks either of the Yes or No button, it will go back to the same page. However, if I change the 'return false' to 'return true' inside the 'if' part, once the Submit button is clicked, the page will go directly to result.php without waiting for the user to click the Yes or No buttons. Is there any way to check which button is being clicked by the user, so that the page will go to result.php after clicking Yes, but remaining at the current page after clicking No?
jQuery dialog has the option buttons which can be used to describe the required buttons and it's action.
function checkclick(button1, button2, theForm) {
var val;
val = theForm.mybox.value;
v = parseInt(val) || 0;
if (v >= 1000) {
$('#dialog').dialog({
autoOpen: true,
modal:true,
buttons:{
"Yes":function() {
alert('Yes has been clicked'); //Your coding here
},
"No": function() {
$( this ).dialog( "close" );
}
}
});
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
});
return false;
}
return true;
}
I don't have the "Reputation" to comment on your follow up so I had to post as an answer. Apologies for the breach in protocol.
If I understand your goal correctly, you just need to conditionally submit the form. I believe you can accomplish this by preventing the default behavior if the user decides the form submission is too long. Something like this:
<form id="target" action="destination.html">
<input type="text" value="string value">
<input type="submit" value="Submit">
</form>
$( "#target" ).submit(function( event ) {
if (//result of dialog is false) {
event.preventDefault();
} else {
return;
}
});