it-swarm.com.ru

Начальная загрузка модальной формы перед отправкой

Я новичок в модальных делах, у меня есть форма, и когда пользователь нажимает кнопку «Отправить», она отображает модальное подтверждение, если пользователь хочет отправить, модальное поле также содержит вводимые пользователем данные из полей формы. Я искал по всему интернету, но не могу найти подходящий по моим потребностям. И все, что я вижу, это то, что они помечают событие click, чтобы открыть модальную ссылку. У меня есть тип ввода представить. Можете ли вы привести примеры или идеи? Спасибо! Вот мой образец формы.

<form role="form" id="formfield" action="inc/Controller/OperatorController.php" method="post"  enctype="multipart/form-data" onsubmit="return validateForm();">
<input type="hidden" name="action" value="add_form" /> 

       <div class="form-group">
         <label>Last Name</label><span class="label label-danger">*required</span>
         <input class="form-control" placeholder="Enter Last Name" name="lastname" id="lastname">
       </div>

        <div class="form-group">
          <label>First Name</label><span class="label label-danger">*required</span>
          <input class="form-control" placeholder="Enter First Name" name="firstname" id="firstname">
       </div>

  <input type="submit" name="btn" value="Submit" id="submitBtn" class="btn btn-default" data-confirm="Are you sure you want to delete?"/>
  <input type="button" name="btn" value="Reset" onclick="window.location='fillup.php'" class="btn btn-default" data-modal-type="confirm"/>
</form>
29
user3651491

Так что, если я правильно понял, по нажатию кнопки вы хотите открыть модальное окно, в котором перечислены значения, введенные пользователями, после чего они будут отправлены.

Для этого сначала измените свой input type="submit" на input type="button" и добавьте data-toggle="modal" data-target="#confirm-submit", чтобы при нажатии на него запускался модальный режим:

<input type="button" name="btn" value="Submit" id="submitBtn" data-toggle="modal" data-target="#confirm-submit" class="btn btn-default" />

Далее модальный диалог:

<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">
                Confirm Submit
            </div>
            <div class="modal-body">
                Are you sure you want to submit the following details?

                <!-- We display the details entered by the user here -->
                <table class="table">
                    <tr>
                        <th>Last Name</th>
                        <td id="lname"></td>
                    </tr>
                    <tr>
                        <th>First Name</th>
                        <td id="fname"></td>
                    </tr>
                </table>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a href="#" id="submit" class="btn btn-success success">Submit</a>
            </div>
        </div>
    </div>
</div>

Наконец, немного о jQuery:

$('#submitBtn').click(function() {
     /* when the button in the form, display the entered values in the modal */
     $('#lname').text($('#lastname').val());
     $('#fname').text($('#firstname').val());
});

$('#submit').click(function(){
     /* when the submit button in the modal is clicked, submit the form */
    alert('submitting');
    $('#formfield').submit();
});

Вы не указали, что делает функция validateForm(), но на основании этого вам следует ограничить отправку формы. Или вы можете запустить эту функцию на кнопке формы #submitBtn click, а затем загрузить модальное после проверки валидации.

ДЕМО

46
I Can Has Kittenz
$('form button[type="submit"]').on('click', function () {
   $(this).parents('form').submit();
});
0
Abdo-Host

Я заметил, что некоторые из ответов не вызывали атрибут required HTML5 (поскольку материал выполнялся с действием click, а не с действием form send, в результате чего он пропускался, когда входные данные были пусты) :

  1. Имейте <form id='xform'></form> с некоторыми входами с обязательным атрибутом и поместите <input type='submit'> в конце.
  2. Подтверждение ввода, где ожидается ввод "ok" <input type='text' name='xconf' value='' required>
  3. Добавьте modal_1_confirm к вашему html (чтобы подтвердить форму отправки).
  4. (в modal_1_confirm) добавьте id modal_1_accept к кнопке подтверждения.
  5. Добавьте второй modal_2_errMsg в ваш html (для отображения ошибок проверки формы).
  6. (на modal_2_errMsg) добавьте id modal_2_accept к кнопке подтверждения.
  7. (в modal_2_errMsg) добавьте id m2_Txt к отображаемому текстовому держателю.
  8. JS для перехвата перед отправкой формы:

    $("#xform").submit(function(e){
        var msg, conf, preventSend;
    
        if($("#xform").attr("data-send")!=="ready"){
            msg="Error."; //default error msg
            preventSend=false;
    
            conf=$("[name='xconf']").val().toLowerCase().replace(/^"|"$/g, "");
    
            if(conf===""){
                msg="The field is empty.";
                preventSend=true;
            }else if(conf!=="ok"){
                msg="You didn't write \"ok\" correctly.";
                preventSend=true;
            }
    
            if(preventSend){ //validation failed, show the error
                $("#m2_Txt").html(msg); //displayed text on modal_2_errMsg
                $("#modal_2_errMsg").modal("show");
            }else{ //validation passed, now let's confirm the action
                $("#modal_1_confirm").modal("show");
            }
    
            e.preventDefault();
            return false;
        }
    });
    

`9. Также некоторые вещи при нажатии на кнопки из модалов:

$("#modal_1_accept").click(function(){
    $("#modal_1_confirm").modal("hide");
    $("#xform").attr("data-send", "ready").submit();
});

$("#modal_2_accept").click(function(){
    $("#modal_2_errMsg").modal("hide");
});

Важное примечание: Так что будьте осторожны, если вы добавите дополнительный способ показа модального окна, так как простое нажатие кнопки подтверждения $("#modal_1_accept") примет пройденную проверку и добавит атрибут "ready":

  • Это объясняется тем, что $("#modal_1_confirm").modal("show"); отображается only, когда она прошла Проверку, поэтому нажатие $("#modal_1_accept") должно быть Недоступным без предварительной проверки формы.
0
ajax333221