-1

how to handle jquery events through button onclick functions

HTML CODE

<div id="comments" class="cmt" >
    <img width="30px" height="30px" src="/cropphoto/<?php echo getuserPhoto($d['uid']); ?>">
    <input class="commentbox" id="comment"  name="comments" placeholder="Comment Here" maxlength="50" >
    <input type="hidden" id="qid" name="qid " value="<?php echo $d['qid'];?>">
    <button type="button" id="comq" name="compost" onclick="my(event,<?php echo $d['qid'];?>);" class="butn2" >post comment</button>
</div>

AJAX JQUERY

$(document).ready(function() {
  $("#comq").click(function my(e, id) {
    var comment = $("#comment").val();
    var qid = $("#qid").val();

    alert(qid);

    $.ajax({
      cache: false,
      type: "post",
      url: "jquery.php",
      data: {
        comments: comment,
        qid: qid
      },
      success: function(data) {
        $("#comment").val("");
        $("").html(data);
      }
    });
  });

});

comments not inserted into the database with the button on click function but without the button on keypress working fine What is the mistake in my code please let me know i am now in ajax

Barmar
  • 741,623
  • 53
  • 500
  • 612

4 Answers4

0

first of all it looks like you are trying to send 2 arguments in your HTML:

onclick="my(event,<?php echo $d['qid'];?>);

But the function only accepts 1?

$("#comq").click (function my(e) {

I'm not sure if that solves your problem but you could start there.

kuylis
  • 11
  • 3
  • You can just make it accept 1 more parameter: `$("#comq").click (function my(e, param) {` – kuylis Aug 28 '17 at 10:55
  • e and param is now your 2 parameters, use param to get the values you try to send from your HTML code. – kuylis Aug 28 '17 at 11:01
0

oh got it just add another parameter with it

$("#comq").click (function my(e, id) {

or what I would do is I would define a function my like this

function my(e, id){
$.ajax({
        cache:false,
        type:"post",
        url:"jquery.php",
        data:{$("#comment").val(),qid:id},
        success:function(data)
        {
                    $("#comment").val("");
                    $("").html(data);

        }
}

this looks more neat in my opinion

Gardezi
  • 2,692
  • 2
  • 32
  • 62
0

There are two problems.

First, onclick can only call functions that are in the global scope. Your function is defined inside $(document).ready(), so it's not in the global scope.

Second, you're defining the function using a named function expression. The scope of this name is only the body of the function itself. See Why JavaScript function declaration (and expression)?

Since you're calling the function from onclick, you don't need to put it inside $("#comq").click(), or in $(document).ready().

Just define it as a normal function in the global scope. And since you're calling it with $d['qid'] as the second argument, you don't need to assign to qid in the function. You also don't need the event argument, since you never use it in the function (it was only needed before because you were calling the function from $("#comq").click()).

You can't use the same ID multiple times, a selector for the ID will just find the first element with that ID, not the one next to the button. Pass the button as another argument to the function, and use that to get the comment box adjacent to it.

HTML:

<div id="comments" class="cmt" >
    <img width="30px" height="30px" src="/cropphoto/<?php echo getuserPhoto($d['uid']); ?>">
    <input class="commentbox"  name="comments" placeholder="Comment Here" maxlength="50" >
    <button type="button" name="compost" onclick="my(<?php echo $d['qid'];?>, this);" class="butn2" >post comment</button>
</div>

JS:

function my(qid, button) {
  var comment = $(button).siblings(".commentbox").val();

  alert(qid);

  $.ajax({
    cache: false,
    type: "post",
    url: "jquery.php",
    data: {
      comments: comment,
      qid: qid
    },
    success: function(data) {
      $("#comment").val("");
      $("").html(data);
    }
  });
}

Here's an executable snippet that demonstrates it without AJAX:

function my(qid, button) {
  var comment = $(button).siblings(".commentbox").val();

  console.log("id = " + qid, " comment = " + comment);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="comments" class="cmt">
  <img width="30px" height="30px" src="/cropphoto/<?php echo getuserPhoto($d['uid']); ?>">
  <input class="commentbox" name="comments" placeholder="Comment Here" maxlength="50">
  <button type="button" name="compost" onclick="my(1, this);" class="butn2">post comment</button>
</div>
<div id="comments" class="cmt">
  <img width="30px" height="30px" src="/cropphoto/<?php echo getuserPhoto($d['uid']); ?>">
  <input class="commentbox" name="comments" placeholder="Comment Here" maxlength="50">
  <button type="button" name="compost" onclick="my(2, this);" class="butn2">post comment</button>
</div>
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • @Barmar please check this link its working fine with Keypress with out button, but we need Button click Check out https://pastebin.com/6NvqYfqu – Madhu Munna Aug 28 '17 at 14:26
  • My snippet shows that button click works too. I don't know why it's not working for you. – Barmar Aug 28 '17 at 14:28
  • @have you seen My link Which i have sent to to you its working fine – Madhu Munna Aug 28 '17 at 14:30
  • Your link doesn't have a button. – Barmar Aug 28 '17 at 14:35
  • yes , sir that on key press function that works fine, var comment=$(".commentbox"+qid).val(); – Madhu Munna Aug 28 '17 at 14:39
  • I showed how to do it properly in my answer. Why are you doing `".commentbox" + qid`? The class doesn't have the qid at the end of it in the HTML. – Barmar Aug 28 '17 at 14:42
  • Your HTML has the qid at the end of the id, not the class, so it should be `$("#comment" + qid)`. But what's wrong with my code that uses `$(button).siblings(".commentbox")`? – Barmar Aug 28 '17 at 14:43
  • i have added +id on my keypress script thats working fine var comment=$("#comment"+id).val(); That is Why i have asked – Madhu Munna Aug 28 '17 at 14:48
  • I posted an answer that shows how to do it. If you want to do it some other way, you're on your own. – Barmar Aug 28 '17 at 14:49
  • Cool, sir that's not working inserting into database that problem – Madhu Munna Aug 28 '17 at 14:51
  • What parameters is it sending to the server? Use the Network tab of Developer Tools to examine the AJAX request. – Barmar Aug 28 '17 at 23:54
  • barmar thank you, sir, it's working I made small changes like var comment = $("#comment"+qid).val(); and in html – Madhu Munna Aug 29 '17 at 06:32
  • @MadhuMunna You know ID=comments never can be more than 1. It's better to add comment+qid. Or use class + parent() – Granit Aug 29 '17 at 08:02
  • What was wrong with `$(button).siblings(".commentbox").val()`? – Barmar Aug 29 '17 at 20:45
  • @Barmar missing quotes? $("button").siblings(".commentbox").val(). I usually use $(this).parent().find(".commentbox").val() – Granit Aug 30 '17 at 06:59
  • `button` is a variable, it's the second argument to the `my()` function, so it shouldn't be quoted. – Barmar Aug 30 '17 at 23:22
0

First, you don't need to use:

$("#comq").click (function my(e...

because you already have onclick(my(a,b)). Just create a function like:

function my(a, b){
        alert(a +" "+b)
}

Does this work for you?

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="comments" class="cmt" >
    <img width="30px" height="30px" src="/cropphoto/<?php echo getuserPhoto($d['uid']); ?>">
    <input class="commentbox" id="comment"  name="comments" placeholder="Comment Here" maxlength="50" >
    <button type="button" id="comq" name="compost" onclick="my(2, 'test test')" class="butn2" >post comment</button>

</div>

<script>
    function my(comment, qid){

        alert(comment + " - " + qid)
        $.ajax({
            cache:false,
            type:"post",
            url:"jquery.php",
            data:{comments:comment,qid:qid},
            success:function(data)
            {
                $("#comment").val("");
            }
        });
    }
</script>

</body>
</html>
Granit
  • 188
  • 1
  • 11
  • got an alert like object mouse event qid no – Madhu Munna Aug 28 '17 at 11:27
  • @Barmar please improve granit answer its working with small bugs – Madhu Munna Aug 28 '17 at 11:33
  • @MadhuMunna could you open the html in "incognito" mode?. Once you press the button. The onclick will pass two params (2 and "test test"). Alert will display these two. Only when you see the correct data, then change the "test test" to your php code – Granit Aug 28 '17 at 11:41
  • @Granit Thanks, some results now getting from your code but still have small bugs i will let you Know please stay on with me few minutes – Madhu Munna Aug 28 '17 at 11:48
  • @granit still getting some errors like undefined some – Madhu Munna Aug 28 '17 at 13:15
  • Would you post the error? use chrome and check out console. Just copy and paste the error message here. – Granit Aug 28 '17 at 13:39
  • @Granit comments not inserted into database only one comment inserted into database I have multiple queries (qid) – Madhu Munna Aug 28 '17 at 15:46