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.
Related
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();
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.
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));
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.
For reasons I won't go into we need to click a submit button (as opposed to a plain button) via Javascript.
We do this by getting a handle to the submit button, then executing the .click() method on this button. This works perfectly in FireFox, but in IE6 it only works partially.
The button receives the click, and code associated with the buttons "onClick" event fires (we can observe this by watching the server-side code in the debugger) however, the page never "refreshes" the way it should when clicking a "submit" button.
Since this works in FireFox, we assume it is yet another IE6 bug, but I'm not having any luck finding a work-around. We can't simply refresh the page directly because we need it drawn as though it were drawn from the submit button POST request.
Wouldn't it be easier to get a reference to the form element and fire the submit event?
var form = document.forms[0];
form.submit();
I have the same issue in ASP.net. We must "click" the button because there is more that happens in ASP.net with a form than just the normal .submit() on the form. It has to know which button you clicked so it can match it up to the Click event on the server-side for that button.
Try using setTimeout to delay the click by 1 millisecond.