How add Onclick in html

Question

i have a html code. I want to implement onclickfor a button name GET DATA in my html code. Also i want to senduserId andcategoryId data to a php file when i click on buttonGET DATA Please add this on my code.Here is my code

<html>
<header>
    <title>Hello World
    </title>
    </header>
<body>





<!--javascript make append table data-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>

<script>

    $(function() {

var user = document.getElementById("userId").value;
var category = document.getElementById("categoryId").value;
alert (user);
alert (category);
   $.getJSON('myphp.php',{"userId":'user',"categoryId":'category'}, function(data) {
 $.each(data.videoLectureListing, function(i, f) {

        var link = "https://www.youtube.com/embed/"+ f.video;

         var tblRows = "<tr>" + "<td>" + f.videoName + "</td>" + "<td>" + f.date + "</td>" + "<td>" + f.time + "</td>" +          "<td>" + f.videoDuration + "</td>" + "<td><a target='_blank' href='"+link+"'>"+link+"</a></td>" + "</tr>";
          $(tblRows).appendTo("#userdata tbody");

     });

   });

});
</script>




<!--javascript  append table data ended -->

















<!-- user form -->
<form method='GET'>
    <label for="userId"><b>UserId</b></label>
    <input id='userId' type="number" placeholder="Enter Your User Id" name="userId" autofocus required>

    <label for="categoryId"><b>categoryId</b></label>
    <input id='categoryId' type="number" placeholder="Enter categoryId" name="categoryId" required>
    <button type="submit" >GET DATA</button>

</form>
<!-- user form -->
















<!--table-->

<div class="wrapper">
<div class="profile">
   <table id= "userdata" width="100%" border="5">
  <thead>
            <th>VIDEO NAME</th>
            <th>DATE</th>
            <th>TIME</th>
            <th>DURACTION</th>
            <th>LINK </th>
        </thead>
      <tbody>

       </tbody>
   </table>

</div>
</div>

<!--table data end-->


</body>
</html>

Does this answer your question? [Adding onClick event dynamically using jQuery](https://stackoverflow.com/questions/12284168/adding-onclick-event-dynamically-using-jquery) — Kiwi Rupela, Nov 03 '19 at 13:09

score 0 · Answer 1 · answered Nov 03 '19 at 11:02

0

Give your button an id and change type from submit to button:

<button id="myButton type="button" >GET DATA</button>

You are using jQuery so you can add an event listener (onclick event) like this:

$('#myButton').click(function(){
  // your code here
});

More about ajax and PHP you will find here: Form submit with AJAX passing form data to PHP without page refresh

answered Nov 03 '19 at 11:02

Mike

330
2
7

thanks solved my problem. I have a another dought i want to clear the data presented in table `userdata` when a user input a some other id then it appending under current data – Aman Nov 03 '19 at 11:17

Ritesh Khandekar · Answer 2 · 2019-11-03T11:21:47.053

shortest version of your code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
<form method='GET'>
    <label for="userId"><b>UserId</b></label>
    <input id='userId' type="number" placeholder="Enter Your User Id" name="userId" autofocus required>

    <label for="categoryId"><b>categoryId</b></label>
    <input id='categoryId' type="number" placeholder="Enter categoryId" name="categoryId" required>
    <button type="submit" >GET DATA</button>

</form>
$("body").on("submit","form", function(){
    let fdata= new FormData($("form")[0]);
   alert(fdata);

$.ajax({type:'GET',url:'myphp.php',data:fdata, success: function (data){
     $.each(data.videoLectureListing, function(i, f) {
      var link = "https://www.youtube.com/embed/"+ f.video;
      var tblRows = "<tr>" + "<td>" + f.videoName + "</td>" + "<td>" + f.date + "</td>" + "<td>" + f.time + "</td>" +          "<td>" + f.videoDuration + "</td>" + "<td><a target='_blank' href='"+link+"'>"+link+"</a></td>" + "</tr>";
$("#userdata tbody").empty();

$(tblRows).appendTo("#userdata tbody");
     });
}});
}
</script>
<div class="wrapper">
<div class="profile">
   <table id= "userdata" width="100%" border="5">
   <thead>
            <th>VIDEO NAME</th>
            <th>DATE</th>
            <th>TIME</th>
            <th>DURACTION</th>
            <th>LINK </th>
        </thead>
      <tbody>
       </tbody>
   </table>
</div>
</div>

thanks solved my problem. I have a another dought i want to clear the data presented in table userdata when a user input a some other id then it appending under current data — Aman, Nov 03 '19 at 11:20

How add Onclick in html

2 Answers2