Attach all fields form a from to ajax request

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

enter image description here

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

Have you checked the browser console to see what the outgoing HTTP request looks like? — Pointy, Dec 14 '13 at 21:06
Uncaught SyntaxError: Not enough arguments on line url:'func/editProduct.php?func=saveEdits', — Paul Ledger, Dec 14 '13 at 21:08
That error doesn't make much sense. Is there other code before that "saveEdits" function? — Pointy, Dec 14 '13 at 21:11
theres not now I moved this to the top, still geting the no post data sent message. I get rid of the console error by defining the url in a varable above the ajax request — Paul Ledger, Dec 14 '13 at 21:17
so is form selector correct? Look at what is actually sent in network tab of console — charlietfl, Dec 14 '13 at 21:21
Not entirely sure what the data here means see update fro a screenshot, I presume that means the form data isn't sending as it says text/html — Paul Ledger, Dec 14 '13 at 21:26
If you click on that row in the "Network" tab, it'll show you more information on the right. The "Headers" tab on the right will tell you what the outgoing HTTP request looked like. — Pointy, Dec 14 '13 at 21:35
How exactly is that "saveEdits" function being called? If you're still getting that syntax error, I guess it's probably *not* being called. — Pointy, Dec 14 '13 at 21:36
the function is being called as the ajax is returning message from the php file. — Paul Ledger, Dec 14 '13 at 21:43
Can you show us the "//various inputs generated at run time"? Besides, it's normally not advised to use both [POST and GET at the same time](http://stackoverflow.com/questions/7954831/i-cant-use-get-and-post-at-the-same-time-in-php), however that's not the cause of the problem this time. I'd recommend [following this approach](http://stackoverflow.com/q/4406348/938236). — Francisco Presencia, Dec 14 '13 at 21:47
SEE update for the raw form and a function that adds fields at runtime — Paul Ledger, Dec 14 '13 at 21:59
try wrapping your `data: $('#...` inside `{}` brackets: `data: { $('#... }` — scrowler, Dec 14 '13 at 22:01
Paul, you need to be sure that all of your form elements have the name attribute on them in order to do the form pasting the way you are trying to add it to ajax. — Bob Tate, Dec 14 '13 at 22:02
@KaiHogan adding the same name attr sends some data but $_POST[some id] doesn't retrive the data in the php document print_r($_POST[name for all]) only shows the last element in the form — Paul Ledger, Dec 14 '13 at 22:14
Above comment - a bit of common sense should have told me to use different name for each field. Post this as an answer, works just how I want — Paul Ledger, Dec 14 '13 at 22:26

score 2 · Answer 1 · answered Dec 14 '13 at 22:09

2

$.serialize()

Probably this function is what you're looking for.

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

answered Dec 14 '13 at 22:09

M K

9,138
7
43
44

Sorry, I've missed that. – M K Dec 14 '13 at 22:28

Attach all fields form a from to ajax request

1 Answers1

Linked