Best way to submit multiple input fields jQuery/PHP?

Question

I'm trying to upgrade my like-system to something more practical.

Currently I have it like <a href="https://mysite/dash.php?like=<? echo $postid; ?>">Like</a> then in the PHP have something like: if $_GET['like'] is set, then grab the user's ID and the post ID and call a function called like_status($post_id,$user_id);

However, I've been working on something like this:

The main part that shows on the statuses:

<script src="https://mysite/stuff/jquery.min.js"></script>
<script src="https://mysite/stuff/js/global.js"></script>
<input type="hidden" id="postid" value="<? echo $postid; ?>">
<input type="hidden" id="userid" value="<? echo $session_user_id; ?>">
<span id="like-button" style="color:red;">Like</span>

The Javascript/jQuery:

$('span#like-button').on('click', function(){
    var postid = $('input#postid').val();
    var userid = $('input#userid').val();
    if (postid != ''){
        $.post('https://mysite/stuff/ajax/like.php', {postid: postid, userid: userid}, function(data){
            document.getElementById('like-button').innerHTML = data;
        });
    }
});

and finally, My like.php script:

<?php
if(isset($_POST['postid']) === true && empty($_POST['userid']) === false){
    include $_SERVER['DOCUMENT_ROOT'].'/stuff/init.php';
    if(is_liked($_POST['postid'],$_POST['userid']) === true){
        unlike_status($_POST['postid'],$_POST['userid']);
        echo 'Like';
    } else {
        like_status($_POST['postid'],$_POST['userid']);
        echo 'Unlike';
    }
}
?>

My unlike/like functions work fine. I have a working like system now, but it makes the user refresh and everything every time, and it's very inconvenient. I'd like to use this method to automatically update the like button without having to refresh the page or anything. This way, users can like multiple things on the page, and not have to refresh the page every time. I also think it's more secure since the $_GET['like'] can be changed to any id, even if user's aren't friends with other users, or the status doesn't exist.

My issue:

Okay, so whenever I click the like button, nothing happens. I tried this in a separate page as well (changing the type from hidden to text, and manually inputting the data) and it didn't work either. It seems the javascript doesn't execute. I've opened up console in google chrome, and when I click the button, nothing happens. The like doesn't get posted to the database, and the button doesn't get updated.

Can anyone explain what I'm doing wrong? Possibly point me in the right direction to fixing this?

UPDATE

I tried combining the Javascript/HTML in one page to have dynamic variables.

This is what shows up for each status:

<script src="https://mysite/stuff/jquery.min.js"></script>
    <script type="Javascript">
$(document.body).on('click','#like-button', function(
        var postid<? echo $status_id; ?> = $('input#postid<? echo $status_id; ?>').val();
        var userid<? echo $status_id; ?> = $('input#userid<? echo $status_id; ?>').val();
        $.post('https://mysite/stuff/ajax/like.php', {postid: postid<? echo $status_id; ?>, userid: userid<? echo $status_id; ?>}, function(data){
            document.getElementById('like-button').innerHTML = data;
        });
));
</script>
<input type="hidden" id="postid<? echo $status_id; ?>" value="<? echo $status_id; ?>">
<input type="hidden" id="userid<? echo $status_id; ?>" value="<? echo $session_user_id; ?>">
<span id="like-button" style="color:red;"><? if(isliked($status_id,$session_user_id) === true){ ?>Unlike<? } else { ?>Like<?}?></span>

I still can't get it to execute the script.

Did you debug the click event on chrome developer tools? To look if it enters the event? Or you can observe the AJAX transmission via the network tab there. if it has some error on the PHP side, it'll show you the error there. — Taha Paksu
– Taha Paksu, Commented Jan 28, 2015 at 7:52
OP said he checked console, but more than likely network tab is going to be more useful in this situation. — EternalHour
– EternalHour, Commented Jan 28, 2015 at 7:56
Yeah, nothing shows up in network tab, and do you mean check in console and such to see if there's any events when I click? Because I did and nothing came up. I went to sources tab, and clicked on "event listener breakpoint" and added mouse->onclick but nothing in the log pertains to the script I made. I'm not sure if it's just not able to read the ID properly or there's a typo somewhere, etc. It just seems that the javascript file isn't executing on click. — Axiom
– Axiom, Commented Jan 28, 2015 at 7:57
If nothing in network tab means the request was never sent, definitely points to JQuery issue. Try putting an alert or console.log inside your click event to see if it's firing. You'll also need a return false; directly afterward to prevent a page refresh. If no output from that it's probably a problem with your selector. — EternalHour
– EternalHour, Commented Jan 28, 2015 at 7:59

Flash Thunder · Accepted Answer · 2015-01-28 07:56:09Z

2

You can always just use $('#fomrm_id').serialize(), to get all the form fields at once in POST data. It refreshes page because you have to add return false; to the end of jQuery.click event.

If those elements are being created dynamically (or as in your case script is being executed before they are created), you need to set proper .on event, this one is not good, as it binds to the element that may not be there.

Should be rather:

$(document.body).on('click','#like-button', function(){..}); - that will bind it to document body, that is always there, but will check for selector in second argument if it matches.

edited Jan 28, 2015 at 7:56

answered Jan 28, 2015 at 7:50

Flash Thunder

12.1k10 gold badges55 silver badges103 bronze badges

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

Comments

Axiom · Accepted Answer · 2015-01-28 10:00:21Z

It's not exactly what I wanted to do, but it's good enough. I managed to get the like button to work/update without refreshing and such. Thanks to everyone for the help if it wasn't for your suggestions I would've never found this out.

<input type="hidden" id="postid" value="<? echo $status_id; ?>"><br>
<input type="hidden" id="userid" value="<? echo $session_user_id; ?>"><br>
<span id="like-button" style="color:red;"><? if(isliked($status_id,$session_user_id) === true){ ?>Unlike<? } else { ?>Like<? } ?></span>
<script>
$('span#like-button').on('click', function(){
    var postid = $('input#postid').val();
    var userid = $('input#userid').val();
    <? if(isliked($status_id,$session_user_id) === true){ ?>
    $.get('https://mysite/dash', {unlike: postid, userid: userid}, function(data){
        document.getElementById('like-button').innerHTML = 'Like';
    });
    <? } else { ?>
    $.get('https://mysite/dash', {like: postid, userid: userid}, function(data){
        document.getElementById('like-button').innerHTML = 'Unike';
    });
    <? } ?>
});
</script>

Collectives™ on Stack Overflow

Best way to submit multiple input fields jQuery/PHP?

My issue:

UPDATE

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My issue:

UPDATE

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related