Sending input array values by POST to php Using Jquery

Mar 13, 2012   //   by phpfreelancer.biz   //   Blog, Jquery Tutorial  //  No Comments

I am trying to read the values of an input array and pass them to my backend PHP, but am not able to get this working. I have the following html:

<input name='field[]' class='myclass' value='test1'>
<input name='field[]' class='myclass' value='test2'>
<input name='field[]' class='myclass' value='test3'>
<input id='post_this_val' type='button' value='Post'>

I want to read these values in jQuery and POST the values to my backend PHP, which will then process the results. This is what I do:

$('#post_this_val').live('click', function () {
    var inpVal = $('input.myclass').map(function(i, el) {
                            return el.value;
                    });
    $.post('/my/php/function', {data: inpVal});
});

The above POST is not working- my php function is not even getting called and the page simply reloads on clicking the POST button. Suggestions please.

Easiest way to get form values is to wrap those inputs in a form, bind a submit event, and use .serialize() method. The plus of using this method is, if you have a form with input type text and submit, doesn’t matter whether the user is submitting using enter, or clicking on the submit button, the handler will still be called.

html:

<form id="myForm">
   <input  name='field[]' class='myclass' value='test1'>
   <input name='field[]' class='myclass' value='test2'>
   <input name='field[]' class='myclass' value='test3'>
   <input id='post_this_val' type='button' value='Post'>
</form>

js:


$('#myForm').live('submit', function(e) {
   $.post('/my/php/function', $(this).serialize());
   e.preventDefault();
   return false;
});

Leave a comment

Share This Post

RSS Wordpress News