Response of a submit form is adding < pre > to json

this one helps. If you want to get the response in a callback, you can't post the form. Posting the form means that the response is loaded as a page. You have to get the form data from the fields in the form and make an AJAX request.
Example:

$(function(){
  $('form[name=new_post]').submit(function(){
    $.post($(this).attr('action'), $(this).serialize(), function(json) {
      alert(json);
    }, 'json');
    return false;
  });
});

I hope this helps . Finally, it was impossible for me to get to work the form.submit() of ExtJs. I needed an implementation using Ext. And since this is a frequent pattern in my application, it is important to have a short an simple solution.
This is what I finally found (I have a modal window containing the form):

var values = me.up('form').getValues(),
panel = Ext.create('My.view.MyPanel', {
    xtype: 'panel',
    loader: {
        url: Paths.ajax + 'sav_vpc/douane.php',
        method: 'get',
        params: values,
        autoLoad: true
    }
});
me.up('window').close()

should help you out I am not front end developer and I'm spending a quite time trying to do so. Hope you guys can help me. I have a form which sends files to an API in server, like below: , You can use jquery form handler as,

<script>     

    // Attach a submit handler to the form 
  // Attach a submit handler to the form 


$("#uploadForm").submit(function(event) {

    var formData = new FormData();
    formData.append("uploadFiles", $('[name="file"]')[0].files[0]);
    event.stopPropagation();
    event.preventDefault();
    $.ajax({
      url: $(this).attr("action"),
      data: formData,
      processData: false,
      contentType: false,
      type: 'POST',
      success: function(data) {
        alert(data);
        loadFiles()
      }
    });
    return false;
  });

    </script>

To fix the issue you can do So basically, i have two forms: , This is what fixed this issue:
HTML CODE:

<form id="form1" oninput="inputFunction()>
<input type="text" name="firstname"/>
<input type="text" name="lastname"/>
</form>

<form id="form2" method="POST" action="http://some.url.com">
<input type="hidden" name="school" value="Random school"/>
<input type="hidden" name="year" value = "Random year"/>
<input type="hidden" name="placeforJSON" id="json">
<input type="submit">
</form>

function toJSONString(form) {
    var obj = {};
    var elements = form.querySelectorAll( "input, select, textarea" );
    for( var i = 0; i < elements.length; ++i ) {
        var element = elements[i];
        var name = element.name;
        var value = element.value;

        if( name ) {
            obj[ name ] = value;
        }
    }
    return JSON.stringify(obj);
}

function inputFunction() {
  var form = document.getElementById("form1");
  var json = toJSONString(form);
  document.getElementById('json').value = json;
}

wish help you to fix your issue I have a simple HTML form like this: , you just use ajax method of js

function r_submit() {
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "https://www.THIS IS MY URL.php", true);
var params = {"player":document.getElementById("player").value};
xhttp.send(params);
xhttp.onload = function() {
    alert(xhttp.responseText);
}
} 

 <div class="border-little text-center grey">
                <input name="player" id="player" value="1" class="hidden">
                <label for="number">Enter a number</label>
                <input type="text" id="number" name="number" placeholder="">
                <input type="submit" value="Submit" onsubmit='r_submit()'>
            </form>
        </div>