CODEWITHSUNDEEP
javascriptphpjquery
Axiom
Axiom

Reputation: 902

Best way to submit multiple input fields jQuery/PHP?

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.

Upvotes: 1

Views: 593

Answers (2)

Axiom
Axiom

Reputation: 902

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>

Upvotes: 0

Flash Thunder
Flash Thunder

Reputation: 12036

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.

Upvotes: 2

Related Questions