CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
112233
112233

Reputation: 2466

jQuery appended form elements aren't submitted

I've worked with dynamically added jQuery elements before and they worked well. Only now it doesn't work and I can't figure it out.

I've tried the following to no avail:

  1. used a unique id for each input element.
  2. e.preventDefault();

The output from the php shown is {'action':'test'} which is the data value before serialize. Why is it not taking/submitting dynamically added values?

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>

Script to append elements dynamically:

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>");  
}

Script to submit form

//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"]);
?>

This is how it looks:

enter image description here

Upvotes: 0

Views: 75

Answers (1)

showdev
showdev

Reputation: 29168

Your code seems to work better if you wrap the <form> around the entire table. Notice that <table> elements have specific permitted content and that a <form> element is not among them.

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>

Upvotes: 1

Related Questions