锚标签作为提交按钮？ [英] Anchor tag as submit button?

问题描述

我正在将现有网站转换为使用MVC和Entity Framework。

布局/样式都应该保持不变，并且为了遵循该指南，我需要使用< a> 标记提交我的登录表单，因为它具有该按钮的自定义图像。

这里是我的表单：

  @using（Html.BeginForm（Login，Login ，FormMethod.Post，new {id =login，action =Login}））
 {
< label> 
< span>用户名
< / span> 
< input type =textname =UserNameid =UserNameclass =input-text required/> 
< / label> 
< label> 
< span>密码
< / span> 
< input type =passwordname =Passwordid =Passwordclass =input-text required/> 
< / label> 
< label> 
< input type =checkboxname =RememberMeid =RememberMeclass =check-box/> 
< span class =checkboxlabel>记住我< / span> 
< / label> 
< div class =spacer> 
< a href =javascript：void（0）onclick =login（）;类= 登录按钮 >< / A> 
< / div> 
 
 $ / code> 

如您所见，< a> 标签以前使用javascript提交了登录信息。这不是我想要完成的。

如何更改该标签以将表单提交给我的控制器操作？

解决方案

我做了一些小的修改

HTML

 < form action =test.aspxtype =POST> 
< label> 
< span>用户名< / span> 
< input type =textname =UserNameid =UserNameclass =input-text required/> 
< / label> 
< label> 
< span>密码< / span> 
< input type =passwordname =Passwordid =Passwordclass =input-text required/> 
< / label> 
< label> 
< input type =checkboxname =RememberMeid =RememberMeclass =check-box/> 
< span class =checkboxlabel>记住我< / span> 
< / label> 
< div class =spacer> 
< a href =javascript：void（0）class =login-button>登入< / a> 
< / div> 
< / form> 
  

jquery

  $（document）.ready（function（）{
 $（document）.on（click，。login-button，function（）{
 var form = $（这个）.closest（form）; 
 //console.log（form）; 
 form.submit（）; 
}）; 
}）; 
  

JSFiddle

I'm in the process of converting an existing website to use MVC and Entity Framework.

The layout / styling is all supposed to stay the same, and in order to follow that guideline I need to submit my login form using an <a> tag, because it has a custom image for the button.

Here's my form:

@using (Html.BeginForm("Login", "Login", FormMethod.Post, new { id = "login", action = "Login" }))
{
    <label>
        <span>Username
        </span>
        <input type="text" name="UserName" id="UserName" class="input-text required" />
    </label>
    <label>
        <span>Password
        </span>
        <input type="password" name="Password" id="Password" class="input-text required" />
    </label>
    <label>
        <input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
        <span class="checkboxlabel">Remember Me</span>
    </label>
    <div class="spacer">
        <a href="javascript:void(0)" onclick="login();" class="login-button"></a>
    </div>
}

As you can see, the <a> tag formerly submitted login info using javascript. This is not what I'm looking to accomplish.

How can I change that tag to submit my form to my controller action?

解决方案

I've made small changes

HTML

<form action="test.aspx" type="POST">
    <label>
        <span>Username</span>
        <input type="text" name="UserName" id="UserName" class="input-text required" />
    </label>
    <label>
        <span>Password</span>
        <input type="password" name="Password" id="Password" class="input-text required" />
    </label>
    <label>
        <input type="checkbox" name="RememberMe" id="RememberMe" class="check-box" />
        <span class="checkboxlabel">Remember Me</span>
    </label>
    <div class="spacer">
        <a href="javascript:void(0)" class="login-button">Login</a>
    </div>
</form>

jquery

$(document).ready(function(){
   $(document).on("click",".login-button",function(){
     var form = $(this).closest("form");
     //console.log(form);
     form.submit();
   });
});

JSFiddle

这篇关于锚标签作为提交按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！