Question

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

首先，你必须点击按钮＆＃34; Nuevo Concepto＆＃34;，然后你必须点击＆＃34; Editar＆＃34;在现在添加的行中。然后，出现表单无法正常提交出现

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

Answer 1

有关详细信息，请参阅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").submit(...)表单之前，您最初拥有事件侦听器#userinfo。 submit()仅适用于创建侦听器时已存在的元素。

如果您希望将监听器保留在transformarEnEditable函数内，而不是on()函数内部，则需要使用body（http://api.jquery.com/on/）。请注意委托事件的用法，稍后将添加后代元素。您可以使用更具体的父选择器，但在此我将使用$("body").on("submit", "#userinfo", function (event) { ... });作为示例：

<label class="checkbox-inline">
    <img src="assets/settings.png" alt="" width="70px;"/>
     <input type="checkbox" id="inlineCheckbox3" value="option3" id="cjecg"> &nbsp;
</label>

动态Javascript表单不起作用

1 个答案: