表单提交按钮值[关闭](Form submit button value [closed])
<form action="mail.php" method="post" id="myform" name="myform" onsubmit="javascript:return validForm(document.myform)"> <input type="submit" class=" " name='btnanother' id='btnanother' value='asdf'> <input type="text" class="txtinput" name="fname" id="fname" value="First & Last Name" onblur="if(this.value==''){this.value='First & Last Name'}" onfocus="if(this.value=='First & Last Name'){this.value=''}"> <input type="text" class="txtinput" name="phone" id="phone" value="Phone" onblur="if(this.value==''){this.value='Phone'}" onfocus="if(this.value=='Phone'){this.value=''}"> <input type="text" class="txtinput" name="email" id="email" value="Email Address" onblur="if(this.value==''){this.value='Email Address'}" onfocus="if(this.value=='Email Address'){this.value=''}"> <input type="text" class="txtinput" name="location" id="location" value="Location" onblur="if(this.value==''){this.value='Location'}" onfocus="if(this.value=='Location'){this.value=''}"> <input type="text" class="txtinput" name="sqrfoot" id="sqrfoot" value="Square Foot of Basement" onblur="if(this.value==''){this.value='Square Foot of Basement'}" onfocus="if(this.value=='Square Foot of Basement'){this.value=''}"> <textarea name="describe" class="txtarea" id="describe" onblur="if(this.value==''){this.value='Describe your basement project'}" onfocus="if(this.value=='Describe your basement project'){this.value=''}">Describe your basement project</textarea> <div class="banner_captcha"> <div class="banner_captcha_img"> <img src="captcha_code_file.php?rand=<?php echo rand(); ?>" id='captchaimg'> </div> <div class="banner_captcha_txt"> <label for='message'>Enter the code here :</label> <br> <input id="letters_code" name="letters_code" type="text" value=""> </div> </div> <br> <small>Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh</small> <div class="align-center"> <input type="submit" class=" " name='btnanother' value='submit' style="text-indent:0px;" /> <input type="submit" class=" " name='asfdas' value="asdfasdf" style="text-indent:0px;" /> <input type="submit" class="submit" name='btnSubmit' value="asdf" style="text-indent:0px;" /> </div>在mail.php上没有获取提交按钮值。
如果我禁用了javascript，那么我将获得所有提交按钮值
<form action="mail.php" method="post" id="myform" name="myform" onsubmit="javascript:return validForm(document.myform)"> <input type="submit" class=" " name='btnanother' id='btnanother' value='asdf'> <input type="text" class="txtinput" name="fname" id="fname" value="First & Last Name" onblur="if(this.value==''){this.value='First & Last Name'}" onfocus="if(this.value=='First & Last Name'){this.value=''}"> <input type="text" class="txtinput" name="phone" id="phone" value="Phone" onblur="if(this.value==''){this.value='Phone'}" onfocus="if(this.value=='Phone'){this.value=''}"> <input type="text" class="txtinput" name="email" id="email" value="Email Address" onblur="if(this.value==''){this.value='Email Address'}" onfocus="if(this.value=='Email Address'){this.value=''}"> <input type="text" class="txtinput" name="location" id="location" value="Location" onblur="if(this.value==''){this.value='Location'}" onfocus="if(this.value=='Location'){this.value=''}"> <input type="text" class="txtinput" name="sqrfoot" id="sqrfoot" value="Square Foot of Basement" onblur="if(this.value==''){this.value='Square Foot of Basement'}" onfocus="if(this.value=='Square Foot of Basement'){this.value=''}"> <textarea name="describe" class="txtarea" id="describe" onblur="if(this.value==''){this.value='Describe your basement project'}" onfocus="if(this.value=='Describe your basement project'){this.value=''}">Describe your basement project</textarea> <div class="banner_captcha"> <div class="banner_captcha_img"> <img src="captcha_code_file.php?rand=<?php echo rand(); ?>" id='captchaimg'> </div> <div class="banner_captcha_txt"> <label for='message'>Enter the code here :</label> <br> <input id="letters_code" name="letters_code" type="text" value=""> </div> </div> <br> <small>Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh</small> <div class="align-center"> <input type="submit" class=" " name='btnanother' value='submit' style="text-indent:0px;" /> <input type="submit" class=" " name='asfdas' value="asdfasdf" style="text-indent:0px;" /> <input type="submit" class="submit" name='btnSubmit' value="asdf" style="text-indent:0px;" /> </div>on mail.php not getting submit button value.
if i disabled javascript then i get all submit button value
原文：https://stackoverflow.com/questions/29123989
更新时间：2023-05-01 17:05
最满意答案
这是Sass
@extend的实际行为和用例。说明
为了清楚起见，请更新您的代码，如下所示
%red-color{ color: red } @mixin btn-structure ($text-case: null, $text-shadow: null, $decoration: none ){ display: inline-block; text: { decoration: $decoration; transform: $text-case; shadow: $text-shadow } } .link-btn{ @extend %red-color; @include btn-structure($text-case: 'uppercase', $decoration: underline); } .test-class{ @extend %red-color; @include btn-structure($text-case: 'uppercase', $decoration: underline); }这会编译为，
.link-btn, .test-class { color: red; } .link-btn { display: inline-block; text-decoration: underline; text-transform: "uppercase"; } .test-class { display: inline-block; text-decoration: underline; text-transform: "uppercase"; }正如你所看到的，
@extend用于“将一组CSS属性从一个选择器共享到另一个选择器”，可以将它们一起棍棒（.link-btn, .test-class）。 而@include用于插入任何需要的样式，而不是杵状。解
根据您的要求，您可以使用
@include并声明如下所示的mixin@mixin red-color，%red-color{ color: red } @mixin red-color{ color: red } @mixin btn-structure ($text-case: null, $text-shadow: null, $decoration: none ){ display: inline-block; text: { decoration: $decoration; transform: $text-case; shadow: $text-shadow } } .link-btn{ @include red-color; @include btn-structure($text-case: 'uppercase', $decoration: underline); }产量
而编译的CSS将是，
.link-btn { color: red; display: inline-block; text-decoration: underline; text-transform: "uppercase"; }希望这可以帮助。
This is the actual behaviour and a use-case of Sass
@extend.Explanation
To make it clear, update your code as below
%red-color{ color: red } @mixin btn-structure ($text-case: null, $text-shadow: null, $decoration: none ){ display: inline-block; text: { decoration: $decoration; transform: $text-case; shadow: $text-shadow } } .link-btn{ @extend %red-color; @include btn-structure($text-case: 'uppercase', $decoration: underline); } .test-class{ @extend %red-color; @include btn-structure($text-case: 'uppercase', $decoration: underline); }Which would compile as,
.link-btn, .test-class { color: red; } .link-btn { display: inline-block; text-decoration: underline; text-transform: "uppercase"; } .test-class { display: inline-block; text-decoration: underline; text-transform: "uppercase"; }As you could see,
@extendis used to "share a set of CSS properties from one selector to another", which can be clubbed together (.link-btn, .test-class). Whereas,@includeis used to insert the styles where ever required, which is not clubbed.Solution
For your requirement, you can resort to
@includeand declare a mixin@mixin red-coloras below,%red-color{ color: red } @mixin red-color{ color: red } @mixin btn-structure ($text-case: null, $text-shadow: null, $decoration: none ){ display: inline-block; text: { decoration: $decoration; transform: $text-case; shadow: $text-shadow } } .link-btn{ @include red-color; @include btn-structure($text-case: 'uppercase', $decoration: underline); }Output
And the compiled css will be,
.link-btn { color: red; display: inline-block; text-decoration: underline; text-transform: "uppercase"; }Hope this helps.
相关问答
更多-
红宝石继承vs mixins(ruby inheritance vs mixins)[2024-01-28]
我刚刚阅读了关于这个话题的好地方的Rubyist （顺便说一下这本书）。 作者做的更好，我的解释，我会引用他： 没有单一规则或公式总是导致正确的设计。 但是，在进行类与模块的决策时，请注意几点注意事项： 模块没有实例。 因此，实体或事物通常最好在类中建模，实体或事物的特征或属性最好封装在模块中。 相应地，如4.1.1节所述，类名称往往是名词，而模块名通常是形容词（Stack to Stacklike）。 一个类只能有一个超类，但是它可以混合在一个模块中。 如果您使用继承，请优先创建一个明智的超类/子类关系。 ... -
如何使用Bootstrap Mixins与Sass而不是Less？(How to use Bootstrap Mixins with Sass rather than Less? [closed])[2022-09-07]
更新 Bootstrap现在有一个官方的Sass端口，可以在这里找到： https ： //github.com/twbs/bootstrap-sass 以前 我找到了一个用sass编写的bootstrap版本，比在运行非rails应用程序的系统上安装ruby / compass / bootstrap-sass要容易得多。 https://www.github.com/jlong/sass-twitter-bootstrap 我从sass-twitter-bootstrap中复制了lib，并且只附加了主要 ... -
来自Mixins的Sass占位符(Sass Placeholders from Mixins)[2023-06-05]
让我们看一下如果使用真实类而不是扩展类会发生什么 .a { .b { color: blue; } @extend .b; } 输出： .a .b, .a .a { color: blue; } 我可以想象你想要这样做的唯一原因是你可以使用extend类来扩展而不是.classname如下所示： .c { @extend .b; } 您会看到输出可能根本不是您想要的： .a .b, .a .a, .a .c { color: blue; } ... -
使用带有猫鼬的mixins(Use mixins with mongoose)[2023-07-22]
我最终在Building模型上创建了一个名为retrieve的静态方法，如下所示： BuildingSchema.static "retrieve", (id, cb) -> @ .findOne _id: id .exec (error, building) => return cb error if error building = building.toJSON() mixins = building.mixins or [] ... -
SASS使用extend和mixins为同一类生成两个单独的规则(SASS generates two separate rules for same class using extend and mixins)[2021-12-08]
这是Sass @extend的实际行为和用例。 说明 为了清楚起见，请更新您的代码，如下所示 %red-color{ color: red } @mixin btn-structure ($text-case: null, $text-shadow: null, $decoration: none ){ display: inline-block; text: { decoration: $decoration; transform: $text-case; shado ... -
我已经测试了你的LESS，一切似乎都很好。 在元素上应用class1 ，我得到了重写的值。 请参阅此工作示例 。 所以我的猜测是你的问题出在其他地方 I've tested your LESS and all seems to be fine. When applying class1 on elements I've got the overridden values. See this working example. So my guess would be that your problem lie ...
-
不，目前不支持此功能。 但它计划在未来版本中实施。 No, currently this is not supported. But it's planned to be implemented in future versions.
-
在Sass中，Mixins和Extend功能有什么区别？(In Sass, What's the difference between Mixins and Extend features?)[2022-06-23]
@mixin 这是mixin的工作原理 。 定义和用法： @mixin awesome { width: 100%; height: 100%; } body { @include awesome; } p { @include awesome; } 上面的代码段产生以下代码。 body { width: 100%; height: 100%; } p { width: 100%; height: 100%; } 为了让事情更有趣， 我们 ... -
重新打开SASS Mixins(Reopen SASS Mixins)[2021-12-13]
我的快速测试似乎表明你可以毫不犹豫地覆盖mixins。 您不能将它们重新打开到允许您仅覆盖某些属性的程度，但您可以轻松地完全替换它们。 sample.sass： =test color: red font-weight: bold =test color: blue p +test sample.css： p { color: blue; } 请注意，此测试是使用Haml / Sass 3.0.2（Classy Cassidy）执行的，因此如果您之前收到错误，则可能不适用于早期版 ... -
SCSS - 在基于@extend的方法中使用@mixins（经典css）(SCSS - Using @mixins in an @extend based method (classy css))[2023-04-25]
不幸的是，这就是mixins的工作原理。 如果您想减小文件大小，我会考虑仅将mixin用于您要更改的属性，并使用常规扩展来实现不变的css规则。 @mixin btn-me($color: hotpink, $size: normal) { border: 1px solid $color; @if $size == 'small' { font-size: .8em; } @else { font-size: 1.2em; } &:hover { b ...