jQuery: loop through comment div and get fields values

Question

I'm trying to submit users comments via ajax so I'm trying to loop through <div class="comments-fields"> to get the value of the 2 fields I need.

So far all I'm getting is this error, as if I am not filling the comments textarea which I am.

SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'comment' cannot be null (SQL: insert into comments (user_id, comment, parent_id, parents, updated_at, created_at) values (1, , , 0, 2015-10-17 00:57:59, 2015-10-17 00:57:59))

and console.log(formData) gives something like this.

formData {}
__proto__: FormData
append: append()
constructor: FormData()
__proto__: Object

How can I achieve this? if there is a better way please suggest.

HTML

 <div class="comment-fields">
     <div class="commenter-comment">
        <div class="form-group col-md-12">
            <textarea id="commenter_comment" name="commenter_comment" class="form-control comment-field" title="User's comment" placeholder="Comment Text"></textarea>

         </div>
     </div>

     <div class="commenter-name-email">
         <input type="hidden" id="commenter_parent" name="commenter_parent" class="commenter-parent" value="0">
      </div>

      <div class="commenter-captcha">
          <div class="col-md-3 text-right">
              <a href="javascript:void(0)" class="btn btn-info post-this-comment">Comment</a>
           </div>
       </div>

 </div>

The Javascript

function commenter_fields(){
    return [
        'commenter_parent',
        'commenter_user_id',
        'commenter_comment'
    ];
}

$(document).on('click', 'a.post-this-comment', function(){
    var formData = new FormData();
    var arrayelem = commenter_fields();
    var elem;
    for(var i=0, size = arrayelem.length; i<size; i++){
        elem = arrayelem[i];
        formData.append(elem, $('#'+elem).val());
    }
    formData.append('per_page', $('.comments_per_page').val());
    var request = $.ajax({ // push question data to server
        type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url         : 'post_this_comment', // the url where we want to POST
        data        : formData, // our data object
        dataType    : 'json',
        processData : false,
        contentType : false
    });
    request.done(comment_done_handler);
    request.fail(comment_fail_handler); // fail promise callback
});

I am using PhpStrom, clicking on FormData() leads to this file

C:\Program Files (x86)\JetBrains\PhpStorm 9.0\plugins\JavaScriptLanguage\lib\JavaScriptLanguage.jar!\com\intellij\lang\javascript\index\predefined\HTML5.js

And this is FormData

FormData.prototype.append = function(name,value) {};
FormData = {};

Can you provide the full definition of FormData?

bingo
– bingo

2015-10-17 01:24:25 +00:00
Commented Oct 17, 2015 at 1:24 — bingo
– bingo, Commented Oct 17, 2015 at 1:24

Vince · Accepted Answer · 2015-10-17 02:16:56Z

1

I would suggest using regular objects because they are much easier to work with over formData (in my opinion).

The jQuery documents state Type: PlainObject or String or Array for the data setting in an ajax post which makes me think they like objects too.

So, instead, your click handler could go:

var form_data = {
    'per_page': $('.comments_per_page').val()
};

var arr = [
    'commenter_parent',
    'commenter_user_id',
    'commenter_comment'
];

for (var i in arr; i < arr.length; i++) {
    var elem = arr[i];
    form_data[elem] = $('#' + elem).val();
}

// console.log(form_data); // something like => Object {per_page: "some_value", commenter_parent: "some_value", commenter_user_id: "some_value", commenter_comment: "some_value"}

var request = $.ajax({
    type: 'POST',
    url: 'your_url_here',
    data: form_data,
    dataType: 'json'
});

request.done(comment_done_handler);
request.fail(comment_fail_handler);

answered Oct 17, 2015 at 2:16

Vince

1,8512 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Halnex Over a year ago

I am still getting the same error with this one. Also doing console.log(form_data) results in Object {per_page: "50"} only

Halnex Over a year ago

I think this works, I had to add 'commenter_comment': $('#commenter_comment').val() and I started getting values.

Wesley Smith · Accepted Answer · 2015-10-17 04:00:13Z

0

A simpler approach would be to use data attributes on the elements and just build a data string from your values like this:

$(document).on('click', 'a.post-this-comment', function () {
    var dataArray=[]; // array to temporarilly store our data
    $('#comment-fields').find('.commenter-field').each(function(i,e){ //loop through all of the fields we need values from, I gave them all the class `commenter-field`
        var $element =$(e); // cache the element
        var type=$element.data('comment-field-type'); // get the name of the data, stored as a data attribute
        var value=encodeURIComponent($element.val()); // get the value, you MUST encode the value, otherwise, you WILL run into issues at some point with illegal chars
        dataArray.push(type+'='+value); // combine the type and value separated by `=`
    });
    var dataString=dataArray.join('&'); // join the array with `&` between each name/value pair
    var request = $.ajax({ // push question data to server
        type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url: 'post_this_comment.php', // the url where we want to POST, missing file extension here?
        data: dataString, // our data string
        dataType: 'json', // only if your code expects a json response from `post_this_comment.php`
    });
    request.done(comment_done_handler);
    request.fail(comment_fail_handler); // fail promise callback
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="comment-fields">
    <div class="commenter-comment">
        <div class="form-group col-md-12">
            <textarea data-comment-field-type="commenter_comment" class="form-control commenter-field" title="User's comment" placeholder="Comment Text">Some comment...</textarea>
        </div>
    </div>
    <div class="commenter-name-email">
        <input type="hidden" data-comment-field-type="commenter_parent" class="commenter-field" value="some parrent">
        <input type="hidden" data-comment-field-type="commenter_user_id" class="commenter-field" value="some UserId">
        <input type="hidden" data-comment-field-type="per_page" class="commenter-field" value="some number of comments">
    </div>
    <div class="commenter-captcha">
        <div class="col-md-3 text-right"> <a href="javascript:void(0)" class="btn btn-info post-this-comment">Comment</a>

        </div>
    </div>
</div>

Inspecting the request headers in dev tools shows the below data being sent:

edited Oct 17, 2015 at 4:00

answered Oct 17, 2015 at 3:54

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

3 Comments

Halnex Over a year ago

I am still getting the same error SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'comment' cannot be null

Wesley Smith Over a year ago

@Halnex Can you please show me your server side code?

Wesley Smith Over a year ago

That error means that your schema is set up so that the comment field is required but you are not providing a value for that field when you attempt to save your record. If you are seeing the values I showed in the image in your console being sent to the server, you must have an error in your code on the sever that gets the values and calls the SQL

Collectives™ on Stack Overflow

jQuery: loop through comment div and get fields values

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related