Модальная форма не передает пользовательский ввод в базу данных - PullRequest
Новая
       7

Модальная форма не передает пользовательский ввод в базу данных

0 голосов
/ 29 декабря 2018

У меня есть модальная форма, которая позволяет пользователю добавлять новую строку в таблицу на веб-странице PHP, а затем обновляет страницу.

Я пробовал следующее безрезультатно:

модальный HTML-код 

<div class="modal-body mx-3">

            <p class="statusMsg"></p>
            <form role="form">
                <div class="form-group">
                    <label class="label" for="inputName">Data Map Name</label><br>
                    <input type="text" class="form-control" name="name" id="inputName" placeholder="Enter data map name"/>
                </div>

                <div class="form-group">
                    <label class="label" for="inputDescription">Description</label><br>
                    <input type="text" class="form-control" name="description" id="inputDescription" placeholder="Enter description"/>
                </div>

            </form>
            </div>

         <div class="modal-footer d-flex justify-content-right">
         <button type="button" class="btn btn-outline-info waves-effect " data-dismiss="modal">Close</button>
            <button type="button" class="btn btn btn-success submitBtn"  name="submit">Create New Data Map</button>

        </div>

код запроса 

var ajax_url = "<?php echo APPURL;?>/ajax.php" ;

$(document).on('click', '.submitBtn', function(event) {


var datamapname = $('#inputName').val();
var description = $('#inputDescription').val();


var data_obj= 
        {
            call_type:'new_row_entry_vdm',
            datamapname:datamapname,
            description:description 

        };  


        $.post(ajax_url, data_obj, function(data) 
        {
            var d1 = JSON.parse(data);
            location.href=location.href;


            if(d1.status == "error")
            {

                 $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
            }
            else if(d1.status == "success")
            {
            $('#inputName').val('')
            $('#inputDescription').val('')

            location.href=location.href;

            }   
}

AJAX-код 

//--->new row entry for viewdatamap > start
if(isset($_POST['call_type']) && $_POST['call_type'] =="new_row_entry_vdm")
{   

$row_id     = substr(md5(microtime()),rand(0,30));
$datamapname    = app_db()->CleanDBData($_POST['datamapname']);  
$description    = app_db()->CleanDBData($_POST['description']); 



$newrowvdm = app_db()->select("select * from viewdatamap where 
row_id='$row_id'");
if($newrowvdm < 1) 
{

    $strTableName = "viewdatamap";

    $insert_arrays = array
    (

        'row_id' => $row_id,
        'datamapname' => $datamapname,
        'description' => $description

    );

    //Insert into viewdatamap.
  app_db()->Insert($strTableName, $insert_arrays);
}

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

PS Игнорировать функцию app_db внутри кода ajax;это не имеет ничего общего с проблемой, с которой я сталкиваюсь.

Ответы [ 2 ]

0 голосов
/ 29 декабря 2018

из комментария я вижу, что у вас ошибка

Uncaught ReferenceError: $ не определено

это потому, что отсутствует jQuery, добавьте эту строку перед </head>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

теперь вы можете отправить форму, используя Ajax, но ваш скрипт недействителен 

$.post(ajax_url, data_obj, function(data) {
  var d1 = JSON.parse(data);
  location.href = location.href;  <-- here

Он обновит страницу, независимо от того, success или error и здесьфиксированный код 

var ajax_url = "<?php echo APPURL;?>/ajax.php";

$(document).on('click', '.submitBtn', function(event) {

  var datamapname = $('#inputName').val();
  var description = $('#inputDescription').val();

  var data_obj = {
    call_type: 'new_row_entry_vdm',
    datamapname: datamapname,
    description: description
  };

  $.post(ajax_url, data_obj, function(data) {
    var d1 = JSON.parse(data);
    if (d1.status == "success") {
      // its good reload the page
      location.href = location.href;
    }
    else {
      // its error, reset the input?
      $('#inputName').val('')
      $('#inputDescription').val('')
      $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
    }
  })
})
0 голосов
/ 29 декабря 2018

Вам нужно заключить вашу модальную логику в событие shown.bs.modal, а затем искать поля внутри вашего модального окна при нажатии кнопки ajax. 

$('.modal-body').on('shown.bs.modal', function() { // when modal is opened

  var modal = $(this);
  var btnSubmit = modal.find('button.submitBtn');

  var ajax_url = "<?php echo APPURL;?>/ajax.php";

  btnSubmit.on('click', function(event) {

    event.preventDefault(); // prevent form submit

    var datamapname = modal.find('#inputName').val();
    var description = modal.find('#inputDescription').val();


    var data_obj = {
      call_type: 'new_row_entry_vdm',
      datamapname: datamapname,
      description: description

    };


    $.post(ajax_url, data_obj, function(data) {
      var d1 = JSON.parse(data);
      location.href = location.href;


      if (d1.status == "error") {

        $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
      } else if (d1.status == "success") {
        $('#inputName').val('')
        $('#inputDescription').val('')

        location.href = location.href;

      }

    })

  })

})
...