English 中文(简体)
用多分机-Buttons的超文本格式发布“回归”
原标题:Pressing "Return" in a HTML-Form with multiple Submit-Buttons

让我们想象一下与两个提交国的超文本格式。 其中一人处于形式上下半的位置,其重要性也较小。 另一吨是实际提交的纽吨,可节省已输入的数据。 该纽扣在表格末尾。 这两个县将引发不同的行动。

有经验的用户希望通过紧急“进入”或“返回”的方式提交表格,而不是按纽伦点击。

不幸的是,浏览器将寻找目前形式的第一个提交文件,并利用这一文件执行提交表格。 由于以我的形式,第二顿是实际提交的,即需要告诉浏览器使用这一特定纽扣吨(或与其相关的行动名称)。

i 不要把 j语听众联系起来,他们正在寻找关键的新闻或像这样的东西。 这样一来,寻求以更好的办法解决这一问题。 然而,欢迎 j或草药解决办法(没有关键标语者)。

非常感谢您事先提供的帮助。

最佳回答

从理论上来说,你至少可以有三种<条码>,即以你的形式提交

Button 2 是现有的不太进口的纽顿(从形式上半向下),但纽特3是现有实际提交的纽特。

Button, one should beidden (using CSS display:none or visibility:idden), and should exercise really the same function as You current-submit. 我认为,这仍是浏览器所发现的第一顿,不管其可见度如何。

<form method="post" method="whatever.php" enctype="form/multipart">

<fieldset id="first">

<label>...<input />
<label>...<input />
<label>...<input />

<input type="submit" value="submit" style="visibility: hidden;" <!-- or "display: none" --> />
<input class="less_important" type="submit" value="submit" />

</fieldset>

<fieldset id="second">

<label>...<input />
<label>...<input />
<label>...<input />

<input type="submit" value="submit" class="actual_submit" />

</fieldset>

</form>

www.un.org/Depts/DGACM/index_spanish.htm 摘自评论:

我认为隐藏的纽子也因违约而残疾? [md5sum]

一个有效的观点是,在张贴之前,我只把测试错误(3.5.7, 乌班图9.10)放在了上面,其中两种技术都奏效。 完整的xhtml档案是继这些评论之后作为我测试基础的(下文)。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>3button form</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
        <script type="text/javascript" src="js/jquery.js"></script>


        <script type="text/javascript">

$(document).ready(

    function() {
        
        $( input[type="submit"] ).click(
            function(e){
                alert("button " + $(this).attr("name"));
            }
        );

    }
);
        </script>


</head>

<body>

<form method="post" method="whatever.php" enctype="form/multipart">

<fieldset id="first">

<label>...<input />
<label>...<input />
<label>...<input />

<input name="one" type="submit" value="submit" style="display:none;" /><!-- or "display: none" --> 
<input name="two" class="less_important" type="submit" value="submit" />

</fieldset>

<fieldset id="second">

<label>...<input />
<label>...<input />
<label>...<input />

<input name="three" type="submit" value="submit" class="actual_submit" />

</fieldset>

</form>


</body>

</html>

<代码> 显示:无应防止纽芬兰成为形式的一个积极部分(列入结果组,有资格成为违约国);<代码> 可视性:<>隐蔽/代码>不应。 然而,这两个案件都受到一些浏览者错。 唯一提交纽芬兰语的通常方式是<代码>:绝对;,将其移出网页(例如左边:4,000px)。 这显然但可靠。 它对改变其表格索引也是一种好的想法,这样它不会干扰预期表格的制表。

我至少要提出两点意见。 为了:

  1. "The normal way..." I was unaware that there was a normal way, and presented this option as a possibility to achieve an aim, in the full knowledge that there were/are almost certainly any number of better ways, particularly given that I don t see a good reason for multiple submit buttons on the same form.
  2. Given the latter sentence of the above point, I d like to make it clear that I don t advocate doing this. At all. It feels like an ugly, and non-semantic, hack to have more than one submit button, with -in the OP s instance- one button apparently not being a submit button.
  3. The notion of `position: absolute; left: -4000px;` had occurred to me, but it seemed to effect much the same as `visibility: hidden;`, and I have an innate dislike of `position: absolute;` for whatever reason...so I went with the option that was less objectionable to me at the time of writing... =)

我赞赏你对表格索引的评论,但这是我从未想过的东西。

如果我稍感ni,那么我会 late,时间迟,我会tir......yadda-yadda; 自我回家以来,我一直在各种浏览器中测试过。 看来,“3.5+”显示同样的行为,即“视窗XP”和“Utugo”9.10,所有网络浏览器(Midori、Peophany、Safat和Shatton 2)都失败。

因此,对<代码>显示:无;提交纽州肯定是一个不值得重视的想法。 而<代码>可见性:hidden则至少可行。


  1. 我指的是,点击进入触发了形式提交活动,或引发首份提交纽扣表的点击事件,而不论第一次提交文件是“显示:无;”还是“可见:隐藏”。

    请注意,我的 j格技巧有限,因此所使用的测试(我只是在时候才尝试和预防执行过程中发生的冲突,评论当时我手提的那 t,这两种说法都是介绍的――一个,明确说是评论的)可能不够充分,不具代表性。

问题回答

将您的第一吨改为<input category=“button”/>

第一个纽顿做了什么? 如果你只需要一个顿子,把一个 j的听众放在一边,而后者却不提交,则使用

<button type="button" id="myButton">Text Here</button>

是否可选择绝对定位于你不太重要的纽芬兰语,是否出现在你最初提交纽芬兰语时? 因此,你可以:

<form>
<p>
Stuff
<input type="submit" value="This is my main submit button" />
<input type="submit" value="This is my secondary submit button" style="position: absolute; left: 0px; top: 0px; />
</p>
</form>

你的二次提交纽芬兰将首先出现在屏幕上,但初级提交纽伦在报到时应当优先。

<script>
$(function(){
    $( #button-new-captcha ).click(function(){
        $( input[name=button-submit] ).prop( name ,  button-new-captcha ).click();
    });
});
</script>

<div class="buttons">
    <a class="btn btn-cancel" href="/login">Cancel</a> 
    <a class="btn btn-default" href="#" id="button-new-captcha">New Image</a> 
    <input type="submit" name="button-submit" class="btn btn-default" value="Send Username">    
</div>

另一项工作是,在形式一开始便提出非功能的意见,并以不透明方式隐藏:

<input type="submit" value="" onclick="return false;" style="opacity: 0">

纽伦仍然放在该页上,尽管是透明的,但你必须为它提供一些房地产。 或者,你可以按照其他人以前在这里提出的建议,将它推向另一个要素,使用z-index,或将其放在网页外。

您在<代码>onclick=“return false”;上获得的是,在打上“Enter”号时,不会提交表格;也没有上页。





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签