Home Razor Html.BeginForm Submit button works in every browser except chrome
Reply: 1

Razor Html.BeginForm Submit button works in every browser except chrome

Daniel Jackson
1#
Daniel Jackson Published in 2018-01-11 16:24:50Z

I've been searching and found various answers but so far none seem to hit on my issue here. Seen things not working in other browsers but not yet chrome and I don't use chrome much. My issue is that when I click the submit button to this login form, it works in every single browser except chrome. The form doesn't seem to post as the controller isn't even hit when using chrome. Any idea of what I'm doing wrong? I should add that there is zero error in debugger console.

This is my entire razor page minus the @model statement above. The javascript is meant to show a spinner which works. Just the form posting does not, only in chrome.

<div class="row">
	<div class="col-xs-4 col-xs-offset-4 col-md-2 col-md-offset-5 text-center">
			@using (Html.BeginForm("Authorize", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "clearfix", role = "form", autocomplete="off" }))
			{
				<div class="form-group">
					@Html.AntiForgeryToken()
					<h3><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In With Domain Credentials</h3>
					<div id="validationSummary" class="">
						@Html.ValidationSummary(true, "", new { @class = "control-label text-danger" })
					</div>
					<p class="form-control-feedback text-danger"></p>
					<div class="form-group">
						@Html.LabelFor(Model => Model.UserName, new { @class = "control-label" })
						@Html.TextBoxFor(Model => Model.UserName, new { @class = "form-control" })
						@Html.ValidationMessageFor(Model => Model.UserName, "", new { @class = "text-danger" })
					</div>
					<div class="form-group">
						@Html.LabelFor(Model => Model.Password, new { @class = "control-label" })
						@Html.PasswordFor(Model => Model.Password, new { @class = "form-control" })
						@Html.ValidationMessageFor(Model => Model.Password, "", new { @class = "text-danger" })
					</div>
					<div class="form-group">
						<button id="submit-button" type="submit" class="btn btn-primary btn-block active" >Sign In</button>
					</div>
				</div>
			}
	</div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/scripts")
<script type="text/javascript">
	$(document).ready(function () {
		var valSummary = $('#validationSummary');
		var submitButton = $('#submit-button');
		$('#submit-button').click(function () {
			console.log("Button Clicked");
			$("#submit-button").html("<i class=\"fa fa-spinner fa-pulse\"></i> Signing In...").prop('disabled', true);
			console.log("Click finished");
		});
	});
	console.log("Button setup");
</script>

Daniel Jackson
2#
Daniel Jackson Reply to 2018-01-11 16:41:45Z

So I've spent days debugging this but never messed with the spinner code. I copied this button spinner idea from elsewhere and hadn't messed with it. The .prop('disabled', true); which disables the button from being clicked more than once seems to work in everything except chrome. This could possibly be the problem. I suppose I will have to find another way to disable the button while it's signing in that doesn't fault chrome browsers...

$('#submit-button').click(function () { console.log("Button Clicked"); $("#submit-button").html("<i class=\"fa fa-spinner fa-pulse\"></i> Signing In...").prop('disabled', true); console.log("Click finished"); });

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.306962 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO