Прикрепить все поля от a до ajax-запроса

Question

У меня есть HTML-форма с различными полями разных типов. Ввод, выбор, скрытие и текстовое поле. Я попытался привязать все данные формы к запросу ajax, но данные POST не отправляются. Причина получения всех данных формы, а не просто именование отдельных полей - пользователь может добавить больше полей, если это необходимо.

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> 

Я постоянно получаю "данные Post не отправляются.

UPDATE:

снимок экрана сетевой вкладке

Im entirly уверен, но я полагаю, с тем, что данные не посылает.

UPDATE ФОРМА

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

пример добавления полей во время выполнения: это делает работу и добавляет 1 к идентификатору каждого, и к скрытому значению, которое подсчитывает добавленных полей.

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

Возможно this функция, что вы ищете.

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