I have a page with a form doing validation on the model. The problem is its blocking the cancel button.
When the user clicks the cancel button its forcing them to supply a new password and confirm it. It should just send them back to the previous page.
#model Auth.Controllers.Account.RecoverPasswordViewModel
<div class="mdl-typography--text-center">
<h2 class="mdl-typography--headline">Gendan kodeord</h2>
<p class="mdl-typography--body-1">Gendand kodeord til din konto</p>
</div>
<div asp-validation-summary="ModelOnly" class="mdl-color-text--red-400"></div>
#using (Html.BeginForm("RecoverPassword", "Account", FormMethod.Post, new {#class = "form-horizontal", role = "form"})) {
<input type="hidden" asp-for="Code" />
<fieldset>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" asp-for="NewPassword" type="password" autocomplete="off" required autofocus/>
<label class="mdl-textfield__label" asp-for="NewPassword">Nyt kodeord</label>
<span asp-validation-for="NewPassword" class="mdl-textfield__error"></span>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" asp-for="ConfirmNewPassword" type="password" autocomplete="off" required/>
<label class="mdl-textfield__label" asp-for="ConfirmNewPassword">Bekræft nyt kodeord</label>
<span asp-validation-for="ConfirmNewPassword" class="mdl-textfield__error"></span>
<input type="hidden" asp-for="ReturnUrl" value="#Model.ReturnUrl" />
</div>
<div class="actions">
<button class="mdl-button mdl-button--primary" onclick="window.history.back()" causesvalidation="false">Gå tilbage</button>
<button class="mdl-button mdl-button--primary mdl-button--raised mdl-js-button mdl-js-ripple-effect">Gem</button>
</div>
</fieldset>
}
I tried adding causesvalidation="false" on the go back button but it didnt help. Is there a way to force it to only validate on the save button?
Don't use windows.history.back(), use redirect (RedirectToAction and the like).
windows.history.back() will trigger the previous request to be resent (if you came there from a post request) which is undesired behavior.
Instead create a link
<a class="mdl-button mdl-button--primary mdl-button--raised mdl-js-button mdl-js-ripple-effect"
asp-controller="MyController" asp-action="Index">Back</a>
Related
I have this form:
<form method="post" asp-controller="Auth" asp-action="RegisterUser">
<div class="form-group ms-1 my-1">
<input class="form-control" type="text" placeholder="Register Username" name="RegisterUsername" id="RegisterUsername"/>
</div>
<div class="form-group ms-1 my-3">
<input class="form-control" placeholder="Enter password" name="RegisterPassword" type="password" id="RegisterPassword"/>
</div>
<div class="form-group ms-1 my-3">
<input class="form-control" placeholder="Confirm password" name="registerConfirmPassword" type="password" id="RegisterConfirmPassword"/>
</div>
<div class="modal-footer">
<button type="submit" value="Submit" class="btn btn-success button button4">Register</button>
</div>
</form>
And this is found in my AuthController.cs file:
[HttpPost]
public IActionResult RegisterUser(string registerUsername, string registerPassword, string registerConfirmPassword)
{
Console.WriteLine("AAAAAAAAAAAAAAAAAAAA");
Console.WriteLine($"{registerUsername} - {registerPassword} - {registerConfirmPassword}");
return Ok();
}
Whenever I press the submit button nothing happens, please help me.
The form is in _Layout.cshtml and the post method is in another controller.
<div class="input-container">
<div class="form-group">
<div class="labelContainer">
<<p>Current Password<span>*</span></p>
</div>
<label for="currentPassword" class="sr-only">Current Password</label>
<input type="password" id="currentPassword" name="currentPassword" class="form-control" placeholder="Current Password" required="">
<i class="fa fa-lock icon-style" aria-hidden="true"></i>
</div>
<div class="form-group">
<div class="labelContainer">
<<p>Enter New Password<span>*</span></p>
</div>
<label for="newPassword" class="sr-only">New Password</label>
<input type="password" id="newPassword" name="newPassword" class="form-control" placeholder="New Password" required="">
<i class="fa fa-lock icon-style" aria-hidden="true"></i>
</div>
<div class="form-group">
<div class="labelContainer">
<<p>Confirm New Password<span>*</span></p>
</div>
<label for="confirmPassword" class="sr-only">Confirm New Password</label>
<input type="password" id="confirmPassowrd" name="confirmPassowrd" class="form-control" placeholder="Confirm Password" required="">
<i class="fa fa-lock icon-style" aria-hidden="true"></i>
</div>
Above is the html code, I would like to insert the current password into current password text field. I have tried two methods below and it is not workable it says element not visible.
(code 1 )driver.FindElement(By.Id("currentPassword")).SendKeys("testabc");
(code 2 )IJavaScriptExecutor jse = (IJavaScriptExecutor)driver;
jse.ExecuteScript("document.getElementById('currentPassword').value='testabc';");
Try to test for newPassword textfield instead of currentPassword textfield and it is working fine. only the currentPassword and confirmPassword textfield have error message element not visible.
Does anyone know what is the problem?
You may try this,
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
wait.Until(ExpectedConditions.ElementIsVisible(By.Id("currentPassword"))).SendKeys("testabc");
I'm trying to use a textbox value in controller route and am having some trouble with the syntax. Essentially, I have my end users selecting a file and then submitting the data to the api to process and send the data off. I have working static code below, but can't get the xml path to be dynamically populated via the textbox value.
note that (as far as I can tell) the forward slash at the end of the path is required since there is a dot in the file path.
#using (Html.BeginForm("", "api/food/dummy food file.xml/"))
{
<div class="row">
<div class="col-lg-6">
<label class="control-label">Select File</label>
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-default">
Browse… <input type="file" style="display: none;" single>
</span>
</label>
<input id="food.filepath" name="food.filepath" type="text" class="form-control" readonly>
</div>
</div>
</div>
<br />
<div>
<button id = "btnSubmit" type="submit" class="btn btn-primary">Submit</button>
</div>
}
I don't what the syntax would be, but I can't get something like the below to work.
#using (Html.BeginForm("", "api/food/" + food.filepath + "/"))
{
<div class="row">
<div class="col-lg-6">
<label class="control-label">Select File</label>
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-default">
Browse… <input type="file" style="display: none;" single>
</span>
</label>
<input id="food.filepath" name="food.filepath" type="text" class="form-control" readonly>
</div>
</div>
</div>
<br />
<div>
<button id = "btnSubmit" type="submit" class="btn btn-primary">Submit</button>
</div>
}
Because the form is rendered on server and the value food.filepath is on client, you cannot mix them. Changing form action according to client values need to be done on client with javascript.
You can remove the file from action a add it on submit javascript action, for example by changing BeginForm to this:
#using (Html.BeginForm("", "api/food/", FormMethod.Get, new { onSubmit = "this.dataset.act = this.dataset.act||this.action; this.action = this.dataset.act + this['food.filepath'].value" } ))
I am a programmer-to-be, currently working on a project at work.
My problem is this: I have 3 submit buttons (on the same form), that each call a different action. These buttons HAVE to be disabled, if the HTML Selector (dropdown) does not have any options to choose from.
My form currently looks like this:
<form asp-action="Index" method="post" onkeypress="return event.keyCode != 13;">
<div class="col-md-9">
<div class="form-group form-inline">
<label asp-for="OrderNumber">Order number: </label>
<input asp-for="OrderNumber" class="form-control" type="text" placeholder="Insert order number" autofocus />
</div>
<div>
<label>Delete</label>
<input asp-for="Deletion" type="checkbox" />
</div>
<div>
<div class="col-md-4">
<input class="btn btn-block" type="submit" name="action" value="Receive" />
</div>
<div class="col-md-4">
<input class="btn btn-block" type="submit" name="action" value="Start" />
</div>
<div class="col-md-4">
<input class="btn btn-block" type="submit" name="action" value="Finish" />
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group form-inline">
<label asp-for="ProfileId">Profile: </label>
<select asp-for="ProfileId" class="form-control">
#foreach (var p in Model.Profiles)
{
<option value="#p.ProfileId">#p.Name</option>
}
</select>
</div>
</div>
</form>
Thanks for any help, and if you need more information, or if this question is poorly described, do not hesitate to ask! :)
Give your buttons an id. Set them to be disabled (enabled="false").
Call a javascript function when the dropdownlist is changed.
Check the selectedIndex of the dropdownlist in the function that is called onchange and set the button accordingly.
I could write a function that would do it, but you wouldn't learn anything. If you do a bit of research, have a stab at writing the function, I'll fix it if it doesn't work.
Simply disable the form fields that need be depending on if the others have the same conditional requirements. You can give them a custom class and use some javascript code and toggle the class with some JS like so.
toggleAttribute = function(className,index){
var eLs = [].slice.call(document.getElementsByClassName(className),0);
for(var i=0; i<eLs.length; i++){
eLs[i].disabled=(index==0 ? false : true); //index 0 is for 'Yes'
}
}
I came up with a solution of my own using Razor.
My form now looks like this:
<form asp-action="Index" method="post" onkeypress="return event.keyCode != 13;">
<div class="col-md-9">
<div class="form-group form-inline">
<label asp-for="OrderNumber">Order number: </label>
<input asp-for="OrderNumber" class="form-control" type="text" placeholder="Insert order number" autofocus />
</div>
<div>
<label>Delete</label>
<input asp-for="Deletion" type="checkbox" />
</div>
<div>
<div class="col-md-4">
<input class="btn btn-block" type="submit" name="action" value="Receive"
#{ if (Model.Profiles.Count() == 0) { #: disabled="disabled"
} } />
</div>
<div class="col-md-4">
<input class="btn btn-block" type="submit" name="action" value="Start"
#{ if (Model.Profiles.Count() == 0) { #: disabled="disabled"
} } />
</div>
<div class="col-md-4">
<input class="btn btn-block" type="submit" name="action" value="Finish"
#{ if (Model.Profiles.Count() == 0) { #: disabled="disabled"
} } />
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group form-inline">
<label asp-for="ProfileId">Profile: </label>
<select asp-for="ProfileId" class="form-control">
#foreach (var p in Model.Profiles)
{
<option value="#p.ProfileId">#p.Name</option>
}
</select>
</div>
</div>
</form>
I added an if-statement, that checks if there is any profiles in my list of profiles. If there is none (0), it adds the disabled="disabled" attribute to my inputs.
Thanks to anyone that tried to assist me in solving this, and providing me with suggestions for a solution :)
I have a best practice question. I have a page with many chat rooms.
When you click on a chat room a modal prompts asking for a nickname and VIA post gets the information and takes you to the room.
The questions is, I have multiple rooms so I have one modal:
#using (Html.BeginForm("DebateV2", "Home", FormMethod.Post)){
#Html.AntiForgeryToken()
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content ">
<div class="modal-header modal-header-primary">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="modalTitle">
<span class="glyphicon glyphicon-lock pull-left"></span> #Resources.IngresoALaGrieta
</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="Nickname"><span class="glyphicon glyphicon-user"></span> #Resources.ElejiNombre</label>
<input type="text" class="form-control" id="Nickname" name="Nickname" placeholder="#Resources.ElejiNick">
</div>
<input type="hidden" id="Debate" name="Debate" />
<input type="hidden" id="Team" name="Team" />
<button type="submit" id="connect" disabled="disabled" class="btn btn-success btn-block"><span class="glyphicon glyphicon-fire"></span> #Resources.Entrar</button>
</form>
</div>
</div>
</div>
</div>
}
And when the button is clicked it appends some information about the chatroom to the modal form, like this:
$('.open-modal')
.each(function() {
var $this = $(this);
$this.on("click",
function() {
$("#Debate").val($(this).data('debate'));
$("#Team").val($(this).data('team'));
$("#modalTitle").val($(this).data('titulo'));
$('#myModal').modal('show');
});
});
Now I want to send some information via QUERYSTRING so I have in the browser address the name of the room like this:
www.debates.com/debate?debate=debate-name
what is the best practice to do that? I am really lost.