As a user tries to register, I want a modal to pop up with some terms before the registration is accepted. Everything seems to work until the user accepts the terms shown on the modal. When the user presses the button (submitBtn2) it doesn't react. I have tried testing with an alarm to see if my submition was the issue, but not even the alarm isn't shown - what am i doing wrong?
Registration form
#using (Html.BeginForm("Register", "Account", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
<div align="center" class="w3-black w3-opacity" id="register">
<br />
#Html.AntiForgeryToken()
<h4>Register</h4>
<hr />
#Html.ValidationSummary("", new { #class = "text-danger" })
<div class="form-group" id="lastname">
#Html.LabelFor(m => m.Email, new { #class = "control-label" })
<div>
#Html.TextBoxFor(m => m.Email, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Password, new { #class = "control-label" })
<div>
#Html.PasswordFor(m => m.Password, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.ConfirmPassword, new { #class = "control-label" })
<div>
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<button class="w3-button w3-light-grey w3-section" type="submit" value="Register">
<i class="fa fa-user"></i>Create user
</button>
<input type="button" name="ConfirmRegBtn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="w3-button w3-light-grey w3-section" />
</div>
</div>
}
JQuery
$('#submitBtn2').click(function () {
/* when the submit button in the modal is clicked, submit the form */
window.alert("sometext");
//$('#Register').submit();
});
Modal
<!--legal data-stuff-->
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header w3-center">
<h1>Before you create your user</h1>
</div>
<div class="modal-body scroll">
Some stuff from database
Lorem ipsum...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Submit
</div>
</div>
</div>
</div>
You need to give an Id to the form. You can specify that in your htmlAttributes parameter of the BeginForm helper method.
#using (Html.BeginForm("Register", "Account", FormMethod.Post,
new { #class = "form-horizontal", role = "form" , #id= "Register" }))
{
<!-- Your form elements/existing code goes here -->
}
This will generate the form tag with Id attribute value Register
<form action="/" class="form-horizontal" id="Register" method="post" role="form">
<!-- Your form elements goes here -->
</form>
And use this Id attribute value in your jQuery selector get the form element and submit the form.
$(document).ready(function () {
$('#submitBtn2').click(function () {
$('#Register').submit();
});
});
That is one way of doing it. Another approach is to keep the modal dialog inside the form and when the button in modal is clicked, find the closest container form tag and submit it. jQuery closest method will be handy. But the Id selector will be faster (hopefully better than o(n) solution)
Related
I am kinda new to this. How do you populate a TextBoxFor with a value from a TextBoxFor on buttonclick?
I am creating a confirmation modal wherein the user input data in the TextBoxFor and when submit button is clicked, a confirmation dialog should pop-up with his credentials submitted. The problem is no value is showing in the modal TextBoxFor
Parent TextBoxFor
<div class="col-md-10">
#Html.TextBoxFor(model => model.name, new { htmlAttributes = new { #class = "form-control", #id = "name" } })
#Html.ValidationMessageFor(model => model.name, "", new { #class = "text-danger" })
</div>
<button type="button" id="submitBtn" class="btn btn-primary" data-toggle="modal" data-target="#login-modal" data-backdrop="static" data-keyboard="false">Submit</button>
Modal TextBoxFor
<div id="login-modal" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Confirm Submit
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
</div>
<div class="modal-body">
Are you sure you want to submit the following details?
<br/>
<br/>
<table class="table">
<tr>
<th>Queue Number</th>
<td>#Html.TextBoxFor(model => model.name, new {htmlAttributes = new {#class = "form-control", #id = "namee"}})</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Submit
</div>
}
</div>
</div>
Script
$('#submitBtn').click(function () {
$('#namee').text($('#name').val());
var x = document.getElementById("name").value;
document.getElementById("namee").innerHTML = x;
});
I also tried changing the Parent TextBoxFor with an <input type> but still doing nothing.
Thanks in advance.
I'm obviously missing something in being able to display a modal dialog with a url action link.
I know how to display a bootstrap dialog from a jQuery click event, but what I was hoping to do was the following:
I have an Index page with a url.action link on it. When the user clicks on the link, I link to the appropriate controller action method (Edit) with no problems (seen during debugging) in the hope of displaying the bootstrap modal popup dialog. However, no modal dialog pops up.
If I include a data-target on the action link, the link doesn't even work. If I remove it, it gets to the View, but no modal dialog pops up because there is nothing on the link that says what the data target is. I'm hoping I have the syntax incorrect on the link for the target of the modal popup. I'm hoping that if I include the proper bootstrap attributes for the dialog, it will pop up.
I really could use some help here and would be much appreciated.
Here is the link on my Index page (with the data target included). Note again that if I exclude the "data-toggle" and "data-target" from the below code snippet, I get to the View, but no dialog pops up.
data-toggle="modal", data-target="#categoryEditModal"
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit
Here is my destination View. I can verify that while debugging, the Model.CategoryID and Model.CategoryDescription are populated in the Model.
<div class="modal" id="categoryEditModal" tabindex="-1" role="dialog" aria-labelledby="categoryModal-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="categoryModal-label">Category Description</h4>
</div>
<div class="modal-body">
<div class="form-group">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.CategoryDescription, htmlAttributes: new { #class = "control-label required col-md-2 col-sm-2 col-xs-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CategoryDescription, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CategoryDescription, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="btnSaveCategory">Save</button>
</div>
</div>
</div>
</div>
Code edit on Index page to bring up the dialog box
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit
In your view have
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Edit
<div id='myModal' class='modal fade in'>
<div class="modal-dialog">
<div class="modal-content">
<div id='myModalContent'></div>
</div>
</div>
</div>
Add jquery:
$(function () {
$.ajaxSetup({ cache: false });
$("a[data-modal]").on("click", function (e) {
$('#myModalContent').load(this.href, function () {
$('#myModal').modal({
/*backdrop: 'static',*/
keyboard: true
}, 'show');
});
return false;
});
});
And in your controller return the partial view:
Return PartialView("partialviewname")
I have a login partial view which is loading inside the bootstrap modal,in the login partial view i have a create new link on click of the create new link.
div class="modal-header" style="background-color: gainsboro">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Sign In</h4>
</div>
<div class="modal-body" style="height: 300px">
<form id="frmLogin" class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" title="email" pattern="^[a-zA-Z0-9._+-]+#("#")[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$" class="form-control" id="inputEmail3" placeholder="Email" style="width: 400px;" required>
</div>
</div>
<div class="form-group ">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" style="width: 400px;" required>
</div>
</div>
<label id="lblInvalidUser" class="errorMessage">Invalid user Credential</label>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">
Remember me
</label>
</div>
<a class="anchor-horizontal " href="#">Forgot password</a>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="btnLogin" type="button" class="btn btn-danger">Sign in</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<label style="margin: 40px;">Dont have an account yet</label>
#Html.ActionLink("Create a new one", "Register", "Home", null, new { #class = "anchor-horizontal pull-right modal-link" })
#*<a class="anchor-horizontal pull-right" href="#">Create a new one</a>*#
</div>
this is my login partial view and following is my
×
Create New Account
<form id="frmLogin" class="form-horizontal" role="form">
<div class="form-group">
<div class="editor-label">
#Html.LabelFor(model => model.USER_EMAIL, "Your Email", new { #class = "col-sm-2 control-label" })
</div>
<div class="col-sm-10 editor-field">
#Html.EditorFor(model => model.USER_EMAIL, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.USER_EMAIL)
</div>
</div>
<div class="form-group">
<div class="editor-label">
#Html.LabelFor(model => model.USER_PASSWORD, "Choose Password", new { #class = "col-sm-2 control-label" })
</div>
<div class="col-sm-10 editor-field">
#Html.EditorFor(model => model.USER_PASSWORD, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.USER_PASSWORD)
</div>
</div>
<div class="form-group">
<div class="editor-label">
#Html.LabelFor(model => model.USER_CONFIRMPASSWORD, "Confirm Password", new { #class = "col-sm-2 control-label" })
</div>
<div class=" col-sm-10 editor-field">
#Html.EditorFor(model => model.USER_CONFIRMPASSWORD, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.USER_CONFIRMPASSWORD)
</div>
</div>
<div class="editor-label">
#Html.LabelFor(model => model.USER_MOBILENO, "Your Mobile No", new { #class = "col-sm-2 control-label" })
</div>
<div class="col-sm-10 editor-field">
#Html.EditorFor(model => model.USER_MOBILENO, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.USER_MOBILENO)
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="btnRegister" type="submit" class="btn btn-danger">Create My Account</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
#Html.ActionLink("Back to List", "Login","Home",null,new { #class = "anchor-horizontal pull-left"})
</div>
}
this is my js which is opening my modal.
//open bootstrap modal
$('body').on('click', '.modal-link', function (e) {
debugger;
e.preventDefault();
$(this).attr('data-target', '#basicModal');
$(this).attr('data-toggle', 'modal');
});
//Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
debugger;
$('#basicModal').modal('hide');
});
//clear modal cache, so that new content can be loaded.
$('#basicModal').on('hidden.bs.modal', function () {
debugger;
$(this).removeData('bs.modal');
});
and my controller action method is.
[HttpGet]
public ActionResult Register()
{
return PartialView("_register");
}
but when i click on the create new its opening the register view in a complete page rather than inside the modal.
Maybe you can do something like this, load partial direct in modal att
<a data-toggle="modal" href="http://fiddle.jshell.net/bHmRB/51/show/" data-target="#myModal">Click me !</a>
<!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body"><div class="te"></div></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog --> </div> <!-- /.modal -->
Workign fiddle
http://jsfiddle.net/NUCgp/1552/
I am performing registration inside bootstrap 3 modal components.I create a partial view for registration and render that inside bootstrap modal. I am performing validation there also.Problem is that if I submit wrong data or empty data modal disappers on submit button click . I want that it stays there if data is not valid and show validation errors there.How I customize that?
Here is my partial view
#using (Html.BeginForm("", "", FormMethod.Post, new { #class = "form-signin" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
<fieldset>
<legend class="form">Registration Form</legend>
#Html.TextBoxFor(m => m.UserName, new { #class = "form-control", placeholder = "Email Address" })
#Html.PasswordFor(m => m.Password, new { #class = "form-control", placeholder = "Password" })
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control", placeholder = "Confirm Password" })
<input type="submit" value="Register" style="margin-top:10px;" class="btn btn-lg btn-primary btn-block" />
</fieldset>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
and here is the modal
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Registration</h4>
</div>
<div class="modal-body">
#Html.Partial("_Register")
</div>
</div>
</div>
</div>
You have to use Ajax.BeginForm(). Here is the way how can you achieve it.
Using Ajax.BeginForm with ASP.NET MVC 3 Razor
I have an application in Umbraco MVC 7, I have a button that call for Modal popup to open the login form. here is the modal code placed on partial view.
#inherits UmbracoTemplatePage
#using System.Web.Mvc.Html
#using ClientDependency.Core.Mvc
#using Umbraco.Web
#using Umbraco.Web.Models
#using Umbraco.Web.Controllers
#{
var loginModel = new LoginModel();
Html.EnableClientValidation();
Html.EnableUnobtrusiveJavaScript();
Html.RequiresJs("/umbraco_client/ui/jquery.js");
Html.RequiresJs("/umbraco_client/Application/JQuery/jquery.validate.min.js");
Html.RequiresJs("/umbraco_client/Application/JQuery/jquery.validate.unobtrusive.min.js");
}
#Html.RenderJsHere()
<div class="modal fade bs-example-modal-sm" id="login" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Login</h4>
</div>
#using (Html.BeginUmbracoForm<UmbLoginController>("HandleLogin", null, new { #class = "form-horizontal", role = "form" }))
{
<div class="modal-body">
<div class="form-group">
<div class="col-sm-12 formError">
#Html.ValidationSummary()
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
#Html.TextBoxFor(m => loginModel.Username, new { #class = "form-control", placeholder = "Username" })
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
#Html.PasswordFor(m => loginModel.Password, new { #class = "form-control", placeholder = "Password" })
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Login</button>
</div>
}
</div>
</div>
</div>
So when I don't type anything and clicks submit it keeps the modal open and display the validation error, all good, however if I type a wrong credentials its close the modal popup, instead I would like to keep open and display the returned error. I know it is not submitting because if I try to refresh the browser, it asks me to resend the form.
Any suggestion on what do I need to do to fix it?
Thanks a lot
When there is no validation errors the form get submitted hence a page reload happens that's why the modal popup gets closed.
Solution :- You need to submit the login form using AJAX, so that only that part of the page will get submitted.