Dev Faq
3
votes

Laravel: Soumettez les champs de formulaire générés dynamiquement

J'essaye de soumettre un formulaire qui a des champs générés dynamiquement au contrôleur en utilisant Ajax. C'est comme une facture. Il y a des champs date, client, sous-total, taxe et ttl qui sont permanents (en-tête de facture). Ensuite, il y a n nombre de champs de formulaire générés dynamiquement (lignes de facture). Voici le html généré dynamiquement. Chaque champ de saisie a des noms et des identifiants distincts. 

function createData(){
    var date = document.getElementById('date').value;
    var customer = document.getElementById('customer').value;
    var sub_ttl = document.getElementById('sub_total').value;
    var tax = document.getElementById('tax').value;
    var ttl = document.getElementById('ttl').value;
}

Champs permanents HTML 

        <div class="form-group">
            <label for="date">Date</label>
            <input type="text" class="form-control" id="date" name="date" placeholder="00/00/0000"></input>
        </div>
        <div class="form-group">
            <label for="customer">Customer</label>
            <select class="form-control" id="customer">
                @foreach($customers as $customer)
                    <option value="{{$customer->id}}">{{$customer->name}}</option>
                @endforeach
            </select>
        </div>

        <div class="card p-3">
            <table>
            <tr>
                <td class="h5">SUB TOTAL</td>
                <td class="h5 text-right pr-3">AED</td>
                <td><input type="text" class="form-control text-right" id="sub_total"placeholder="00.00" value="0.00" readonly></input></td>
            </tr>                   
            <tr>
                <td class="h5">VAT</td>
                <td class="h5 text-right pr-3">AED</td>
                <td><input type="text" class="form-control text-right" id="tax" placeholder="00.00" value="0.00" readonly></input></td>
            </tr>                       
            <tr>
                <td class="h5">TOTAL</td>
                <td class="h5 text-right pr-3">AED</td>
                <td><input type="text" class="form-control text-right" id="ttl" placeholder="00.00" value="0.00" readonly></input></td>
            </tr>
        </table>                        
    </div>

Le javascript est ici est déclenché par un clic de bouton: 

<tbody id="list">
    <tr>
        <td>
            <input name="sku1" id="sku1" readonly="" type="text" value="K5693">
        </td>
        <td>
            <input name="name1" id="name1" readonly="" type="text" value="HANDLEBAR">
        </td>
        <td>
            <input name="rate1" id="rate1" readonly="" type="text" value="45.00">
        </td>
        <td>
            <input name="qty1" id="qty1" readonly="" type="text" value="2">
            </td>
        <td>
            <input name="disc1" id="disc1" readonly="" type="text" value="0">
        </td>
        <td>
            <input name="ttl1" id="ttl1" readonly="" type="text" value="90.00">
        </td>
        <td class="text-center">
            <a onclick="removeField(this)"><i class="fas fa-trash-alt"></i></a>
        </td>
    </tr>
    <tr>
        <td>
            <input name="sku2" id="sku2" readonly="" type="text" value="K5693">
        </td>
        <td>
            <input name="name2" id="name2" readonly="" type="text" value="HANDLEBAR">
        </td>
        <td>
            <input name="rate2" id="rate2" readonly="" type="text" value="45.00">
        </td>
        <td>
            <input name="qty2" id="qty2" readonly="" type="text" value="2">
        </td>
        <td>
            <input name="disc2" id="disc2" readonly="" type="text" value="10">
        </td>
        <td>
            <input name="ttl2" id="ttl2" readonly="" type="text" value="80.00">
        </td>
        <td class="text-center">
            <a onclick="removeField(this)"><i class="fas fa-trash-alt"></i></a>
        </td>
    </tr>
</tbody>

J'ai commencé par obtenir des valeurs à partir de champs permanents. Je ne sais pas comment collecter les valeurs d'un nombre n de champs générés dynamiquement et les transmettre au contrôleur. J'ai passé en revue de nombreux articles à ce sujet, je ne suis pas en mesure de le comprendre. Avez-vous de l'aide s'il vous plaît?

0 commentaires

3 Réponses :

-1
votes

Tout ce dont vous avez vraiment besoin, c'est d'un moyen de sérialiser l'ensemble du formulaire.

Voici comment le faire avec jQuery:

https://api.jquery.com/serialize/

Voici comment procéder avec du Javascript brut:

Sérialiser le formulaire HTML en JSON avec du JavaScript pur < / p>

0 commentaires
3
votes

Vous devrez faire quelque chose comme ceci: 

$skus = request('skus');
$names = request('names');
...
for($i = 0 ; $i < count($skus) ; $i++)
 {
   $sku = $skus[$i];
   $name = $names[$i];
   ...
 }

Ensuite, dans votre contrôleur, vous pourrez obtenir toutes les valeurs comme celle-ci:

XXX

6 commentaires

Je ne sais pas pourquoi cette baisse a été votée. Cette méthode fonctionne. Up voté. Mais j'en ai besoin en utilisant AJAX. Pas de manière standard de soumettre un formulaire.

désolé je ne l'ai pas encore craqué. J'utilise actuellement le formulaire de soumission normal.

Hii @JuanCarlosIbarra. Je sais que je suis trop tard pour regarder ça. Mais je veux demander quelque chose. Lorsque j'ai essayé votre réponse, l'erreur apparaît avec le message Erreur d'analyse: erreur de syntaxe, 'i' inattendu (T_STRING), en attendant ';' juste sur le pour (int i = 0; i . Pouvez-vous m'aider à résoudre cette erreur s'il vous plaît

Mon erreur @BariqDharmawan J'ai utilisé Java au lieu de PHP devrait être comme ceci for ($ i = 0; $ i

c'est honnêtement la meilleure réponse que j'ai vue sur le sujet. Cela fonctionne particulièrement pour moi car je dois le faire en mettant à jour des enregistrements existants, pas simplement en en créant de nouveaux comme chaque tutoriel sur Internet veut montrer des exemples. Il est facile de lancer une fonction find () là-dedans et d'obtenir la ligne que je dois modifier, puis de la sauvegarder en utilisant cette méthode

OK, récemment, je travaillais aussi avec cette méthode. Mais j'ai une question, comment pouvons-nous valider les données à l'aide de cette méthode et si la validation échoue, Laravel va rediriger et comment pouvons-nous maintenir les champs que?

0
votes

Modifiez votre code comme ci-dessous. Placez

et bouton d'envoi où vous le souhaitez. 

 public function create(Request $request){
    if($request->ajax())
    {
     $skus= $request->skus;
     $names= $request->names;
     $rates= $request->rates;
     $qtys= $request->qtys;

     for($count = 0; $count < count($skus); $count++)
     {
      $data = array(
       'skus' => $skus[$count],
       'names'  => $names[$count],
       'rates'  => $rates[$count],
       'qtys'  => $qtys[$count]
      );

      $insert_data[] = $data; 
     }

     Invoice::insert($insert_data);

     return response()->json([
      'success'  => 'Invoice Saved Successfully!'
     ]);
    }
}

<form id ="invoice_form">
<tbody id="body">
<tr>
    <td>
        <input name="skus[]"readonly="" type="text" value="K5693">
    </td>
    <td>
        <input name="names[]" readonly="" type="text" value="HANDLEBAR">
    </td>
    <td>
        <input name="rates[]" readonly="" type="text" value="45.00">
    </td>
    <td>
        <input name="qtys[]" readonly="" type="text" value="2">
        </td>
    <td>
        <input name="discs[]" readonly="" type="text" value="0">
    </td>
    <td>
        <input name="ttls[]" readonly="" type="text" value="90.00">
    </td>
    <td class="text-center">
        <a onclick="removeField(this)"><i class="fas fa-trash-alt"></i></a>
    </td>
</tr>
</tbody>

  <button type="submit" class="btn btn-success"><i class="fas fa-download"></i> Save</button>
  
</form>

//submit opening invoice data
        $('#invoice_form').on('submit', function(event){
            event.preventDefault();
            $.ajax({
                url:"put your url",
                method:'post',
                data:$(this).serialize(),
                dataType:'json',
                success:function(data)
                {
                    //do whatever you want
                }
            })
    });

0 commentaires

Articles qui pourrait vous intéresser :

Pourquoi est-ce que j'obtiens une erreur laravel lors de la création d'un nouveau projet?
Select2 ne s'affiche pas correctement dans le mode bootstrap
Laravel Echo n'écoute pas
La validation de la demande de formulaire ne fonctionne pas. Il charge juste la page d'accueil dans Postman