将所有字段从a到ajax请求附加 [英] Attach all fields form a from to ajax request
问题描述
我有一个带有各种不同类型字段的HTML表单。输入，选择，隐藏和textarea。我已经尝试将所有表单数据附加到ajax请求，但POST数据未发送。获取所有表单数据而不是仅仅指定单个字段的原因是用户可以添加更多字段（如果需要）。
函数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：
<$ （$ _ $ GET''func'] =='saveEdits'）{
if（isset（$ _ GET ['func']））{
if（ ！empty（$ _ POST））{
} else {
echo'发送数据未发送';
}
} else {
echo'未知函数';
}
print_r（$ _ POST）; //显示空数组
} else {
}
HTML：
< form id =edit_form>
//运行时生成的各种输入
< / form>
我一直收到'发送数据未发送'。
更新：
网络标签的屏幕截图
我非常确定，但我认为数据并未发送。
更新表格
< p>
< label for =product_name>产品名称：< / label>
< input id =product_nametype =textplaceholder =Product Nameclass =basic_fieldvalue =Product Name PHP/>
< / p>
< label for =main_cat>主要类别：< / label>
< select id =main_cat>
php生成的选项
< / select>
< div id =cats_list>
< p>
< label for =sub_cat_1> Sub Catagory 1：< / label>
php生成的选项
< / select>
< / p>
< / div>
< br />
< a onclick =newCatField（'2'，'Hair Pieces'，'6'）>添加另一个Catagory< / a>
< input type =hiddenid =count_catsvalue =2/>
< div id =sizes>
< p>
< label>大小：< / label>
< input type =textid =size_1value =1/>
< label>数量：< / label>
< input type =numberid =quant_1value =100/>
< / p>
< / div>
< a onclick =newSizeField（'1'）>添加其他尺寸< / a>
< input type =hiddenid =size_countvalue =1/>
< p>
< label for =keywords>关键字：< / label>
& nbsp;& nbsp;& nbsp;链接一个分类：
< option>添加...< / option>
php生成的选项
< / select>
< textarea id =keywordsclass =basic_field> php content< / textarea>
< / p>
< p>
< label for =desc>说明：< / label>
< / p>
在运行时添加字段的示例：
这可以工作，并将ID添加到1每个隐藏值都会计入添加的字段。
函数newCatField（c，u，m）{
$ .ajax（{
url：' func / getCats.php'，
类型：'POST'，
data：{used：u}，
成功：函数（e）{
if（count === < p>< label for =sub_cat _'+ count +'> Sub Catagory '+ count +'：< / label>< select id =sub_cat _'+ count +'>< option>请选择< / option>'+ e +'< / select>< / p>';
count ++;
document.getElementById（'count_cats'）。value = parseInt（$（'＃count_cats'）。val（））+ 1;
}
}
}）;
}
$。serialize （）
可能是这个功能是你在找什么。
$（form）.on（submit，function（event）{
event.preventDefault ）;
console.log（$（this）.serialize（））;
}）;
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>
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;
}
}
});
}
$.serialize()
Probably this function is what you're looking for.
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $( this ).serialize() );
});
这篇关于将所有字段从a到ajax请求附加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
