I'm new to MVC, currently I have a Login page and I'm trying to add a new button: "Create User" to redirect the client to a different action.
These are my codes so far:
View:
<form class="login-form" action="/Login/Login" method="POST">
<div class="login-form__content">
<div class="login-form__header">Login to your account</div>
<input class="login-form__input" type="text" name="username" placeholder="Username">
<input class="login-form__input" type="password" name="password" placeholder="Password">
<button class="login-form__button" type="submit">Login</button>
</div>
</form>
CSS
.login-form,
.login-form * {
box-sizing: border-box;
}
.login-form {
max-width: 350px;
margin: 0 auto;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
}
.login-form__content {
padding: 30px;
background: #eeeeee;
}
.login-form__header {
margin-bottom: 15px;
text-align: center;
color: #333333;
}
.login-form__input {
width: 100%;
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
border: 2px solid #dddddd;
background: #ffffff;
outline: none;
transition: border-color 0.5s;
}
.login-form__input:focus {
border-color: #0366d6;
}
.login-form__input::placeholder {
color: #aaaaaa;
}
.login-form__button {
padding: 10px;
color: #ffffff;
font-weight: bold;
background: #46a7e0;
width: 100%;
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
}
.login-form__button:active {
background: #46a7e0;
}
.login-form__links {
margin-top: 15px;
text-align: center;
}
How can I add a button within the form that would not direct the client to the action="/Login/Login" but instead to another action for example action="Login/Create" ? I'm concerned that if I add a button within the it will still continue to redirect the client to "/Login/Login".
CodePudding user response:
I had the same problem in the beginning. Just use a button with type button instead of submit like this
<form class="login-form" action="/Login/Login" method="POST">
<div class="login-form__content">
<div class="login-form__header">Login to your account</div>
<input class="login-form__input" type="text" name="username" placeholder="Username">
<input class="login-form__input" type="password" name="password" placeholder="Password">
<button class="login-form__button" type="submit">Login</button>
</div>
</form>
<button id="createFormButton" class="create-form__button" type="button">Create User</button>
This button will not submit your form and you can easily redirect to action using $('#createFormButton').click(function(){ some redirect here})
also don't put direct action in this button as you may need it to use in some other triggers also later like for validations.
CodePudding user response:
the easiest way
<a href=""/Login/Create">
<button class="login-form__button">Create</button>
</a>