Salvare dati in DB al submit del form con ajax

[banart]

Ciao a tutti, mi chiamo Matteo e questo è il mio primo post su Laravel Italia.
Premetto che mi sto cimentando da poco con Laravel, parto dalla 5.4, tutto molto affascinante ma molto complicato per me.

Veniamo al dunque, il problema è il seguente:

Ho un form che al submit deve portarmi al pagamento con PayPal, ma prima di andare su PayPal devo salvare i data in DB.

Da quello che ho trovato tra le varie ricerche, la soluzione è Ajax, così ho impostato il tutto come segue:

Questa è la mia view: create.blade.php

{!! Form::open(['url' => 'https://www.paypal.com/cgi-bin/webscr', 'files' => true]) !!}

    // Dati per PayPal
    {{ Form::hidden('cmd', '_xclick') }}
    {{ Form::hidden('business', 'xxxx-facilitator@xxxx.it') }}
    {{ Form::hidden('item_name', 'Name item') }}
    {{ Form::hidden('currency_code', 'USD') }}
    {{ Form::hidden('amount', '1.00') }}
    {{ Form::hidden('no_shipping', '1') }}

    // Dati da salvare in DB
    {{ Form::text('name', null, ['class' => 'form-control j-field-name', 'required']) }}
    {{ Form::text('url', null, ['class' => 'form-control j-field-url', 'required']) }}
    {{ Form::file('image',['class'=>'j-field-image','id'=>'inputImage']) }}
    {{ Form::text('amount', null, ['class' => 'form-control j-field-amount', 'required']) }}

    {!! Form::button('GO', ['type' => 'submit','id' => 'submitform', 'class'=>'btn']) !!}

{!! Form::close() !!}

<script>
    var apiSaveDataForm = '{{ action('BannerController@saveDataForm') }}';
</script>

Ho aggiunto la variabile per l'azione nel controller apiSaveDataForm
--
Queso è il file js: app.js

$(document).ready(function(){

    $('#submitform').on('submit', function () {

        var $v_name = $('.j-field-name').val();
        var $v_url = $('.j-field-url').val();
        var $v_image = $('.j-field-image').val();
        var $v_amount = $('.j-field-amount').val();
        $v_amount = $v_amount.replace(/^0+/, '');

        $.post(apiSaveDataForm, {
            name:$v_name,
            url:$v_url,
            image:$v_image,
            amount:$v_amount
        });
    });

});

Recupero i dati dal form e li passo in post al controller (dubbio sulla virgola come separatore)
--
Questo è il controller: BannerController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Auth;
use App\Sponsor;
use App\Amount;

class BannerController extends Controller
{

    public function saveDataForm(Request $request)
    {
        $user = Auth::user();
           
        $sponsor = new sponsor;
        $sponsor->user_id = $user->id;
        $sponsor->name = $request->name;
        $sponsor->url = $request->url;
        $sponsor->total = $request->amount;

        $sponsor->save();
    }
}

?>

In fine ho aggiunto in routes/api.php la seguente riga

Route::post('/banner/savedataform', 'BannerController@saveDataForm');

Questi sono tutti i file che ho modificato/creato

Ora, per la dinamica Ajax mi sono basato su un'altra chiamata che all'interno del progetto funziona bene (ma come chiamata per restituire un dato asincrono da DB), ma probabilmente, sicuramente, ho fatto diversi errori in quanto al submit va regolarmente su PayPal per il pagamento, ma niente salvataggio in DB.

Qualcuno potrebbe aiutarmi?
Graziegrazie

ps: se servono maggiori info chiedete pure
Graziegraziegrazie

[ltwd86]

Ciao banart,
fondamentalmente è colpa del submit.

A mio parere ti consiglierei di fare in questo modo:

• Non utilizzare il submit ma un pulsante di tipo button
• nel js scrivere nel modo seguente:
  $('#submitform').click(fuction(e) {
  /*
  recupera variabili della form (come prima).
  esegui il $.post. Al "success" o al "complete" della chiamata fai partire la chiamata a paypal.
  */
  });

NOTA: nel caso in cui tu non possa utilizzare un pulsante di tipo button ma tu debba per forza utilizzare un "submit" scrivi così:
$('#submitform').click(fuction(e) {
e.preventDefault()
[...]
});

Ciao, ciao

[banart]

Ciao ltwd86!!! Grande, grazie per l'aiuto.
Solo che non va ...o meglio, lo script così come mi hai suggerito è perfetto, ma mi va in FAIL a causa del controller.

Questo è il JS (app.js):

$('#submitform').click(function(e){
	e.preventDefault();

	var $v_name = $('.j-field-name').val();
	var $v_url = $('.j-field-url').val();
	var $v_image = $('.j-field-image').val();
	var $v_amount = $('.j-field-amount').val();
	$v_amount = $v_amount.replace(/^0+/, '');

    	$.post(apiSaveDataForm, {
    		name:$v_name,
    		url:$v_url,
    		image:$v_image,
    		amount:$v_amount,
    	}).done(function(){
    		console.log('ok!');
    	}).fail(function(){
    		console.log('ko?');
    	});
});

Il metodo che uso nella classe del controller è il seguente:

public function saveDataForm(Request $request)
    {
        $user = Auth::user();            // PROBLEMA
           
        $sponsor = new sponsor;
        $sponsor->user_id = $user->id;   // PROBLEMA
        $sponsor->name = $request->name;
        $sponsor->url = $request->url;
        $sponsor->total = $request->amount;

        $sponsor->save();                // PROBLEMA
    }

Quando commento le tre righe con // PROBLEMA il JS funziona, altrimenti FAIL

Non riesco proprio a capire...

[ltwd86]

Ma l'errore è un errore 500?
Ti consiglio di .fail(function( jqXHR, textStatus, errorThrown){
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
});

[banart]

Trovato l'arcano!! (In realtà l'ha trovato il mio collega )
Riporto la soluzione eventualmente per i posteri...

Ajax non mantiene una sessione di default, quindi ho riportato le seguenti 3 righe all'interno di 'api' nel file http/kernel.php

\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,

ltwd86 grazie tantissime per l'aiuto, sei stato gentilissimo!! Questo è molto stimolante ...per chiedere ancora AHAHAHA

[ltwd86]

Di nulla,
comunque gentilissima

ciao, ciao

[banart]

Eh ma hai Sheldon Cooper come avatar, m'ero confuso

Comunque ho ancora un problema...

Nel form c'è anche un upload dell'immagine, e se il form non viene "submittato" normalmente, giustamente non me la carica...

Che faccio? Creo un altro form nascosto e al click faccio un submit anche a quello copiando il dato? Oppure c'è un sistema più elegante tramite ajax?

[ltwd86]

Guarda sei solo molto, molto fortunato perché sono incappata in questo problema giusto 1 mese fa.

How to use FormData for ajax file upload

vedi la 1^ risposta

[ltwd86]

Ah ... lato php poi non so come gestisca la cosa perché io lavoro in C# normalmente

Laravel lo sto studiando per hobby

[banart]

Ottimo!! Grazie mille!!
Lo sto provando ora:

$.ajax({
	name:$v_name,
	link:$v_url,
	image:$v_image,
	amount:$v_amount,
	url: apiSaveDataForm,
	type: "POST",
	data: new FormData(this),
	contentType: false,
	cache: false,
	processData:false,
}).done(function(){
	console.log($v_name);
	console.log($v_url);
	console.log($v_image);
	console.log($v_amount);
	console.log($file_data);
}).fail(function(){
	console.log('file NOT uploaded');
});

Continua a darmi errore eh, ma vediamo di fare un po' di prove
Grazie ancora per il tuo aiuto

[ltwd86]

Non so se hai copiato male ma dentro al metodo $.ajax non devi mettere name, link image, amount .
Inoltre anche il parametro che passi a data non mi sembra corretto.

Comunque fammi sapere se e quando ti funziona

Ciao

[banart]

Ciao Laura!
Scusa il ritardo con il quale ti rispondo.
Alla fine ho bypassato il problema. Ho usato un normale form che si interfaccia con il controller per salvare i dati in db, e al submit, via jQuery, faccio un ulteriore submit al secondo form che punta a PayPal.

Ora però per provare PayPal stavo caricando il progetto online, ma non ci sto capendo molto... e on-line non riesco a trovare una guida per un normale server di quelli base base (es: Netsons), ma per questo ora apro una nuova discussione per ordine. Grazie ancora