Data from html disappears and doesn't not post using rest api call. When submit button is selected the form clears and data is not submitted

Question

I have a basic HTML form that submits data to a SharePoint list. There are no errors in the code, nor do I receive anything that would cause the form not to submit to the SharePoint list. I am using basic HTML, some CSS, and AngularJS. The angular code uses a basic rest api call to post the data when the button is selected.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
    <link rel="stylesheet" href="calendar.css">
    <!-- <title>Document</title> -->
</head>
<body>

    <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="form-container">
          <h2 class="text-center" style="font-weight: bold;">Tour Request Form</h2>
          <form action="#" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <div ng-controller="calendarController as calendar">
              <label for="tourRequest">Tour Request</label>
                    <input type="text" class="form-control" id="tourRequest" name="tourRequest" required>
                    <input class="btn-primary" type="submit" value="add">


            </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    </div>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="calendar.js"></script>
</body>
</html>

angular.module('mcalendarapp', [])
  .controller('myController', function($scope, $http) {
    $scope.newItem = {
      Title: $scope.tourRequest, // Example: A field in your SharePoint list
     // Description: '' // Example: Another field
    };

    $scope.addItem = function() {
      var listName = 'TourRequest'; // Replace with your list name
      var apiUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('" + listName + "')/items";

      var dataPayload = {
        '__metadata': {
          'type': 'SP.Data.' + listName + 'ListItem' // Adjust if your list name has spaces or special characters
        },
        'Title': $scope.newItem.Title,
       // 'Description': $scope.newItem.Description
      };

      $http({
        method: 'POST',
        url: "/_api/web/lists/getByTitle('mylist')/items",
        headers: {
          'Accept': 'application/json; odata=verbose',
          'Content-Type': 'application/json; odata=verbose',
          'X-RequestDigest': jQuery('#__REQUESTDIGEST').val() // Get the request digest
        },
        data: JSON.stringify(dataPayload)
      }).then(function(response) {
        // Success handling
        alert('Item added successfully!');
        $scope.newItem = {}; // Clear the form
      }).catch(function(error) {
        // Error handling
        console.error('Error adding item:', error);
        alert('Failed to add item. Check console for details.');
      });
    };
  });

Assistance with code and reasoning behind the api call failing

You've described the things that don't appear (no errors, etc) but you haven't described or shown what does happen when you attempt to use your code. Adding that to the question (or better yet, reformatting your example into a runnable Snippet) will make it much easier for folks to answer your question! — Neill
– Neill, Commented Sep 30 at 18:32
I'm not familiar with angularjs, but I'm not seeing anything here that prevents your form from the standard submit, which would submit to the original page. — mykaf
– mykaf, Commented Sep 30 at 19:08
For the code above to do something, this page needs to be hosted in the SharePoint (and have .aspx extension, presumably, not .html). Is this page hosted in the SharePoint? — Nikolay
– Nikolay, Commented Sep 30 at 19:26

Bola Nabil · Accepted Answer · 2025-10-01 10:17:12Z

Your HTML does not have ng-app="mcalendarapp"

Fix: Replace it with Angular’s ng-submit or bind the button with ng-click:

API URL mismatch

all code after edits

<!DOCTYPE html>
<html lang="en" ng-app="mcalendarapp">
<head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body ng-controller="myController">

  <div class="container">
    <h2>Tour Request Form</h2>
    <form ng-submit="addItem()">
      <div class="form-group">
        <label for="tourRequest">Tour Request</label>
        <input type="text" id="tourRequest" ng-model="newItem.Title" class="form-control" required>
      </div>
      <button type="submit" class="btn btn-primary">Add</button>
    </form>
  </div>

  <script>
    angular.module('mcalendarapp', [])
    .controller('myController', function($scope, $http) {
      $scope.newItem = { Title: '' };

      $scope.addItem = function() {
        var listName = 'TourRequest'; // Adjust to your list name
        var apiUrl = _spPageContextInfo.webAbsoluteUrl + 
          "/_api/web/lists/getByTitle('" + listName + "')/items";

        var dataPayload = {
          '__metadata': { 'type': 'SP.Data.TourRequestListItem' },
          'Title': $scope.newItem.Title
        };

        $http({
          method: 'POST',
          url: apiUrl,
          headers: {
            'Accept': 'application/json; odata=verbose',
            'Content-Type': 'application/json; odata=verbose',
            'X-RequestDigest': jQuery('#__REQUESTDIGEST').val()
          },
          data: JSON.stringify(dataPayload)
        }).then(function(response) {
          alert('Item added successfully!');
          $scope.newItem.Title = ''; // clear form
        }).catch(function(error) {
          console.error('Error adding item:', error);
          alert('Failed to add item. Check console.');
        });
      };
    });
  </script>
</body>
</html>

Collectives™ on Stack Overflow

Data from html disappears and doesn't not post using rest api call. When submit button is selected the form clears and data is not submitted

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related