Ajax call doesn't load on the same page

Hi
I’m trying to submit a form using ajax and php. I get the json result back but it does load it into the form action link, can someone help me please to load tre callback into my html page?

This is my HTML form

<form id="requestReceipts" action="../km-client-controllers/km-ctrl-client-ricevute.php" method="POST">
              <div class="form-row">
                <div class="form-group col-md-3">
                  <label for="startDate">Data di inizio ricevuta</label>
                  <input type="text" class="form-control air-datepicker" data-date-format="dd/mm/yyyy" data-language='en' placeholder="Data di inizio" id="startDate" name="startDate">
                </div>
                <div class="form-group col-md-3">
                  <label for="endDate">Data di fine ricevuta</label>
                  <input type="text" class="form-control air-datepicker" data-date-format="dd/mm/yyyy" data-language='en' placeholder="Data di fine" id="endDate" name="endDate">
                </div>
              </div>

              <button type="submit" class="btn btn-primary" onclick="showRicevute();">Mostra ricevute</button>
</form>

This is my ajax call

function showRicevute() {

        var startDate= $('#startDate').val();
        var endDate= $('#endDate').val();
        var form= $('#requestReceipts');

        $.ajax({

          url: form.action,
          type: form.method,
          data: $(form).serialize(),
          dataType: 'json',

          success: function(resp){

            datas = JSON.parse(resp);

            console.log(resp);
   
          },

          error: function(xhr, resp, text) {
            console.log(xhr, resp, text);
          }


        });

      }

This is my PHP file, it does a curl request to a API and return a json object

session_start();

header('Content-Type: application/json');

if ($_SERVER["REQUEST_METHOD"] == "POST") {

	$startDate = $_POST['startDate'];
	$endDate = $_POST['endDate'];


	$dates = array(
	    'd_inizio' => $startDate,
	    'd_fine' => $endDate
	);

	$url = "https://www.apiwebsite.com/api/ricevute.jsp?";
		if (!isset($_SESSION['cookiefile'])) {
		    die("no cookie file");
		}
	$cookie = "../../km-controllers/" . $_SESSION['cookiefile'];

	$ch = curl_init ($url);
	curl_setopt($ch, CURLOPT_POST, 1);
	curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($dates));
	curl_setopt ($ch, CURLOPT_COOKIEFILE, $cookie); 
	curl_setopt ($ch, CURLOPT_RETURNTRANSFER, true);
	$output = curl_exec ($ch);

	echo $output;

}

Can you show a sample JSON response? Also I’m not sure I understand what you mean by “load it into the form action link”.

Assuming datas = JSON.parse(resp) is a valid JSON object, and you just want to replace the users original values with the values returned by the server, then in that success callback all you should need to do is something like:

$.ajax({
  //...
  success: function (resp) {
    data = JSON.parse(resp)
    // Replace data['startDate'] and data['endDate'] with the actual JSON property names
    $('#startDate').val(data['startDate']);
    $('#endDate').val(data['endDate']);
  },
  //...
})

Hi thanks for your answer, sorry if the question wasn’t really clear, I’ve managed to sort it out using

preventDefault();

How can I check if is a valid JSON object?

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