Form submission problem

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.

Have you checked the browser console to see if there are any errors?

In most browsers you can get to the browser console by pressing either ctrl + shift + i or F12

No, the request isn’t being sent.

I was more talking about the “Console” tab to see if there are any javascript errors thrown there.

No, there aren’t any thrown errors either.

How are you verifying this? (“There is no row entered into the DB” is not verifying that no request was sent.)

Your jquery code seems to be expecting a response JSON. Your ajax does not appear to be providing one.

check

I’m using this to check. If a new row is added, I should see another name appearing.

and where on your page is the modal html vs the jquery?

jquery is below the html, just after the ending

tag for modal-footer

So if you inspect the button, the Event Listeners tab shows a Click event aligned to a line in the current file and tagged to object document?

Okay I’ve gotten it to work. Apparently it’s because I reloaded the page regardless of whether it’s an error or success, which was why nothing was sent. Correct code is here:

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") {
      // Reload the page if succeeds
      location.href = location.href;
    }
    else {
      // Reset output if it fails.
      $('#inputName').val('')
      $('#inputDescription').val('')
      $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
    }
  })
})
2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.