I have the following code which is not working. I hope you can help me with this.
basically I have a form that i want to confirm using jQuery Dialog first before submitting it. so when i click on submit i get the dialog but when i press yes to confirm nothing happens!!
$(function() {
$('#massform').submit(function(e){
e.preventDefault();
$('#dialog-mass-confirm').dialog('open');
});
$( "#dialog-mass-confirm" ).dialog({
autoOpen: false,
resizable: false,
draggable: false,
height:180,
modal: true,
buttons: {
"No": function() {
$( this ).dialog( "close" );
},
"Yes": function() {
$("#massform").submit();
}
}
});
});
<form id="massform" method="post" action="new.php">
<input type="text" name="email" size="41">
<input type="submit" value="Submit">
</form>
It appears that you may have a circular reference because you are rebinding the submit function for the form, and then calling submit from the modal which will fire the same event that opened the modal in the first place. I would suggest the following to avoid this problem:
$(function() {
$('#submitButton').click(function(e){
e.preventDefault();
$('#dialog-mass-confirm').dialog('open');
});
$( "#dialog-mass-confirm").dialog({
autoOpen: false,
resizable: false,
draggable: false,
height:180,
modal: true,
buttons: {
"No": function() {
$( this ).dialog( "close" );
},
"Yes": function() {
$("#massform").submit();
}
}
});
});
<form id="massform" method="post" action="new.php">
<input type="text" name="email" size="41">
<input ID="submitButton" type="button" value="Submit">
</form>
You shold look up scopes and event trigering in more detail so you understand the problem you are facing.
1.st you have created an jqery function which is bound to your form submit event.
$('#massform').submit(function(e){
e.preventDefault();
$('#dialog-mass-confirm').dialog('open');
});
When you use the submit button your event gets fired, and the dialog opens. When you however submit the form with
"Yes": function() {
$("#massform").submit();
It fires the bound function pointed out earlier... which prevents the form it self from being submitted. To be precise you just reopen the dialog. but that happens so fast that you don`t notice it.
If you are forced to use the submit action for compatibility reasons... you could use a loc variable to do the dirty job...
$('#massform').submit(function(e, lock){
if(lock)
e.preventDefault();
$('#dialog-mass-confirm').dialog('open');
});
while you may set the lock in the submit. Have never tried it tht way, but it should work. i usually end up using a variable from the document ready scope.
This is a dirty solution when you cant modify the form. Ugly but it works.
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 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;
}
});
I'm trying to submit a form with AJAX, the form being content of jQuery UI Dialog.
I use the same code as in jQuery's documentation
but I modified the form so there is only one text input, so the form looks like this:
<form>
<fieldset>
<label for="answer"><strong>Your Answer : </strong></label>
<input type="text" name="answer" id="answer" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
When I click the OK (or Create User) Button, it works, i.e. submits the answer with AJAX, but I also want it to work when pressed Enter key.
now, when I type asd in input#answer and press enter, it makes the URL like this:
mysite.com/?answer=asd
I tried adding the function:
$('#answer').keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
alert("enter pressed on answer input");
}
});
this time it alerts "enter pressed on answer input" and then converts the URL. Whereas, I don't want it to modify the URL, how can I delete that function? Where is it defined?
In short, I want the enter key to do only what I want it to do.
Thanks for any help !
Edit:
The buttons -that work on mouse click- are added in jQuery.dialog(); like this:
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
Answer: function() {
var answer = $("#dialog-form #answer").val();
alert("your answer : "+answer);
submit_with_ajax(answer);
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
alert("asd");
}
});
You can prevent the default action of an event with event.preventDefault(). I am not 100% sure how the form looks like in jQuery-ui and if preventing the default of the keypress works. As an alternative you can prevent the default action of the submit event which, as you would probably expect, prevents the form from being submitted (as per Gokul's answer). See mdn for more information on event.preventDefault().
$('#answer').keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
e.preventDefault();
}
});
-- or --
$('whatevertheuiformis').on( 'submit', function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
e.preventDefault();
}
});
As yours...
<form>
<!-- <form onsubmit="return false"> is an optional -->
<fieldset>
<label for="answer">
<strong>Your Answer : </strong>
</label>
<input type="text" name="answer" id="answer"
class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
//jQuery Version
$('form').submit(function(){
return false;
});
// javascript
document.getElementById('my-form').onsubmit = function() {
return false;
}
$('#answer').keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
e.preventDefault();
//alert("enter pressed on answer input");
submit_with_ajax(answer);
}
});
So Here the Form will not submit at all.. so that you can perform your AJAX submission or REQUEST....
Hope it helps...
DEMO
Try this,
Enter the value in input answer and click enter
$(document).ready(function () {
$(document).on('keypress',function(e)
{
if(e.which==13 && $("#answer").val().length>0)
{
alert("hi"); // do your ajax call here
}
});
});
Hope this helps
I'm loading a dialog from a div
<div id="dialog-message" title="Send Message" style="display: none;">
<form id ="form_message">
<textarea name="message_field" id="message_field" rows="8" cols="62" class="ui-widget-content ui-corner-all" style="resize: none;"></textarea>
</form>
creating the dialog inside the $(document).ready(function() and opening it using a link.
On submit of the dialog i change the content of the dialog with the return message, and the user can close the window.
// dialog create
$("#dialog-message").dialog({
autoOpen: false,
resizable: false, width: 520, height: 320,
modal: true,
buttons: {"Send": { text: "Send", id: "btn_send", click: function () {},
close: function() {if($('#form_message').length) {$(this).find('form')[0].reset();} }
});
//link to open dialog
$('#dialog_link').click(function(){$("#dialog-message").data("msg_data", {msg_from: 14, msg_to: 15}).dialog("open"); return false; });
//operations made on submit dialog
$('#btn_send').hide();
$('#dialog-message').html(data.error);
The problem i have is that once you open the dialog again, the return message remains, and it's not loading the original div content.
how can i achive this? i tried to destroy the dialog on the close event, but then the dialog doesn't reopen at all.
just save the message field's content before you change it....like this:
var message_field_html = "";
function openDialog(){ //or whatever function calls your dialog
if(message_field_html != ""){
$('#dialog-message').html(message_field_html);
}
//do things
}
function changeDilogText(){ //or whatever function changes the text
message_field_html = $('#dialog-message').html()
$('#dialog-message').html(data.error);
}
[edit] edited code to mach your question
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()
}