Текст и изображение не вставляются в базу данных через модал начальной загрузки без обновления страницы в php mysqli - PullRequest
Новая
       17

Текст и изображение не вставляются в базу данных через модал начальной загрузки без обновления страницы в php mysqli

0 голосов
/ 06 июня 2019

В PHP MySQLi я вставил текст и изображение в базу данных через модальный загрузчик без обновления страницы, но он не работал должным образом,

(1).страница обновляется

(2).данные не вставляются в базу данных. 

    <div align="right">
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#add-record"><span class="glyphicon glyphicon-plus"></span>Add Record Here</button>
        </div>

       <div id="add-record" class="modal fade " role="dialog">
     <div class="modal-body">
            <form class="form-horizontal form" action="" method="post" enctype="multipart/form-data" >

        <div class="form-group">
        <label class="control-label col-md-4">Name:</label>
        <div class="col-md-6"> 
          <input type="text" name="sname" class="form-control" placeholder="Enter Student Name">
        </div>
      </div>
        <div class="form-group">
        <label class="control-label col-md-4">Photo:</label>
        <div class="col-md-6"> 
          <input type="file" name="sphoto" class="form-control">            
        </div>
      </div>
        <div class="form-group">
            <button type="submit" onclick="addData()" class="btn btn-primary">Add New Record</button>
          </div>
    </form>
    </div>
</div>

add_record.php 

<?php
include('dbconn.php');

if(isset($_POST["action"]) && $_POST["action"]=="add"){
     $a = $_POST["sname"];
     $g = $_FILES["sphoto"]["name"];

    $sql = "insert into users(sname,sphoto) value('$a','$g')";

    $run = mysqli_query($conn, $sql);
}
?>

custom.js 

    function addData(){
    var formData = new FormData(this);
    formData.append('action', 'add');
    //alert(formData);
    $.ajax({
          url: 'add_record.php',
          type: 'POST',
          data: formData,
        success: function(msg){
        //alert(msg);
        $("#add-record").hide();
           $("#response").html(msg);    
           },
         });
        }

1 Ответ

0 голосов
/ 06 июня 2019

HTML-страница

в форме установите свойство id id="sform" и измените значение свойства кнопки на type="button" вместо type="submit"

<div align="right">
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#add-record"><span class="glyphicon glyphicon-plus"></span>Add Record Here</button>
</div>

<div id="add-record" class="modal fade " role="dialog">
    <div class="modal-body">
        <form class="form-horizontal form" id="sform" action="" method="post" enctype="multipart/form-data" >
            <div class="form-group">
                <label class="control-label col-md-4">Name:</label>
                <div class="col-md-6">
                    <input type="text" name="sname" id="sname" class="form-control" placeholder="Enter Student Name">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-md-4">Photo:</label>
                <div class="col-md-6">
                    <input type="file" name="sphoto" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <button type="button" onclick="addData()" class="btn btn-primary">Add New Record</button>
            </div>
        </form>
    </div>
</div>

JS Page 

function addData() {
    var formData = new FormData($('#sform')[0]);
    formData.append('action', 'add');
    $.ajax({
        method: 'post',
        processData: false,
        contentType: false,
        cache: false,
        enctype: 'multipart/form-data',
        url: 'add_record.php',
        data: formData,
        success: function (msg) {
            //alert(msg);
            $("#response").html(msg);
            $('#add-record').modal('hide');
            $('#sform')[0].reset()
        },
    });
}
...