Change text of Ajax post return

Question

I have a loop:

do {
// show items
<input type="hidden" id="contestant_id" value="'.$row_contestants['contestant_id'].'">
<input type="hidden" id="user_id" value="'.$userinfo['user_id'].'">
<button class="vote" onclick="vote()">vote</button>
<div id="result"></div>
} while ($row....);

And my function:

function vote () {
var val1 = $('#contestant_id').val();
var val2 = $('#user_id').val();
  $.ajax({
    url:"vote.php", 
    type: "POST", 
    data: { contestant_id: val1, user_id: val2 },
    success: function(response) {
        $('#result').html(response);
    }
 });

}

What I want to do is have the "vote" text from here:

<button class="vote" onclick="vote()">vote</button>

change to something else like "voted!" when I get the response. I sort of had it but of course it's showing here:

<div id="result"></div>

And it's only showing under the 1st result of my loop.

Any ideas?

Thanks.

[ID's Must Be Unique](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme), specifically because it will cause problems in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) and CSS when you try to interact with those elements. — Jay Blanchard, Jul 22 '16 at 18:53
Add some increment value to each Id to make Ids unique like id="contestant_id_(some unique value)" — Ravinder Reddy, Jul 22 '16 at 19:09
I added that but now I'm all messed up in how to get them as variables. — , Jul 22 '16 at 22:24

vijaykumar · Answer 1 · 2016-07-22T19:27:54.767

0

You can pass this from html to function and handle in the script

<button class="vote" onclick="vote(this)">vote</button>

function vote (el) {
var val1 = $('#contestant_id').val();
var val2 = $('#user_id').val();
  $.ajax({
    url:"vote.php", 
    type: "POST", 
    data: { contestant_id: val1, user_id: val2 },
    success: function(response) {
        $('#result').html(response);
        if (response  == 'Yes') {
           var text = el.text();
           var values = text.split(' ');
           var count = 1;
           if (values.length == 2) { 
             count = values[1].parseInt + 1;
           }
           el.text('Voted ' + count);
        }
    }
 });
}

edited Jul 22 '16 at 19:27

answered Jul 22 '16 at 19:11

vijaykumar

4,658
6
37
54

That makes more sense. But in my vote.php file I do a mysql insert and do if "yes" else "no". How else can I send a success response? – Jul 22 '16 at 19:16
Add one if condition . Updated my answer. but no sure how you are sending response. – vijaykumar Jul 22 '16 at 19:19
I changed yours to $('.vote').html(response) because it's in the .vote class, not #result. It works but what if I add an increment number to .vote? – Jul 22 '16 at 19:23
the same you are adding . You can get text and increment it . Updated it – vijaykumar Jul 22 '16 at 19:25
I just updated my answer for your idea. You can play with that based on your needs – vijaykumar Jul 22 '16 at 19:28
I just checked but I don't see it adding an increment number to the .vote class. It's still returning the response on all the buttons. – Jul 22 '16 at 19:30
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/118057/discussion-between-ironank-and-vijaykumar). – Jul 22 '16 at 19:32

Change text of Ajax post return

1 Answers1