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

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

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

Answer 1

你可以有兩個按鈕單擊事件處理程序，並同時附上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', ''); 
}); 
​ 

我還沒有在所有瀏覽器測試了這個，所以你可能想這樣做。