clear form when modal close button was clicked - javascript

i was trying to reset my form when a close button was clicked.
this is my script.
$('.modal').on('hidden.bs.modal', function () {
console.log($(this).find('#form6')[0].reset());
})
when i console this it returns undefined. but when i remove [0].reset() the console returns a length:1, 0:form#form6, prevObject:r.fn.init[div#modalForm.modal.fade] but when i use
$('#form6')[0].reset() on form submit it works.. dont know why it doesn't work on button close..
i have a modal form which when i click a function is called that will append a certain data to my select tag. but when i close the modal and reopen it the data that was prev called stayed on my select tag then the function again was called so what happen was the data from my select tag duplicates.
so i was trying to reset the form when my modal was close.

Related

Radio Button client click event used to show or hide modal popup not setting the modal property correctly

I have 2 radio buttons on an ASP.NET WebForm page. I have a modal popup that is to be shown only when going from one of the radio buttons to the other, but not the other way. In other words, here are my choices:
if radio button 1 is clicked then the modal popup is shown.
If radio button 1 is currently selected and radio button 2 is clicked then the modal popup should NOT be shown.
I have a javascript function that toggles the show and hide but I briefly see the popup when #2 logic is performed. Here is the js function:
$(function () {
$('#<%=RadioButtonListServiceLevel.ClientID%>').click(function () {
var CustomerCountry = $('#<%=HiddenFieldCustomerCountry.ClientID%>').val();
var ServiceLevelSelected = $("#<%=RadioButtonListServiceLevel.ClientID%> input:checked").val();
if ((CustomerCountry != "US" && CustomerCountry != "CA") && ServiceLevelSelected == "24") {
$('#InternationalServiceLevelModal').modal('show');
} else {
$('#InternationalServiceLevelModal').modal('hide');
}
});
});
Any idea why the popup modal dialog would briefly show when the action described in #2 is performed?
Thanks
I was just playing around a bit using an 'alert' and when I used the 'click' event, like you have, the alert fired twice: as soon as i clicked - before the button visibly changed value, then again after the button visibly changed value.
I changed 'click' to 'change' and the alert only fired once. Could be the fix?
// changed 'click' to 'change'
$('#<%=RadioButtonListServiceLevel.ClientID%>').change(function () {

How do I call a JS function before any page redirect request?

I have a wordpress gravityform. I want that when user has changes anything in any input field and after that clicks on any page redirection there should be a popup to first save your data. Here is my code. I have written the following function which will trigger the save button of the form if user click the ok button on the alert. But where should I call this function. If I call this in .bind(beforeunload), it is ignored and before unload display its own text in the popup. I also cannot call this function on every input change because it will not allow user to complete entering data in the form. What can be the appropriate solution ?
function confirmLeave() {
if(!confirm("Would you like to save your data before redirecting?")) return;
$( "#gform_submit_button_52" ).trigger( "click" );
}
I have tried this
call-js-function-before-redirect
how-do-i-ensure-server-request-is-complete-before-page-redirect

How to use modal box from different view page to work inside on click function

$(".event_over_time").click(function()
{
//i want the modal box to be opening up on this click function here
});
the modal box opens up on click in a different page in my site i want the same modal box to open up for the click function on a different page in my website basically a shortcut to the view modal box through the click function
First you have to make sure your modal HTML code is in the footer so that it's loaded on all pages of your website. Next you have to give the modal an id so that we can use that in the click function (I used #modal in the example).
Since you're using jQuery you can use the function .fadeIn to transition the modal from display: none; to display: block;
The function will look something like this:
$('.event_over_time').on('click', function(e) {
// Prevent default is used so you can also give the ID to a anchor tag without it executing the href
e.preventDefault();
// Here we use the jQuery .fadeIn function to show the modal.
$('#modal').fadeIn(200);
});
if you want to make a function to close the modal you can do something like the code below and make sure there is a close button in the modal with the ID of #closeModal.
$('#closeModal').on('click', function(e) {
// Prevent default is used so you can also give the ID to a anchor tag without it executing the href
e.preventDefault();
// Here we use the jQuery .fadeOut function to hide the modal again.
$('#modal').fadeOut(200);
});

Hitting button outside a form to call submit on Submit button in a form

Lets say I have a form with hidden submit button, and I input values in it, then I hit one button and dialog appears with Confirmation message and Confirm button. When I click on Confirm button, I click also on a hidden submit button from a form. Is that possible and how can I achieve it in JQuery?
In your jQuery use code like this:
$("#confirmationButton").on("click" , function () {
$("#submitButton").trigger("click");
});
or
$("#confirmationButton").on("click" , function () {
$("#form").submit();
});
Rememer that you have to set ids to your form and/or formSubmitButton.

How to restore checkbox state

I have one buton on my jsp and clicking that button user will see jquery dialog box as popup,which is having several checkboxes.
That popup will also have two button save and cancel.
I would like to restore state of checkbox.for better understading please follow below steps
user clicks on showpop button on the jsp page
user will now see jquery popup having several checkbox
user checks first and second checkbox from the popup and click on save button that result in closing popup
user again click on show popup button ,uncheck first check box and click on cancel button that also result in closing popup
and now from main jsp if user again clicks on show popup buton i would like to see two checkbox checked but its showing one checkbox checked.
any help would be much appreciated
you can use a variable to store the indices of the checked boxes on the page such as:
var checkedIndices = [];
when you click save or cancel, you can run some code similar to this:
function SaveBoxes() {
checkedIndices = [];
$("input[type=checkbox]").each(function(index, checkbox) {
if ($(checkbox).is(":checked"))
checkedIndices.push($(checkbox).index());
});
}
function CancelBoxes() {
$("input[type=checkbox]").removeAttr("checked");
for (i = 0; i < checkedIndices.length; i++)
$("input[type=checkbox]:eq(" + checkedIndices[i] + ")").attr("checked", "checked");
}

Categories

Resources