stop page from loading after dialog box opens - javascript

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.

Related

Is there a way to show another form on a button click than continue with default action only after the user clicks "Yes" using JS only

I have to do following:
When the user clicks a button show a modal which has another form
In the new modal form ask a question to the user.
If the user clicks yes, continue with the default action for the
previous form.
If the user clicks no, stop the default action for the previous form.
This should work for both "button" and "submit" types of buttons.
I am not allowed to edit/change the HTML on the page. All of the
above must be done using JavaScript only.
Is it possible to do something like this? If so, what technologies/keyword should i search for it? I spent 3+ hours on google and I still have no idea.
I could manage to stop the "button" form working. On the other hand, the "submit" ones keep working no matter what I tried.
You could hide the modal on pressing 'yes' with
document.getElementById("modal").style.display="none";
And when pressing 'no' you could redirect the user to a url inside of your website
window.location.replace("https://domain.test");
If you want to prevent the default action for a submit button you could try
document.getElementById("submitbutton").preventDefault();

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.

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

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