一種形式取決於兩種按鈕的動作？

Question

我有兩個文件， preview.php和save.php

<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="clear"></div>

    <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" onclick="return false;"></div></li>
            <li><input type="submit" class="button" value="Create template"></li>
        </ul>
    </div>
</form>

當前的JS：

$("#preview").click(function() {
    $.post('preview.php', {body:$('#t-html').val().replace(/\n/g,'<br />'), function (result) {
        //maybe use .ajax instead? 
        //open preview.php in new window
    });
});

我如何使用相同的表格，但是根據一個人按下的按鈕有兩個不同的動作？

Preview template => preview.php => opens to a new tab

posts on same page Create template => save.php => posts on same page

Answer 1

您可以為按鈕同時具有click事件處理程序，並且可以同時附加ajax調用。

您可以使用javascript在新標簽頁中打開窗口。

window.open(<url>)

Answer 2

嘗試根據單擊的按鈕設置表單的“目標”屬性。

將您的窗體更改為以下內容：

<form id="create-template" class="form" action="" method="post" target="_blank">
    <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="clear"></div>

    <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><input id="preview-form" type="submit" class="button" value="Preview template" /></li>
            <li><input type="submit" id="submit-form" class="button" value="Create template" /></li>
        </ul>
    </div>
</form>​

並添加以下JavaScript：

$('#preview-form').click(function(ev) {
    $('#create-template').attr('action', 'preview.php');    
    $('#create-template').attr('target', '_blank');
});

$('#submit-form').click(function(ev) {
    $('#create-template').attr('action', 'submit.php');
    $('#create-template').attr('target', '');
});
​

我尚未在所有瀏覽器上都對此進行過測試，因此您可能需要這樣做。