動的Javascriptフォームが動作しない

ajaxを介してproceder.phpに情報を送信するために、担当者のフォームを送信して動的に作成するためのソリューションが必要です。動的Javascriptフォームが動作しない

まず、ボートン「Nuevo Concepto」をクリックする必要があります。追加する行の「Editar」をクリックする必要があります。 http://api.jquery.com/jquery.ajax/

あなたが編集フォームを提出した後、AJAXを使用する場合は、のようなものを追加します。すると、フォームが動作しない正しく提出現れること

<html> 
    <head> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script> 
     $(document).ready(function() 
     { 
      $("#cargardatos").on('click', function() 
      { 
       var fragment = "<tr data-id='0'><td>Arandano</td><td>5</td><td>6</td><td>7</td><td><span class='editar' onclick='transformarEnEditable(this)'>Edit</span></td></tr>"; 
       $(".Tabla").append(fragment); 
      }); 

      $('#userinfo').submit(function() 
      { 
       var a = $(this).attr('action'); 
      }); 
     }); 

     function transformarEnEditable(nodo) 
     { 
      var nodoTd = nodo.parentNode; //Nodo TD 
      var nodoTr = nodoTd.parentNode; //Nodo TR 
      var dataid = $(nodoTr).attr("data-id"); 
      var nodosEnTr = nodoTr.getElementsByTagName('td'); 

      var concepto = nodosEnTr[0].textContent; 
      var precio = nodosEnTr[1].textContent; 
      var cantidad = nodosEnTr[2].textContent; 
      var total = nodosEnTr[3].textContent; 

      var nuevoCodigoHtml = "<form name='userinfo' id='userinfo' action='envio.php'><p>Nombre: <input type='text' name='nombre'/></p><p>Precio: <input type='text' name='precio'/></p><button type='button' class='btn btn-default' data-dismiss='modal'>Cerrar</button><input type='submit' class='btn btn-success' name='SubmitButton'></form>"; 
      nodoTr.innerHTML = nuevoCodigoHtml; 
     } 

     function submitForm() 
     { 
      document.theForm.submit(); 
     } 
    </script> 
    </head> 

    <body>  
    <table class="tabla"> 
     <thead> 
      <tr> 
       <th>Concepto</th> 
       <th>Precio</th> 
       <th>Cantidad</th> 
       <th>Total</th> 
       <th>Opciones<button id="cargardatos" class="btn btn-success">Nuevo Concepto</button></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <form action="proceder.php" method="post" onreset="anular()"> 
       <td><input type="text" name="concepto" value="" size="10"></td> 
       <td><input type="text" name="precio" value="" size="5"</td> 
       <td><input type="text" name="cantidad" value="" size="5"</td> 
       <td><input type="text" name="total" value="" size="5"</td> 
       <td><input class="boton" name="submit" type="submit" value="Aceptar"> <input class="boton" type="reset" value="Cancelar"></td> 
      </tr> 
     </tbody> 
    </table> 

    </body> 

    </html>

出典

2016-05-16 Manply

は、より多くの情報のためのjQueryのAJAXのマニュアルを参照してください表示されますこれはtransformarEnEditableにフォームを挿入した後です。

$("#userinfo").submit(function (event) { 
    event.preventDefault(); 
    $.ajax({ 
     method: "POST", 
     url: "envio.php", 
     data: { 
      nombre: $("#userinfo input[name='nombre']").val(), 
      precio: $("#userinfo input[name='precio']").val() 
     }, 
     success: function (data) { 
      // Do something with the data returned from envio.php. 
     }, 
     error: function (request, status, error) { 
      // Handle error. 
     } 
    }); 
});

私が見るもう一つの問題は、最初に#userinfoフォームが挿入される前にイベントリスナー$("#userinfo").submit(...)を持っているということです。そのsubmit()は、リスナーが作成された時点で既に存在する要素に対してのみ機能します。

transformarEnEditable機能の代わりにリスナーを保持したい場合は、on()（http://api.jquery.com/on/）を使用します。子孫要素が後で追加される委任イベントの使用法に注意してください。あなたはより具体的な親セレクタを使用することができますが、ここで私は、例のためbodyを使用します。

$("body").on("submit", "#userinfo", function (event) { ... });

出典

2016-05-16 18:11:14

はそれがとにかく働いていた、ありがとうございました！問題は、編集する動的フォームをロードするときです。 – Manply

申し訳ありませんが、あなたが解決したいことを誤解しました。その動的フォームを提出するときに正しい行動を取ることができないと言っていますか？私はあなたが尋ねていると思っているものに私の答えを更新しました。 –

'submit（）'の使い方を観察した後、もう一度編集します。 –

動的Javascriptフォームが動作しない

答えて

関連する問題