Content API - JSON & Binary Submit - Documentation topics on: binary,contentletapi,json,submit content,.

Content API - JSON & Binary Submit

Here is an example of a form that will perform both a simple post and a JSON submit:

<script type="text/javascript" src="//dotcms.com/documentation/demo/jquery.datetimepicker.js" type="text/javascript"></script>
<link rel="stylesheet" href="//dotcms.com/documentation/demo/jquery.datetimepicker.css">

<script type="text/javascript">
$(function () {
      $('#sysPublishDate').datetimepicker({
        format:'m/d/Y h:i A'});
});
</script>

<script type="text/javascript">
  $(document).ready(function() {
    $("#myPost").submit(function(e) {
   $.ajax({
        url: '/api/content/save/1',
        type: 'POST',
        cache:false,
        data: dataObj,         

        success: function(data,status,xhr) {
        console.log("works!");
        window.location="/demos/form-success.html";

        },
        error: function(data,status,xhr) {
        $('requestBtn').attr('disabled', false);
        $('requestBtn').prop('disabled', false);
        $( "button" ).removeClass( "disabled" ).addClass( "btn-primary" );
        console.log(data);
        alert("Uh Oh, your request failed. Please check your entries and try again");
        },
      });
    });
 });
</script>

<form id="webup" action="/api/content/save/1" method="POST" enctype="multipart/form-data" id="myPost">
    <input type="hidden" id="stName" name="stName" value="News"/>
    <input type="hidden" id="hostfolder" name="hostfolder" value="demo.dotcms.com">
    <input type="hidden" id="urlTitle" name="urlTitle" value="TempURLTitle"/>

    <div class="form-group">
        <label for="title" class="required">Title</label>
        <input type="text" class="form-control" id="title" name="title" value="Sample News Article Title">
    </div>
    
    <div class="form-group">
        <label for="sysPublishDate" class="required">Publish Date</label>
        <input type="text" class="form-control" id="sysPublishDate" name="sysPublishDate">
    </div>
    
    <div class="form-group">
        <label for="byline" class="required">Byline</label>
        <input type="text" class="form-control" id="byline" name="byline" value="Sample byline text">
    </div>

    <div class="form-group">
        <label for="story" class="required">Story</label>
        <textarea id="story" name="story">Here is some story text</textarea>
    </div>

    <div>
        <label for="image">Image File</label>
        <input name="image" id="image" type="file" />
    </div>

    <br>&nbsp;<br>&nbsp;
    <div class="form-group">
        <input type="submit" value="Submit"/>
        <input type="button" value="JSON Submit" onclick="sendRequest();" />
    </div>
</form> 


<script type="text/javascript">
    function sendRequest () {
        var formData = new FormData();

        var title = document.getElementById("title").value;
        var sysPublishDate = document.getElementById("sysPublishDate").value;
        var byline = document.getElementById("byline").value;
        var story = document.getElementById("story").value;
        var hostfolder = document.getElementById("hostfolder").value;
        var urlTitle = document.getElementById("urlTitle").value;

        var json={'title': title,
              'sysPublishDate': sysPublishDate,
              'byline': byline,
                    'story': story,
                    'urlTitle': urlTitle,
                    'hostfolder': hostfolder,
                    'stName':'News'};

        formData.append('json',JSON.stringify(json));
        formData.append("image", document.getElementById('image').files[0]);

        var request = new XMLHttpRequest();
        request.open("POST", "/api/content/save/1");
        request.setRequestHeader("DOTAUTH", window.btoa("admin@dotcms.com:admin"));
        request.send(formData);
        document.location='http://localhost:8080/demos/form-success.html';
    }

</script>