Question

我有一个模态形式，它允许用户向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>

jquery代码

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

当我单击“创建新数据映射”并且不确定原因时，表单没有提交。

P.S忽略ajax代码中的app_db函数；与我面临的问题无关。

Answer 1

您需要将模态逻辑包装到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;

      }

    })

  })

})

Answer 2

从评论中我看到您有错误

未捕获的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>');
    }
  })
})

模式表单未将用户输入提交数据库

2 个答案: