We Keep Coding

How to block the popups alert on beforeUnload while using custom alert popup?

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.

Detect when html input required true is working

I have a form
<form id="newRecord">
<input type="text" required/>
</form>
<button form="newRecord" type="submit">Submit</button>
http://codepen.io/anon/pen/EZwRjK
When the field is empty, and you click the button, you get a "Please fill out this field." pop up next to the field. Is there a way to detect if that pop up appears with JavaScript?

In HTML5, the pseudo-class :invalid is applied to any input that triggers the "This field is required" dialog box.
If you put the listener on your button, you could find out if the dialog box appeared or not by checking to see if there were any inputs marked :invalid...
$("#newRecord input[type=submit]").click(function() {
if ($("#newRecord input:invalid").length) {
//The popup appeared
} else {
//The popup did not appear
}
});
JSFiddle demo

In fact you can. You can use checkValidity() method. It returns true if the element contains a valid data.
$(function() {
$("#submit-button").click(function () {
// using jquery
console.log($("#input-text")[0].checkValidity());
// using javascript
var input = document.getElementById("input-text");
console.log(input.checkValidity());
});
});
Fiddle
Update
Seems the pop up is not showing when using type="button".
A work around I found is to use $("input").on("blur", function () { instead.
So it should be now:
$(function() {
$("input").on("blur", function () {
console.log($("#input-text")[0].checkValidity());
var input = document.getElementById("input-text");
console.log(input.checkValidity());
// checking as a whole
console.log("Form - ", $("#newRecord")[0].checkValidity());
});
});
Fiddle

REACT / NEXT.JS
In my case, it was because the 'input' tags were required and were not in the viewport (not visible) when submitting on my form.
The form was hidden when a useState was false const [isOpen, setIsOpen] = useState(false), then it was necessary to change the state to true so that the form would appear and the "fill these fields" message.
Solution was with onInvalid() property
<input onInvalid={() => setIsOpen(true)} type='radio' required />

How can we check which button is clicked in a jQuery UI dialog box?

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;
}
});

JQuery UI dialog reload original content

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

jquery modal dialog before form submit

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()
}