Javascript 一个表单两个动作取决于哪个按钮?
我有两个文件,Javascript 一个表单两个动作取决于哪个按钮?,javascript,jquery,forms,Javascript,Jquery,Forms,我有两个文件,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"/&g
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>
模板名称
模板HTML
当前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
});
});
$(“#预览”)。单击(函数(){
$.post('preview.php',{body:$('#t-html').val().replace(/\n/g,“
”),函数(结果){
//也许用.ajax代替?
//在新窗口中打开preview.php
});
});
如何使用相同的表单,但根据按下的按钮有两个不同的操作
预览模板
=>预览.php
=>打开一个新选项卡
Create template
=>save.php
=>在同一页面上发布
您可以为按钮和彼此同时附加ajax调用提供一个单击事件处理程序
您可以使用javascript在新选项卡中打开窗口
window.open(<url>)
window.open()
尝试根据单击的按钮设置表单的“target”属性
将您的表单更改为以下内容:
<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>
我还没有在所有浏览器上测试过这个,所以您可能希望这样做
$('#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', '');
});