动态Javascript表单不起作用

Dynamic Javascript Form not working

本文关键字：不起作用 表单 Javascript 动态      更新时间：2023-09-26

我需要解决方案来提交一个负责创建动态的表单，通过ajax将信息发送到procedure.php。

首先，您必须单击botton"Nuevo Concepto"，然后必须单击现在添加的行中的"Editar"。然后，出现表单不正确提交出现

<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>

有关更多信息，请参阅jQuery AJAX文档：http://api.jquery.com/jquery.ajax/

如果你想在提交编辑表单后使用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) { ... });
相关文章：