How to manually popup required textfield alert with JS? - javascript

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.

Related

How to Clear Modal Box DropDown and Text Box

How can I clear Modal Box after Submission of data Modal Box closes automatically but when we again open Modal Box it shows Previous submitted data.
I am Using Bootstrap Modal Box and C# Asp.net web forms.
You can reset the content at the time of modal hide.
For more detail follow this How to reset the bootstrap modal when it gets closed and open it fresh again?
You have to clear all the field before closing or opening the Model box.
https://getbootstrap.com/javascript/#modals shows an event for when a modal is hidden. Just tap into that:
Take a look on script to clear the input field or you have to do it from backends.

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

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.

example on how to make an js confirmation popup with values from the form?

I'm using codeigniter.
if I click on submit button on a form, a popup confirmation will appear.
The quantity or any thing that I put on the form must appear on the popup before I confirm or purchase it.
You can't do it with default javascript popup. I suggest you use jquery ui dialog.

Categories