Trying to send a html form identified by id using jquery

Question

I am echoing out a list of content from my database and have a star icon next to each item. I tried to make it so that when the user clicks the star it will find that content in my database and change the 'popular' value in that field (a 'like' button). I have been trying to do this by having each star wrapped in a tag and then making the id of each form 'formWithId'x ...... x being the id of the content that is being displayed.

Here it is in code:

echo "<form  method = 'post' class ='formId".$row['id']."' id = 'likePostWithId".$row['id']."'>";
      //all inputs are hidden and send the 'id' value of the content so the php file will know which field of the table to like in the mysql database
echo "<input type ='text' name = 'email' style = 'display: none;' value= '".$row['email']."' >
      <input type ='text' name = 'id' style = 'display: none;' value= '".$row['id']."' >
      //this is the star icon
      <i class = 'ss-icon' id = '".$row['id']."'>&#x22C6; </i>";
echo "</form>"; 

So, now what i need is to be able to send the form by using jquery validate.... but the problem i am having is that I have always used jquery validation (using the submit handler) to submit specific forms whose id's are predefined and dont change based on the id of the content sent from the database.

Here is my example that i am trying to

$(document).ready(function(){
    $(".ss-icon").click(function(){
       var id= $(this).attr('id');
       $("#likePostWithId"+id).submit();
    });
});

$(function(){
    $(".ss-icon").click(function(){
    //this doesn't work...
    $("#likePostWithId").validate({
         submitHandler:function(data){
            //do stuff
          }
     )};
)};

see where $("#likePostWithId") ... i dont know how to make it choose the one with the correct id (example $("#likePostWithId"+id) ) would interpret as #likePostWithId6 or $likePostWithId7 where the number is the id of the mysql content

anyway i have no clue if this will be clear to any of you... I don't really know how to ask this question.. But basically i need to send an id (the id of the content from mysql) to php form without reloading page

any help is appreciated.

thanks

Answer 1

You may achieve this using jQuery's Ajax. Simply give each star icon a unique id (this id should have some relation with the MySQL data, like index key). Pass this argument (the id) using jQuery's Ajax function to a php script which takes the data (unique for each MySQL entry, like index) which changes it's popularity field entry. On success function, you may give some animation or color change to star icon informing that the data is successfully posted. just give it a try.

Answer 2

try this

 $(function(){
   $(".ss-icon").click(function(){
      var id= $(this).attr('id');
      $("#likePostWithId" + id ).validate({ <--- here
      submitHandler:function(data){
         $("#likePostWithId"+id).submit();
      }
   )};
 )};

this however submits the form... you can use ajax to submit the form wihtout reloading

Answer 3

Maybe you can use $.post() to solve your problem. Then you don't have to mess around with forms:

$(document).ready(function(){
    $(".ss-icon").click(function(){
       $.post('yourPHPUrl', { contentID: $(this).attr('id') }, successFunction);
    });
});

function successFunction(data) {
    if (data.success) { //just a sample, you can give a JSON-Object back to the success function
        $('#' + data.ID).css() ... // do something with the clicked star
    }
}

Answer 4

Your code:

$(function(){
    $(".ss-icon").click(function(){
        //this doesn't work...
        $("#likePostWithId").validate({
             submitHandler:function(data){
                 //do stuff
             }
        )};
    }); // <-- this was missing
)};

You were missing a set of brackets but you still shouldn't implement it like that. You are merely re-initializing the plugin on every click. (The plugin already has the click event handler built-in and it's captured automatically.)

.validate() must be called once within the DOM ready to initialize the plugin. As per documentation , the submitHandler callback function is "the right place to submit a form via Ajax after it validated."

$(function(){

    $("#likePostWithId").validate({ // initialize plugin
         // other options & rules,
         submitHandler: function(form){
             // do ajax
             return false; // blocks form redirection since you already did ajax
         }
    )};

)};

Play with a demo: http://jsfiddle.net/XnfDc/