ASP3 onclick Submit open a modal window - javascript

Can I know what is the best solution for my question. I got a data entry page with multiple input textbox inside a form on the main page. After enter and click the submit button, I want it to open the result page in a modal popup window.
Two different asp files.
1) Main.asp (Input)
2) Result.asp (get Input from Main to generate the result)
The main.asp is for data entry while the result.asp will retrieves the parameter pass by the main page for further processing and generate the result. The result.asp need to have a button to close the popup window and reset the main.asp textbox.

You can't POST a form directly into a modal window. Alternatively, you could:
Intercept the JavaScript form.onsubmit event
Manually build the querystring
Open the modal with the informed parameters and,
When the user closes it, clear the required fields on the main page.

Related

How to trigger refresh on a page from another page (no redirect)?

So, what I have is a lot of pages like this, with GET parameters: benchmark.php?game_id=87
that display the information about the particular game (info is in a database) and also contains an Edit button.
The Edit button opens a new window using JS window.open("edit_game.php?game_id=87",...)
The Edit window contains a few textboxes to add/modify data and a Save button.
The desired behaviour here is that when I press the Save button on the edit_game.php page, not only that the information is saved in the DB (this works) but also the benchmark.php?game_id=87 page is maybe refreshed so that the information displayed is actual. I don't know how to do the 'submit on page x, page y is aware and refreshes'.
I assume I should use AJAX for this but I don't know where to start. What I tried is something like this
setInterval( function(){
$('#refresh_station').load('game_information.php');
}, 2000);
that every 2 seconds it refreshes the information present in benchmark.php?game_id=87 but I find this very inefficient since it refreshes the info even if no modifications happened.
Is this the only way to approach this situation?
Edit: I should mention that edit_game.php?game_id=87 is not supposed to close or anything after pressing Save. So I can't just use the submit form to redirect back to benchmark.php.
Yes you should use Ajax for it also add one field in Database table last_update, now when page edit_game.php?game_id=87 load it have last_update time, ajax check this last update on some interval time if ajax see there is any update page should be refreshed.
Running a loop that checks every few seconds whether the records have changed isn't the best solution in my opinion. There's a much easier way to trigger a page refresh when you submit a form in a popup window.
Using window.opener you can perform actions on the window that opened the popup that you're currently in. In your case:
<form onsubmit="window.opener.location.reload();">
Your form here.
<input type="submit" value="Save changes">
</form>
Or in jQuery:
$('form').submit(function() {
window.opener.location.reload();
});
https://jsfiddle.net/yqv1eh8w/1/
postMessage
can communicate with the child window. Link
window.addEventListener("message", function (event) {});
will let you listen to it from a child window.
This should be help you with what you want.
The entire thing communicates with the help of events and messages.
Also, you will need to run this locally (coz I opened popups to the same window)
IMO, the best approach is to use a popup form. If your web page is already using Bootstrap, you can add a modal popup easily with the edit form as it's content. When clicking on the edit button, instead of opening a new window, you can open this popup.
Then submit this form with ajax on click of the submit button and inside the Ajax success function, add javascript/jQuery to close the modal and refresh the page content.

HTML Button closing Bootstrap Modal

I have a simple form inside a Bootstrap modal popup. The form was working fine until I needed to add a button to perform a simple calculation based on some values entered into the form.
The button just has a jQuery click event which grabs the values from the form elements, does the calculation the writes that value into a text box. When the form is not in the modal, it works just fine. Zero errors. When the form is in the modal clicking the button closes the modal and I cannot see why.
I have stripped back the button to bare bones and even removed the jquery code in the click event handler.. it still closes the modal. I have removed the form action event (points to a .php script), but the modal still closes.
When it closes I see that the browser address bar is filled with the URL for the page with all the form values as params as the field were populated when I clicked the button.
Can anyone tell me how I can get this button to just be a trivial button I can use for this purpose and NOT close the modal?
I have removed the form action event (points to a .php script), but the modal still closes.
Removing the action attribute just sets the action to the URL of the current page. It doesn't prevent the form from being submitted.
Can anyone tell me how I can get this button to just be a trivial button I can use for this purpose and NOT close the modal?
The crappy quick way
<button type="button"> will make the button a JavaScript only button and not a submit button
The proper way
In your event handler function, capture the event object and call its preventDefault() method.
Make sure that on those occasions when the JS fails, the server does the right thing and provides a sensible response for the form submission.
The probelm is very likely that the button submits the form. Try specifying <button type="button"> or add a evt.preventDefault() in the click handler.

Browser displays / executes alert for form field

I have got a cross site scripting issue.
I have a child modal dialog with textarea field and Save button. Now if the user enters alert("1") tag for this field and clicks on Save, I close the modal dialog and display this in the background modal div (i.e. on parent modal)
This actually happens through triggering an event via Backbone and I paste the response (which is nothing but what the user had entered in the field)
$("#myFieldDiv").html(resp);
Now the browser is showing popup with value 1. How can I fix this ?
My field need to accept HTML.
You could try using encodeURIComponent() to encode the input from the user.
$("#myFieldDiv").html(encodeURIComponent(resp));

Post Back a Disabled form inside IFrame from Parent Page

I have a page that contains a check box collection, an associated label on the left side, and an Iframe division on the right side.
When the check box division (including label) is clicked, the corresponding page is loaded in Iframe. Also, when clicking on another text check box didvision the page values in the current page should be saved and new page should be loaded in IFrame.
I accomplish this by calling the Javascript function of the Iframe page from parent page which, in turn, does a postback and triggers the save loic inide the event (For eg: I have a button inside each page which is hidden but has an event).
My problem is that when the check box is unchecked, the form displayed on the IFrame is cleared and disabled. So, when I click on some other division the postback of the current disabled form is executed and, since the entire form is disabled, there is no postbacking happening.
How could I trigger Postback for the disabled form or save the data another way?
Note: I even tried enabling the page before calling postback, but it still isn't triggering.
I would try to replace your iframes structure with dynamic sections controlled by Ajax. If this isn't feasible, rethink your disabling of the form. If the reason you're doing this is to prevent posting values twice, maybe instead of disabling the form, hide the button instead.

check for unsaved form before moving to another form

I am using Asp.net Javascript and C#
I have a content page, and left side has links in the master page.The content page has data entry form. If user leaves the page without submitting the form and click the cancel button. user should be prompt to save the changes made. I know i can use window.onbeforeleave and can show the confirm message.
Below is the issue.
The control moves to executing the code behind page of the clicked link.Reason is on clicking the link, a javascript function is being called. this function has below code.
window.location.href = 'anotherpage.aspx'
The confirm message appears later.
My query is, Is there any way to show the confirm message first.
I cannot write the confirmation message code in java script function as there are so many other links in left menu and same situation can arrise to prompt the user for confirmation message and logic is different in all pages to check the unsaved forms.
Suggestions?
I suggest you use jQuery for a 'dirty check' . And there are 2 ways to implement it.
Based on jQuery data feature : http://www.mydogboris.com/2009/10/using-jquery-data-feature-to-detect-form-changes/
a jQuery plugin for dirty check : http://www.novogeek.com/post/2010/01/31/Check-for-unsaved-data-on-your-web-forms-using-jQuery.aspx

Categories