Accept-модал до регистрации - PullRequest
Новая
       11

Accept-модал до регистрации

0 голосов
/ 07 мая 2018

Когда пользователь пытается зарегистрироваться, я хочу, чтобы модал всплыл с некоторыми условиями, прежде чем регистрация будет принята. Кажется, что все работает, пока пользователь не примет условия, показанные на модальном. Когда пользователь нажимает кнопку (submitBtn2), он не реагирует. Я попытался выполнить тестирование с сигналом тревоги, чтобы определить, была ли проблема в моем запросе, но даже сигнал тревоги не отображается - что я делаю не так?

Регистрационная форма 

@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();
});

Модальные 

    <!--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>
                <a href="#" id="submitBtn2" class="btn btn-success success">Submit</a>
            </div>
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 07 мая 2018

Вам нужно указать Id в форме. Вы можете указать это в параметре htmlAttributes вспомогательного метода BeginForm. 

@using (Html.BeginForm("Register", "Account", FormMethod.Post,
                 new { @class = "form-horizontal", role = "form" , @id= "Register" }))
{
   <!-- Your form elements/existing code goes here -->
}

При этом будет сгенерирован тег формы со значением атрибута Id Register

<form action="/" class="form-horizontal" id="Register" method="post" role="form">
       <!-- Your form elements  goes here -->
</form>

И используйте это значение атрибута Id в селекторе jQuery, получите элемент form и отправьте форму. 

$(document).ready(function () {
    $('#submitBtn2').click(function () {
        $('#Register').submit();
    });
});

Это один из способов сделать это. Другой подход заключается в том, чтобы сохранить модальное диалоговое окно внутри формы, и когда нажимается кнопка в модальном режиме, найдите тег ближайшего контейнера form и отправьте его. Метод jQuery closest будет полезен. Но селектор идентификаторов будет быстрее (надеюсь, лучше, чем решение o (n))

...