Browser displays / executes alert for form field - javascript

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

Related

How to manually popup required textfield alert with JS?

Do anyone know how to trigger this popup using JS?
I know by default it triggered by clicking submit type button when the text field is inside area.
I have my own Boostrap modal alert popup when I click submit button without filling up required text field. So once the modal alert is being dismissed, I want that default JS alert trigger after that.
What you're asking about is HTML5 Constraint Validation.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation
For your specific example, you can use the required attribute.

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.

disable key input when alert window is active

I'm having an issue where users are just hitting enter multiple times when an alert box gets displayed so the 'ok' of the alert box is pressed with the enter key and they miss the message. Is there a quick way to disable key presses on alert windows and just allow for mouse input?
Replace the alert box with your own modal implementation, because it prevents users from accessing your code until it's closed. Source
Dialog boxes are modal windows - they prevent the user from accessing
the rest of the program's interface until the dialog box is closed.
For this reason, you should not overuse any function that creates a
dialog box (or modal window).
No, because it is a Web Browser API, it's behaviour is implemented on the Browser.
You can display the message as a modal, and disable it's button.
Try this Jquery Plugin

ASP3 onclick Submit open a modal window

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.

stop page from loading after dialog box opens

What I'm trying to do is have a contact form, and when the user hits submit a dialog box appears asking the user to confirm yes/no, and the form should not submit until the user has selected yes, or stays on the page when selects no.
What my issue is, once the dialog box opens, the form still submits, and the dialog box is open for only a second or so.
So is it possible to stop the page from loading until after the dialog box is closed or yes is clicked?
I'm using the jQuery Impromptu plugin for the dialog box.
Don't use type="submit", just use type="button". Submit the form from your own code based on the dialog result.
I'm not familiar with the impromptu library; however, I believe that this can be done by stopping the onClick event from submitting and submitting via the callback in your go_there() method. I would try replacing the onClick method with "go_there(); return false;". This should cancel the normal submit event. Then you could add a submit statement (document.email.submit();) in the true condition of your callback before you reset the location.

Categories