locked
Submit button not submitting Registration Form RRS feed

  • Question

  • User-1861000632 posted

    I've added more fields to the RegisterViewModel and the Register.cshtml looks like this: 

    <!-- multistep form -->
                    @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { id = "msform" }))
                    {
                        @Html.AntiForgeryToken()
                        @Html.ValidationSummary("", new { @class = "text-danger" })
                        <!-- progressbar -->
                        <ul id="eliteregister">
                            <li class="active">Tutor Request</li>
                            <li>Account Creation</li>
                            <li>Personal Details</li>
                        </ul>
                        <!-- fieldsets -->
                        <fieldset>
                            <h2 class="fs-title">Find your trusted Tutor</h2>
                            <h3 class="fs-subtitle">This is step 1</h3>
                            <div>
                                <label>What will you like to learn?</label>
                                @Html.TextBoxFor(m => m.Subject, new { placeholder = "Maths", id = "subject" })
                                <label>Level</label>
                                @Html.TextBoxFor(m => m.Level, new { placeholder = "GSCE", id = "level" })
                            </div>
                            <input type="button" name="next" class="next action-button" value="Next" />
                        </fieldset>
                        <fieldset>
                            <h2 class="fs-title">Create an Account</h2>
                            <h3 class="fs-subtitle">To submit your request, you need to have an account</h3>
                            <div>
                                <div class="col-md-6">
                                    <label>First Name</label>
                                    @Html.TextBoxFor(m => m.ApplicationUser.FirstName, new { placeholder = "First Name", id = "firstName" })
                                </div>
                                <div class="col-md-6">
                                    <label>Last Name</label>
                                    @Html.TextBoxFor(m => m.ApplicationUser.LastName, new { placeholder = "Last Name", id = "lastName" })
                                </div>
                            </div>
                            <div>
                                <label>Phone Number</label>
                                @Html.TextBoxFor(m => m.ApplicationUser.PhoneNumber, new { placeholder = "Phone Number", id = "phoneNumber" })
                            </div>
                            <div>
                                <label>Email Address</label>
                                @Html.TextBoxFor(m => m.Email, new { placeholder = "name@domain.com", id = "email" })
                            </div>
                            <div>
                                <label>Password</label>
                                @Html.PasswordFor(m => m.Password, new { placeholder = "Password", id = "password", name = "pass" })
                            </div>
                            <div>
                                <label>Confirm Password</label>
                                @Html.PasswordFor(m => m.ConfirmPassword, new { name = "cpass", placeholder = "Confirm Password" })
                            </div>
                            <input type="button" name="previous" class="previous action-button" value="Previous" />
                            <input type="button" name="next" class="next action-button" value="Next" />
                        </fieldset>
                        <fieldset>
                            <h2 class="fs-title">Home Address</h2>
                            <h3 class="fs-subtitle">To choose the nearest tutor to you, we need to know where you live. <strong>(Optional)</strong></h3>
                            <input type="text" name="state" placeholder="State" />
                            <input type="text" name="localgovt" placeholder="Local Government" />
                            <textarea name="address" placeholder="Address"></textarea>
                            <input type="button" name="previous" class="previous action-button" value="Previous" />
                            <input type="submit" name="submit" class="submit action-button" value="Register" id="submitButton" />
                        </fieldset>
                    }

    The Submit doesn't work. I would like to have the public async Task<ActionResult> Register(RegisterViewModel model) handle the registration of the form. While debugging it, the submit button doesn't work and posting with Ajax doesn't seem to be an option either.

    Kindly help.

    Saturday, February 2, 2019 11:00 AM

Answers

  • User475983607 posted

    All modern browsers have a featured call Developer Tools.  Dev Tools allows you to see what the browser sees.  You can open Dev Tools by pressing F12.  

    Find and open the Network View then click the submit button.  You should see a network trace if the form submits otherwise nothing wi happen.  If nothing happens then look for client validation error(s) on the page which stop submits.  The way the HTML is written errors are not visible.  Again, using dev tools and the "elements" view this time, you might see the HTML flicker when clicking the submit button which could indicate a validation error.

    If the form does submit then take a look at the HTTP request in the Network Tab and make sure the URL matches the Action. 

    Lastly, the code snippet has next/previous buttons but no supporting code or explanation.  There could be a JavaScript bug.  Again, use the JavaScript debugger in  Dev Tools to step through your JavaScript code.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, February 2, 2019 1:59 PM

All replies

  • User-2054057000 posted

    What is the action method code?

    Saturday, February 2, 2019 11:32 AM
  • User-1861000632 posted
            //
            // POST: /Account/Register
            [HttpPost]
            [AllowAnonymous]
            [ValidateAntiForgeryToken]
            public async Task<ActionResult> Register(RegisterViewModel model)
            {
                if (ModelState.IsValid)
                {
                    var user = new ApplicationUser { UserName = model.Email, Email = model.Email };
                    var result = await UserManager.CreateAsync(user, model.Password);
                    if (result.Succeeded)
                    {
                        await SignInManager.SignInAsync(user, isPersistent:false, rememberBrowser:false);
                        
                        // For more information on how to enable account confirmation and password reset please visit https://go.microsoft.com/fwlink/?LinkID=320771
                        // Send an email with this link
                        // string code = await UserManager.GenerateEmailConfirmationTokenAsync(user.Id);
                        // var callbackUrl = Url.Action("ConfirmEmail", "Account", new { userId = user.Id, code = code }, protocol: Request.Url.Scheme);
                        // await UserManager.SendEmailAsync(user.Id, "Confirm your account", "Please confirm your account by clicking <a href=\"" + callbackUrl + "\">here</a>");
    
                        return RedirectToAction("Index", "Home");
                    }
                    AddErrors(result);
                }
    
                // If we got this far, something failed, redisplay form
                return View(model);
            }

    When I step-build, it doesn't even get to the RegisterViewModel. Because when I debug, it doesn't even get to the method.

    Saturday, February 2, 2019 11:49 AM
  • User475983607 posted

    All modern browsers have a featured call Developer Tools.  Dev Tools allows you to see what the browser sees.  You can open Dev Tools by pressing F12.  

    Find and open the Network View then click the submit button.  You should see a network trace if the form submits otherwise nothing wi happen.  If nothing happens then look for client validation error(s) on the page which stop submits.  The way the HTML is written errors are not visible.  Again, using dev tools and the "elements" view this time, you might see the HTML flicker when clicking the submit button which could indicate a validation error.

    If the form does submit then take a look at the HTTP request in the Network Tab and make sure the URL matches the Action. 

    Lastly, the code snippet has next/previous buttons but no supporting code or explanation.  There could be a JavaScript bug.  Again, use the JavaScript debugger in  Dev Tools to step through your JavaScript code.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, February 2, 2019 1:59 PM