using window.open() has the effect of submitting form prematurely

Question

I have a web-form written in ASp.Net MVC5 which is used to gather some details from the user. However, before I get them to submit the form, I want them to have the option to look at another web-page (in a new window or tab) which gives them more information if they need it prior to submitting the page. To that end, on the web-form, I have a form with the following buttons:

<form action="/Application/MyAction" method="post" id="myForm">
    // various fields ...
    <button onclick="getMoreInfo()">More Information</button>
    <button type="button">Submit Form</button>
</form>

Then, at the bottom of the page I have the following javascript defined:

<script>
function getMoreInfo()
{
    var urlToUse = 'http://some-other-page.html';
    window.open(urlToUse);
    return false; // trying to stop the form submission from occurring
}
</script>

My problem is that when this "More Information" button is clicked, it has the effect of submitting the form [which I don't want to do yet] - since there is a separate submit button for doing that task. Is there a way to use a button to jump to another page without actually submitting the current form?

thanks heaps,

David.

It's not `window.open`, it's the clicked button. Add the `type="button"` to that button as well as the button below has it. — Teemu, Jul 12 '18 at 04:25
use `event.preventDefault();` as the first line of the function — Gezzasa, Jul 12 '18 at 04:59

score 0 · Answer 1 · answered Jul 12 '18 at 04:29

I found that answer #3 at this question helped me:

How do I cancel form submission in submit button onclick event?

My solution was to change the code thus:

I changed the button code to look like this:

<form action="/Application/MyAction" method="post" id="myForm">
    // various fields ...
    <button id="moreInformationButton" >More Information</button>
    <button type="button">Submit Form</button>
</form>

And then I changed the javascript to look like this:

$("#moreInformationButton").click(function (event) {
    event.preventDefault();  // This stops the submit form being triggered
    var urlToUse = 'http://some-other-page.html';
    window.open(urlToUse);  // open the help page
});

This allowed me to open up another window or tab with more information without actually submitting the form.

You could have just put the `event.preventDefault();` as the first line in your previous function. — Gezzasa, Jul 12 '18 at 04:59

using window.open() has the effect of submitting form prematurely

1 Answers1