Conflicting buttons with jquery .click

Question

HTML

<form id="create-template" class="form" action="" method="post">
    <p class="_50">
        <label for="t-name">Template name</label>
        <input type="text" name="t-name" class="required"/>
    </p>
    <p class="_100">
        <label for="t-html">Template HTML</label>
        <textarea id="t-html" name="t-html" class="required" rows="10" cols="40"></textarea>
    </p>
    <div class="block-actions">
        <ul class="actions-left">
            <li><a class="button red" id="reset-template" href="javascript:void(0);">Clear</a></li>
        </ul>
        <ul class="actions-right">
            <li><div id="preview"><input type="submit" class="button" value="Preview template"></div></li>
            <li><input type="submit" class="button" value="Create template"></li>
        </ul>
    </div>
</form>

JavaScript:

$("#preview").click(function() {
        $('#create-template').submit(function() {
            window.open('', 'formpopup', 'width=400,height=400,resizeable,scrollbars');
            this.target = 'formpopup';
        });
    });

When pressing Preview template it opens a popup window and will display a preview of the template. This is correct.

After previewing the template, when pressing Create template the page submits to the pop up. This is incorrect.

This problem only happens when previewing the template. Create template submits the form on the same page unless you preview the template.

How can I keep the preview template from conflicting with create template ?

Answer 1

This line is telling the form to submit to the popup window:

this.target = 'formpopup';

Change it to:

this.target = window.opener;

You'll probably want to close the popup after submitting. To do that, add this line:

formpopup.close();