将所有字段附加为from to ajax请求

Question

I have a HTML form with various different types of fields. Input, select, hidden and textarea. I have tried attaching all the form data to the ajax request but the POST data isn't sending. The reason for getting all form data rather than just naming the individual fields is the user can add more fields if the need to.

    function saveProductEdits(f){
    var url = 'func/editProduct.php?func=saveEdits';
    $.ajax({
        url:url,
        data:$('#edit_form').serialize(),
        type:'POST',
        beforeSend:function(){
        },
        success:function(e){
            alert(e);
        }
    });
}

PHP:

if(isset($_GET['func'])){
        if($_GET['func'] == 'saveEdits'){
            if(!empty($_POST)){
            }else{
                echo 'Post data not sent';
            }
        }else{
            echo 'unknown function';
        }
print_r($_POST); //shows empty array
    }else{
    }

HTML:

<form id="edit_form">
  //various inputs generated at run time
  <input type="button" value="Save Changes" onclick="saveProductEdits(this)" /> //button to submit
</form>

I keep getting 'Post data not sent'.

UPDATE:

screen shot of network tab

Im entirly sure but I presume by that the data isn't sending.

UPDATE FORM

<p>
  <label for="product_name">Product Name: </label>
  <input id="product_name" type="text" placeholder="Product Name" class="basic_field" value="Product Name PHP" />
</p>
<label for="main_cat">Main Catagory: </label>
<select id="main_cat">
  php generated options
</select>
<div id="cats_list">
  <p>
    <label for="sub_cat_1">Sub Catagory 1: </label>
      php generated options
    </select>
  </p>
</div>
<br/>
<a onclick="newCatField('2','Hair Pieces','6')">Add another Catagory</a>
<input type="hidden" id="count_cats" value="2" />
<div id="sizes">
  <p>
    <label>Size: </label>
    <input type="text" id="size_1" value="1" /> 
    <label>Quantity: </label>
    <input type="number" id="quant_1" value="100" /> 
  </p>
</div>
<a onclick="newSizeField('1')">Add another Size</a>
<input type="hidden" id="size_count" value="1" />
<p>
  <label for="keywords">Keywords: </label>
  &nbsp;&nbsp;&nbsp;Link a catagory: 
  <select onChange="addCatToKeywords(this,'keywords')" class="basic_field">      
    <option>Add...</option>
    php generated options
  </select>
  <textarea id="keywords" class="basic_field">php content</textarea>
</p>
<p>
  <label for="desc">Description: </label>
  <textarea id="desc" style="">php content</textarea>
</p>

example of adding fields at runtime: this does work and adds 1 to the id of each on and to a hidden value that counts the added fields.

function newCatField(c,u,m){
    $.ajax({
        url:'func/getCats.php',
        type:'POST',
        data:{used:u},
        success:function(e){
            if(count === parseInt(m)){
            }else{
                document.getElementById('cats_list').innerHTML += '<p><label for="sub_cat_'+count+'">Sub Catagory '+count+': </label><select id="sub_cat_'+count+'"><option>Please Select</option>'+e+'</select></p>';
                count++;
                document.getElementById('count_cats').value = parseInt($('#count_cats').val()) + 1;
            }
        }
    });
}

Answer 1

$.serialize()

Probably this function is what you're looking for.

$( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    console.log( $( this ).serialize() );
});