Как получить данные для начальной загрузки и отправить PHP

Question

Мне нужно получить данные модальной формы через Ajax. Мой код:

    $(document).on('click', '#save-photo', function () {
    $.ajax({
        url: '/sistem/view/agend/photovisit.php',
        type: 'POST',
        data: $('#photo').serialize(),
        beforeSend: function () {
            $('#save-photo').val("Saving");
        },
        success: function (data) {
            $('#photo')[0].reset();
            $('#registerPhoto').modal('hide');
            //$('#call sucess message').html(data); 
        }
    });
});

Код модальной:

    <div id="registerPhoto" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="registerPhotoLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-xs-center" id="registerPhotoLabel">Register Photo Visit</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body"> <!-- FORM -->
                <form name="photo" id="photo" data-async data-target="#rating-modal" method="POST" action="/sistem/view/agend/photovisit.php" enctype="multipart/form-data">
                    <input type="hidden" name="_token" value="">
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="datavisit">Data Visit</label>
                        </div>
                        <div class="col col-lg-6">    
                            <input type="date" name="datavisit" class="form-control  form-control-sm form-group small" />
                        </div>
                    </div>

                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="idvisit">Visit</label>
                        </div>
                        <div class='col col-md-6'>    
                            <select>
                                <option value="1">Arquitect</option>
                                <option value="2">Engineer</option>
                            </select>
                        </div>
                    </div>
                    <br />
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="percent">Percent Progress</label>
                        </div>
                        <div class="col col-md-6 slidecontainer">
                            <input type="range" name="percent" id="range_weight" min="1" max="100" value="1" class="form-control-range slider" oninput="range_weight_disp.value = range_weight.value">
                            <output  id="range_weight_disp"></output>
                        </div>
                    </div>
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" for="photofile">Photo</label>
                        </div>
                        <div>   
                            <input type="file" class="form-control-file form-control-sm form-group small" name='photofile' id="photofile" multiple="multiple" />
                            <span id="hidden_img_show"></span>
                        </div>
                    </div>
                    <div class="row justify-content-md-left">
                        <div class="col col-lg-3">
                            <label class="control-label" class="control-label" for="photoDescription">Description Photo</label>
                        </div>
                        <div class='col-md-auto'>                
                            <textarea name="photoDescription" cols="25" rows="3" class="form-control  form-control-sm form-group small" ></textarea>
                        </div>
                    </div> 

                    <div class="modal-footer">
                        <div>

                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="button"  name="save-photo" id="save-photo" class="btn btn-primary">
                                <span class="fas fa-plus"></span>
                            Save</button> 
                        </div>
                    </div>

                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- fim modal foto -->
</div>
</div>

Моя цель - набрать все поля и отправить их в PHPстраница editacli.php, в которой уже есть методы для получения $ _POST [''];каждого элемента формы и сохраните сохранение в базе данных, а затем я хочу закрыть модальное окно и отобразить на модальном экране сообщение «Данные успешно сохранены».

Но этот код Ajax не работает, когдаЯ нажимаю кнопку «Отправить», и ничего не происходит.

ПРИМЕЧАНИЕ. Я уже проверил страницу вставки PHP без модала, и она сохраняется нормально, я просто не знаю, как решить проблему с модалом.

Answer 1

1: измените способ отправки формы следующим образом
2: если ваш php файл photovisit.php связан с основной папкой, используйте
url: "../sistem/view/agend/photovisit.php", Thervise url: "sistem/view/agend/photovisit.php",.

$('#photo').submit(function(e){
    e.preventDefault();
var savePhoto = $(this).serialize();
$.ajax({
url: "../sistem/view/agend/photovisit.php",
type: "post",
data: savePhoto ,
dataType: 'JSON',
success: function(response) {
}

Проверьте это и дайте мне знать, если проблема все еще существует.

Answer 2

Вам необходимо поместить атрибуты id в элементы, которые вы хотите поместить в ваш PHP-файл, и получить его значение.Скажем, вам нужно получить значение текстового поля photoDescription.Сначала вы дадите атрибут id вместо атрибута name.Таким образом, это будет выглядеть так:

<textarea id="photoDescription"></textarea> 

И затем вы сохраните значение textarea в переменной JS.

var photoDescription = $('#photoDescription').val();

После этого поместите все нужные значения.в вашем photovisit.php

data: photoDescription,  

Кроме того, внутри вашего photovisit.php, который будет получать значения из вашего ajax, вам нужно будет вызвать его с помощью метода $ _POST.

$photoDescription = $_POST['photoDescription']; //

Индекс переменной POST должен совпадать с вашим вызовом AJAX «data:».Я надеюсь, что это поможет вам в некотором роде.Удачи!Удачного кодирования.

Answer 3

Пожалуйста, прочитайте мой код, он далеко от вашего, но я думаю, что он вам поможет.

<script>
    $(document).ready(function(){

         $('#insert_open').on('submit',function(e)
{
    e.preventDefault();
    processing_show();  
        var form_data = new FormData(this);                  
        $.ajax
        ({
            url: "./scripts.php?action=insert_open",
            type: "POST",             
            data: form_data,
            contentType: false,       
            cache: false,             
            processData:false,
            success: function(data) {
                processing_hide();
                $("#message-success").slideDown("slow");
                setTimeout(function(){close_message_success();},3000);

            },
            error: function(data)
            {

                $("#message-warning").slideDown("slow");
                setTimeout(function(){close_message_success();},3000);
            }
        });
    });
});
</script>

А для формы это мой HTML

<form class="form-horizontal row-fluid" id="insert_open" name="insert_open" method="post" enctype="multipart/form-data" >

                                <div class="form-horizontal row-fluid">
                                    <div class="control-group">
                                        <label class="control-label" for="basicinput"></label>
                                        <div class="controls">
                                            <button class="btn btn-primary" type="submit">Insert all Open has the same id_list</button>
                                        </div>
                                    </div>

                                </div>
                                </form>

Answer 4

У вас есть несколько опечаток в вашем коде. Эта строка, например:

data: $('#photo').serialize(),

относится к этому (и только к этому) элементу из вашей формы:

<input 
    type="file" 
    class="form-control-file form-control-sm form-group small" 
    name='photo' 
    id="photo" 
    multiple="multiple" />

, так как это элемент с идентификатором photo. Итак, ваш AJAX-вызов сериализует информацию только этого поля. Идентификатор формы - foto, поэтому, если вы хотите отправить всю форму целиком, вам нужно изменить эту строку кода:

data: $('#foto').serialize(),

Также эта строка:

$('#savephoto').modal('hide');

ничего не делает, поскольку в вашей форме нет ни одного элемента с savephoto ID. Идентификатор вашего модала на самом деле registerphoto, и это то, что вам нужно использовать для закрытия модала:

$('#registerphoto').modal('hide');

Внесите эти изменения и попробуйте снова.

Answer 5

Попробуйте изменить type: 'POST', на method: 'POST',, а также добавьте contentType: 'application/json

'