JSON data ajax is not POST data correctly

Question

i am trying to POST some JSON data in PHP. But something is wrong.

This is my html --

<tbody>
    {% for x in sets %}
        <tr class="">
            <td>
                <div class="form-group">
                    {% if x is defined %}{{x}}</div>{% else %}{% endif %}
            </td>
            <td><input type="number" class ="first" name ="first"></td>
            <td><input type="number" class ="second" name ="second"></td>
            <td><span id="txtData"></span></td>
        </tr>
    {% endfor %}
</tbody>

and this is my script

    <script>
    $(document).ready(function () {
        $("#scoreForm").on('submit', function (e) {
            $("#submit").show();
            var data = $(this).serialize();
            data['first'] = $('#first').val();
            data['second'] = $('#second').val();
            $.ajax({
                url: '/processdata',
                type: 'post',
                data: JSON.stringify({ Frames : data }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (returnedData) {

So when i POST the data it look like so ---

what i want is that when i post the data ---

["frames": {"first":6, "second": 7}, {"first": 4, "second": 9}]

Do anyone knows where i am making the mistake ! Any advice will be really really appreciable ...

You shouldn't use IDs for this, an ID should be unique. You need to use classes. — Styphon
– Styphon, Commented Nov 9, 2015 at 11:46
@Styphon how should i do that, can you kindly show me an example please if possible — Istiak Mahmood
– Istiak Mahmood, Commented Nov 9, 2015 at 11:50
<td><input type="number" CLASS="first" name ="first"></td> <td><input type="number" CLASS="second" name ="second"></td> Change the ID to Class (I've capitalised it so you can see it easier. Then change your javascript to loop through each element and save it in the array. — Styphon
– Styphon, Commented Nov 9, 2015 at 11:50

Quentin · Accepted Answer · 2015-11-09 13:15:58Z

var data = $(this).serialize();

This converts the form data to a string.

data['first'] = $('#first').val();
data['second'] = $('#second').val();

This then tries to add properties to the string, but only for the first match for each element in the DOM.

The simple solution to this is don't use JSON.

Get rid of the id attributes in your inputs. Duplicate ids are forbidden.
Change the names to end in [] to deal with PHP's unique form handling system
Get rid of all the lines like data['first'] = $('#first').val();
Change data: JSON.stringify({ Frames : data }), to data: data
Get rid of contentType: "application/json; charset=utf-8",
Change your PHP to read directly from $_POST instead of expecting a JSON formatted request

If you really want to use JSON, then you need to build the data structure yourself.

You'll also find it more work to make your form work properly when JS fails.

["frames": {"first":6, "second": 7}, {"first": 4, "second": 9}]

… but that isn't valid JSON.

You'd need something more like:

{"frames": [ {"first":6, "second": 7}, {"first": 4, "second": 9} ]}

Get rid of the id attributes in your inputs. Duplicate ids are forbidden.
Get rid of all thee of the lines I quoted at the top of this answer
Get the form data
1. Create an array (var data = [])
2. Get the table rows: var rows = jQuery('tr') is a start, but you'll probably want to be more specific
3. For each row get the data you want and add it to the array: rows.each(function () { data.push({ first: jQuery(this).find("[name=first]").val(), second: jQuery(this).find("[name=second]").val() });

Collectives™ on Stack Overflow

JSON data ajax is not POST data correctly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related