Question

是否可以在单个表单上有两个提交按钮，其中一个启动提交，但也将参数传递给URL？也许使用js / jquery拦截动作并以某种方式附加参数。即，

<form action="/doStuff" method="post">
    <input id="name" type="text"></input>
    <button id="save" type="submit">Save</button>
    <button id="save-with-param" type="submit">Save as Draft</button>
</form>

点击保存会发送：

localhost:8080/myApp/doStuff

点击save-with-param即会发送：

localhost:8080/myApp/doStuff?param=XYZ

Answer 1

在所有现代浏览器中，您都可以使用formaction属性：

<form action="/doStuff" method="post">
    <input id="name" type="text"></input>
    <button id="save" type="submit">Save</button>
    <button id="save-with-param" type="submit" formaction="/doStuff?param=XYZ">Save as Draft</button>
</form>

要支持旧浏览器，例如IE9＆lt;，您可以使用以下方式添加支持：

;(function ($) {
    $(function () {
        if (typeof document.createElement('input').formAction === "undefined") {
            $(':submit[formaction]').closest('form').data('defaultFormAction', this.action).on('submit', function () {
                var $focused = $(':focus');
                $(this).attr('action', $focused.is('[formaction]') ? $focused.attr('formAction') : $(this).data('defaultFormAction'));
            });
        }
    });
}(jQuery));

Answer 2

如果你想用jQuery做到这一点：

 <h2 class="title_bar">
<ul>
					
	<li><span onclick = "clicked_about(1)">About</span></li>
	<li><span onclick="clicked_resume(1)">Resume</span></li>
</ul>
					
</h2> 

	
<div id="intro_page" class="unseen">
	<p id="intro_main_text"> I enjoy reading, swimming, jogging, painting and exploring. </p>
	<figure class="intro_pic1">
	    <img src="img/award.jpg" alt="Receiving Award" height="50" />
	    <figcaption>Award 2015</figcaption>
	</figure>
</div>

<div id="resume_page" class="unseen">
	<p>My resume</p>
</div>

单个表单上的两个提交按钮

2 个答案: