jQuery附加的表单元素未提交

时间:2015-12-29 17:12:01

标签: javascript php jquery html forms

之前我使用过动态添加的jQuery元素,但效果很好。只是现在它不起作用,我无法弄明白。

我尝试过以下无效:

  1. 为每个输入元素使用唯一ID。
  2. e.preventDefault();
  3. 显示的php的输出是{'action':'test'},这是序列化之前的数据值。为什么不采取/提交动态添加值?

    HTML

    <table class='header_tbl' style="background:none !important;">
    
      <thead>
        <tr>
          <th>Product</th>
          <th>Price</th>
          <th>Qty</th>
          <th>Sub Total</th>
          <th></th>
        </tr>
      </thead>
    
      <form action="#" method="POST" id="cart_form">
    
        <tbody>
        </tbody>
        <tfoot>
    
          <tr>
            <td>Total</td>
            <td></td>
            <td><span class='qty_1'></span>
            </td>
            <td><span class='total'></span>
            </td>
            <td></td>
          </tr>
    
          <tr>
            <td>GST 6%</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
    
          <tr>
            <td>Discount (x%)</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
    
          <tr>
            <td>Total Payment</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
    
          <tr>
            <td colspan="5" class="checkout">
              <input type="submit" name='submit' id="checkout" value="CHECK OUT" />
            </td>
          </tr>
        </tfoot>
    
      </form>
    
    
    </table>
    

    动态附加元素的脚本:

    for (i = 0; i < data.length; i++) {
        $(".header_tbl tbody").prepend("<tr id='"+data[i].id+"'><th class='product'>"+data[i].catalog_name+"<input type='text' name='catalog_name[]' value='"+data[i].catalog_name+"'></th><td class='price'>RM <span>"+data[i].price_normal+"</span><input type='text' name='"+data[i].id+"_price[]' value='"+data[i].price_normal+"'></td><td class='qty_"+data[i].id+"'><input type='text' name='qty' style='width:50px;height:20px;margin:10px auto;' onkeyup='subTotal(\""+data[i].id+"\")' onfocusout='calTotal(\""+data[i].id+"\")'><input type='text' name='"+data[i].id+"_qty2[]' value=''></td><td class='sub_total'><span class='sub_total_"+data[i].id+"'></span><input type='text' name='"+data[i].id+"_sub_total[]' value=''></td><td><img src='"+p_img_path+"del.png' style='width:15px;cursor:pointer;' onClick='del_this(\""+data[i].id+"\")'></td></tr>");  
    }
    

    提交表单的脚本

    //submit cart_form
    $('#checkout').on('click', function() {
    
      $("#cart_form").submit(function() {
        var data = {
          "action": "test"
        };
        data = $(this).serialize() + "&" + $.param(data);
    
        $.ajax({
          type: "POST",
          dataType: "json",
          url: "submit_cart.php", //Relative or absolute path to response.php file
          data: data,
          success: function(data) {
            alert(data);
          }
    
        });
        return false;
      });
    });
    

    PHP

    <?php
    session_start();
    include('config.php');
    
    $return = $_POST;
    
    
    $return["json"] = json_encode($return);
    // json_encode($return);
    //  
    //below code to store in database 
    $data = json_decode($return["json"], true);
    
    
    echo json_encode($return["json"]);
    ?>
    

    它的外观如下:

    enter image description here

1 个答案:

答案 0 :(得分:1)

如果将<form>包裹在整个表中,您的代码似乎会更好。请注意,<table>元素具有特定permitted content,并且<form>元素不在其中。

var data = [{id: 1,name:'test1'},{id:2,name: 'test2'}],
    $output = $('#output');

for (i = 0; i < data.length; i++) {
  $(".header_tbl tbody").prepend("<tr id='" + data[i].id + "'><td class='product'>" + data[i].name + "<input type='text' name='catalog_name[]' value='" + data[i].name + "'></td></tr>");
}


//submit cart_form

$("#cart_form").submit(function() {

  var data = {"action": "test"};

  data = $("#cart_form").serialize() + "&" + $.param(data);
  $output.text(data);

  return false;

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="#" method="POST" id="cart_form">
  <table class='header_tbl' style="background:none !important;">

    <thead><tr><th>Product</th><th>Price</th><th>Qty</th><th>Sub Total</th><th></th></tr></thead>

    <tbody></tbody>
    
    <tfoot>
      <tr><td>Total</td><td></td><td><span class='qty_1'></span></td><td><span class='total'></span></td><td></td></tr>
      <tr><td>GST 6%</td><td></td><td></td><td></td><td></td></tr>
      <tr><td>Discount (x%)</td><td></td><td></td><td></td><td></td></tr>
      <tr><td>Total Payment</td><td></td><td></td><td></td><td></td></tr>
      <tr>
        <td colspan="5" class="checkout">
          <input type="submit" name='submit' id="checkout" value="CHECK OUT" />
        </td>
      </tr>
    </tfoot>

  </table>
</form>

<div id="output"></div>