Bdtjtk

I have a modal form which allows user to add a new row to a table on a PHP webpage, then refreshes the page.

I've tried the following to no avail:

modal html code

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

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 code

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

}

The form doesn't submit when I click on "Create New Data Map" and I'm not sure why.

P.S Ignore the app_db function inside the ajax code; it has nothing to do with the problem I'm facing.

from the comment I see that you have error

Uncaught ReferenceError: $ is not defined

it is because missing jQuery, add this line before the </head>

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

now you can submit the form using Ajax but your script is invalid

$.post(ajax_url, data_obj, function(data) {

  var d1 = JSON.parse(data);

  location.href = location.href;  <-- here

It will refresh the page no matter if it success or error and here fixed code

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

    }

  })

})

You need to wrap your modal logic into the shown.bs.modal event and then search for the fields inside your modal when the ajax button is clicked.

$('.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;



      }



    })



  })



})