在rails 3中通过jQuery动态更改表单内容，并通过javascript提交

Question

我的视图代码:

 <%= form_for(item, :url => update_cart_path) do |item_form| %>
    <tr>
        <td width="300"><%=item.variant.product.name%> <%= "(" + variant_options(item.variant) + ")" unless item.variant .option_values.empty? %></td>
        <td class="price"><%= number_to_currency item.price %></td>
        <td class="qty"><%=item.quantity%></td>
        <td class="total"><span><%= number_to_currency (item.price * item.quantity)%></span></td>
        <td class="edit"><%= link_to(image_tag('/images/admin/icons/edit.png'), '#', :class => 'edit') %>
        </td>
    </tr>
    <% end %>

我的"inspect element"在google chrome代码中的输出:

<form accept-charset="UTF-8" action="/cart" class="edit_line_item" id="edit_line_item_1070870267" method="post"></form>
<tr> 
    <td width="300">Ruby on Rails Tote </td> 
    <td class="price">$15.99</td> 
    <td class="qty">2</td> 
    <td class="total"><span>$31.98</span></td> 
    <td class="edit"><a href="#" class="edit"><img alt="Edit" src="/images/admin/icons/edit.png?1299481899" /></a> 
    </td> 
</tr> 

我的网站源代码:

   <form accept-charset="UTF-8" action="/cart" class="edit_line_item" id="edit_line_item_1070870267" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="p31zTaCWOkCTDPyMMzAlfvmSvrcyCSVEG4Lj59xne6Q=" /></div> 
    <tr> 
        <td width="300">Ruby on Rails Tote </td> 
        <td class="price">$15.99</td> 
        <td class="qty">2</td> 
        <td class="total"><span>$31.98</span></td> 
        <td class="edit"><a href="#" class="edit"><img alt="Edit" src="/images/admin/icons/edit.png?1299481899" /></a> 
        </td> 
    </tr> 
    </form> 

my javascript code:

(function($){
    // Remove an item from the cart by setting its quantity to zero and posting the update form
    init = function(){
        $('tbody#line-items a.edit').show().click(function(){
            var edit, qty;
            edit = $(this).parents('tr').children('.edit').html();
            qty = $(this).parents('tr').children('.qty').html();

            $('tbody#line-items a.edit').hide();
            quantity = $(this).parents('tr').children('.qty').html();
            //<a href="#" class="edit" data-method="submit" rel="nofollow">
            $(this).parents('tr').children('.qty').replaceWith('<td class="qty"><input class="line_item_quantity" id="order_line_items_attributes_0_quantity" name="order[line_items_attributes][0][quantity]" size="3" type="text" value="'+quantity+'" /></td>');
            $(this).parents('tr').children('.edit').replaceWith('<td class="edit"><a href="#" class="update" rel="nofollow"><img alt="Update" src="/images/admin/icons/tick.png" /></a>&nbsp;<a href="#" class="delete"><img alt="Delete" src="/images/admin/icons/delete.png" /></a></td>')
            $('a.update').click(function(){
                $('form.edit_line_item').submit();
                return false;
            });
            $('tbody#line-items a.delete').click(function(){
                $('tbody#line-items a.edit').show();
                $(this).parents('tr').children('.edit').replaceWith('<td class=edit>'+edit+'</td>');
                $("input.line_item_quantity").parent().replaceWith('<td class=qty>'+qty+'</td>');
                init();
                return false;
            }); 
            return false;
        });
    };
    $(document).ready(function(){
        init();
        return false;
    });
})(jQuery);

我的javascript代码基本上将编辑按钮替换为更新和取消按钮，如果它被点击。我的问题是为什么我的参数不包含输入(通过javascript动态创建)在我的表单一旦提交?动态更改是否会弄乱将要提交的表单?我想做的是点击一个编辑按钮，一些javascript代码将创建一个输入文本框和一个提交按钮。然后我可以点击提交，将信息发送到控制器，但我无法获得提交的信息。任何帮助都可以。

Answer 1

在表单创建中有一个HTML验证问题，表单标签应该在div, span, td, li中，即所有可以保存数据的颗粒HTML标签。这里是表和行之间的呈现，这是错误的。因此，在创建HTM表之前，您应该将form_for写入

 <%= form_for(item, :url => update_cart_path) do |item_form| %>
<table>
   <tr>
        <td width="300"><%=item.variant.product.name%> <%= "(" + variant_options(item.variant) + ")" unless item.variant .option_values.empty? %></td>
        <td class="price"><%= number_to_currency item.price %></td>
        <td class="qty"><%=item.quantity%></td>
        <td class="total"><span><%= number_to_currency (item.price * item.quantity)%></span></td>
        <td class="edit"><%= link_to(image_tag('/images/admin/icons/edit.png'), '#', :class => 'edit') %>
        </td>
    </tr>
</table>
<%end %>