如何获取引导模式的数据并发送 PHP

Question

I need to get the Modal form data via Ajax My code:

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

code modal:

    <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>

My goal is to get all fields typed and send to the PHP page editacli.php that already has the methods to receive the $ _POST ['']; of each form element and do the save saving in the database and then I want to close the Modal and display a message on the Modal screen, "Data saved successfully".

But this Ajax code is not working, when I click the submit button nothing happens.

NOTE: I have already tested my PHP insert page without the modal and it is saving normal, I just do not know how to solve with Modal.

Answer 1

1: Change your form submission method as following
2: If your php file photovisit.php have linked from the main folder then use
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) {
}

Check it and let me know if the problem still exists.

Answer 2

Try changing type: 'POST', to method: 'POST', and also add contentType: 'application/json

'

Answer 3

Please read my code it's far from yours but i think it will helps you.

<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>

And for form this is my 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

You have several typos in your code. This line, for example:

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

refers to this (and only this) element from your form:

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

since that's the element with the ID photo . So, your AJAX call is serializing the info of that field only. The ID of the form is foto , so if you want to send the whole form, you have to change that line of your code to:

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

Also, this line:

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

does nothing, since there's no element with savephoto ID anywhere in your form. The ID of your modal is actually registerphoto , and that's what you need to use in order for the modal to close:

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

Make those changes and try again.

Answer 5

You need to put id attributes to elements that you want to be POSTed to your PHP file, and get its value. Say, you need to get the value of photoDescription textarea. You will first give an id attribute instead of name attribute. So it will be like this:

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

And then you'll store the value of textarea to a JS variable.

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

After that put all of your values that you need in your photovisit.php

data: photoDescription,  

Addition, inside your photovisit.php that will receive the values from your ajax, you will need to call it with the $_POST method.

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

The index of the POST variable should be the same from your AJAX call "data:".